CSS3和JQUERY带动画效果的图片扇形展示

CSS3和JQUERY带动画效果的图片扇形展示268
HTML
<div id="sb-container" class="sb-container">
 
    <div>
        <span class="sb-icon icon-cog"></span>
        <h4><span>All Settings</span></h4>
    </div>
     
    <div>
        <span class="sb-icon icon-flight"></span>
        <h4><span>User Modes</span></h4>
    </div>    
     
    <div>
        <!-- ... -->
    </div>    
     
    <!-- ... -->
     
    <div>
        <h4><span>Profile</span></h4>
        <h5><span>We ? color</span></h5>
    </div>
     
</div><!-- sb-container -->
CSS 首先,让我们定义包含包装的风格。 我们将同样的宽度就像一个色板(尽管他们会占用更多的空间),这样我们可以很容易地中心:
.sb-container {
    position: relative;
    width: 150px;
    height: 400px;
    margin: 30px auto 0 auto;
}
.sb-container div {
    position: absolute;
    top: 0;
    left: 0; 
    width: 130px;
    background: #fff;
    height: 400px;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    background-image: url(../images/fabric.png);
    transform-origin: 25% 90%;
    backface-visibility: hidden;
}
让我们定义一个不同的背景颜色和盒阴影:
.sb-container div:nth-child(1){
    background-color: #ea2a29;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);
}
.sb-container div:nth-child(2){
    background-color: #f16729;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 2px 2px 1px rgba(0,0,0,0.1);
}
.sb-container div:nth-child(3){
    background-color: #f89322;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 3px 3px 2px rgba(0,0,0,0.2);
}
.sb-container div:nth-child(4){
    background-color: #ffcf14;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 4px 4px 4px rgba(0,0,0,0.2);
}
.sb-container div:nth-child(5){
    background-color: #ffea0d;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 5px 5px 6px rgba(0,0,0,0.3);
}
.sb-container div:nth-child(6){
    background-color: #87b11d;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 6px 6px 8px rgba(0,0,0,0.3);
}
.sb-container div:nth-child(7){
    background-color: #008253;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 7px 7px 10px rgba(0,0,0,0.4);
}
.sb-container div:nth-child(8){
    background-color: #3277b5;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 8px 8px 12px rgba(0,0,0,0.4);
}
.sb-container div:nth-child(9){
    background-color: #4c549f;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 9px 9px 14px rgba(0,0,0,0.4);
}
.sb-container div:nth-child(10){
    background-color: #764394;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 10px 10px 16px rgba(0,0,0,0.4);
}
.sb-container div:nth-child(11){
    background-color: #ca0d86;
    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 11px 11px 18px rgba(0,0,0,0.4);
}
我们想让它看起来尽可能的现实,所以我们会给最底部的元素,这是我们的第一个元素,一个非常微妙的阴影。 为每个元素后我们将增加第二个影子。 最后一个样本将作为封面,所以我们要给它一个特殊的背景和盒阴影:
.sb-container div:last-child{
    background: #645b5c url(../images/cover.jpg) repeat center center;
    box-shadow: 
        -1px -1px 3px rgba(0,0,0,0.2),
        12px 12px 20px rgba(0,0,0,0.6),
        inset 2px 2px 0 rgba(255, 255, 255, 0.1);
}
让我们添加一个小铜扣。为此,我们将使用伪类:后。它将有一个梯度和一盒阴影让它看起来像如果是金属。 的位置取决于transform-origin色板,既然我们已经选择了左下角,我们将设置显示位置的黄铜紧固件,:
.sb-container div:last-child:after{
    content: '';
    position: absolute;
    bottom: 15px;
    left: 15px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #dddddd;
    background: linear-gradient(135deg, #dddddd 0%,#58535e 48%,#889396 100%);
    box-shadow: -1px -1px 1px rgba(0,0,0,0.5), 1px 1px 1px rgba(255,255,255,0.1);
}
让我们风格化标题:
.sb-container div h4{
    color: rgba(255,255,255,0.9);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    border-top: 1px dashed rgba(0,0,0,0.1);
    border-bottom: 1px dashed rgba(0,0,0,0.1);
    margin: 5px;
    padding: 5px;
    user-select: none;
}
.sb-container div:last-child h4{
    background: rgba(0,0,0,0.2);
    box-shadow: 0 1px 1px rgba(255,255,255,0.1);
}
封面大标题会旋转,翻译成正确的位置。这取决于它的大小,所以如果我们使用,换句话说,我们需要调整这些值:
.sb-container div:last-child h5{
    font-size: 50px;
    white-space: nowrap;
    text-align: left;
    margin: 0;
    padding: 0;
    position: absolute;
    line-height: 50px;
    top: 0px;
    left: 0px;
    color: #111;
    text-shadow: -1px -1px 1px rgba(255,255,255,0.1);
    text-transform: uppercase;
    transform: rotate(-90deg) translateX(-157%) translateY(73px);
    transform-origin: 0 0;
    user-select: none;
}
最后,但并非最不重要,让我们风格化图标类。
span.sb-icon{
    display: block;
    height: 70px;
    width: 70px;
    margin: 20px auto;
    user-select: none;
}
span.sb-icon:before {
    font-family: 'icons';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: block;
    text-decoration: inherit;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); 
    line-height: 64px;
    width: 100%;
    font-size: 60px;
    color: #000;
    text-shadow: 0 0 1px #000;
 
}
.icon-cog:before { content: '\35'; } /* '5' */
.icon-flight:before { content: '\37'; } /* '7' */
.icon-eye:before { content: '\34'; } /* '4' */
.icon-install:before { content: '\39'; } /* '9' */
.icon-bag:before { content: '\36'; } /* '6' */
.icon-globe:before { content: '\38'; } /* '8' */
.icon-picture:before { content: '\32'; } /* '2' */
.icon-video:before { content: '\30'; } /* '0' */
.icon-download:before { content: '\41'; } /* 'A' */
.icon-mobile:before { content: '\42'; } /* 'B' */
.icon-camera:before { content: '\33'; } /* '3' */
这是所有的风格!现在,让我们做一些效果! JAVASCRIPT 让我们先看一看我们的插件选项:
$.SwatchBook.defaults = {
    // index of initial centered item
    center : 6,
    // number of degrees that is between each item
    angleInc : 8,
    speed : 700,
    easing : 'ease',
    // amount in degrees for the opened item's next sibling
    proximity : 45,
    // amount in degrees between the opened item's next siblings
    neighbor : 4,
    // animate on load
    onLoadAnim : true,
    // if it should be closed by default
    initclosed : false,
    // index of the element that when clicked, triggers the open/close function
    // by default there is no such element
    closeIdx : -1,
    // open one specific item initially (overrides initclosed)
    openAt : -1
};
我们将首先执行_init功能:
_init : function( options ) {
             
    this.options = $.extend( true, {}, $.SwatchBook.defaults, options );
 
    this.$items = this.$el.children( 'div' );
    this.itemsCount = this.$items.length;
    this.current = -1;
    this.support = Modernizr.csstransitions;
    this.cache = [];
     
    if( this.options.onLoadAnim ) {
        this._setTransition();
    }
 
    if( !this.options.initclosed ) {
        this._center( this.options.center, this.options.onLoadAnim );
    }
    else {
 
        this.isClosed = true;
        if( !this.options.onLoadAnim ) {
            this._setTransition();
        }
 
    }
 
    if( this.options.openAt >= 0 && this.options.openAt < this.itemsCount ) {
        this._openItem( this.$items.eq( this.options.openAt ) );
    }
     
    this._initEvents();
     
}
最后我们加载项的单击事件。
_setTransition : function() {
 
    if( this.support ) {
        this.$items.css( { 'transition': 'all ' + this.options.speed + 'ms ' + this.options.easing } );
    }
 
}
当我们单击其中一个项目,项目将旋转因此0度。 我们还需要旋转它的兄弟姐妹,在这样的方式,我们可以阅读打开项目的内容:
_initEvents : function() {
 
    var self = this;
     
    this.$items.on( 'click.swatchbook', function( event ) {
        self._openItem( $( this ) );
    } );
 
}
 
_openItem : function( $item ) {
     
    var itmIdx = $item.index();
     
    if( itmIdx !== this.current ) {
 
        if( this.options.closeIdx !== -1 && itmIdx === this.options.closeIdx ) {
 
            this._openclose();
            this._setCurrent();
 
        }
        else {
 
            this._setCurrent( $item );
            $item.css( { 'transform' : 'rotate(0deg)' } );
            this._rotateSiblings( $item );
 
        }
 
    }
 
}
_rotateSiblings像这样:
_rotateSiblings : function( $item ) {
 
    var self = this,
        idx = $item.index(),
        $cached = this.cache[ idx ],
        $siblings;
 
    if( $cached ) {
        $siblings = $cached;
    }
    else {
 
        $siblings = $item.siblings();
        this.cache[ idx ] = $siblings;
         
    }
 
    $siblings.each( function( i ) {
 
        var rotateVal = i < idx ? 
            self.options.angleInc * ( i - idx ) : 
            i - idx === 1 ?
                self.options.proximity : 
                self.options.proximity + ( i - idx - 1 ) * self.options.neighbor;
 
        var transformStr = 'rotate(' + rotateVal + 'deg)';
 
        $( this ).css( { 'transform' : transformStr } );
 
    } );
 
}
如果我们希望最初关闭和/或我们指定一个项目来触发打开/关闭功能,点击事件,项目将打开/关闭样本书,根据其目前状况:
_openclose : function() {
 
    this.isClosed ? this._center( this.options.center, true ) : this.$items.css( { 'transform' : 'rotate(0deg)' } );
    this.isClosed = !this.isClosed;
 
}
好了,希望对你有帮助

也许你还喜欢