超酷的响应式动态片状全屏轮播式幻灯效果

太过爱你忘了你带给我的痛 2022-08-05 12:05 189阅读 0赞

![165.jpg][]

2014-8-6 10:22:23 上传

[**下载附件** (39.7 KB)][_39.7 KB]

[在线演示1][1] [ 在线演示2][_2] [ 在线演示3][_3] [ 本地下载][Link 1]

使用[CSS3][]和Javascript生成的超酷动态幻灯效果。  
  
  
HTML

以上代码生成全屏式样的图片幻灯效果，完整代码如下：

CSS  
  
完整的CSS3代码：

html, body, .container {
            height: 100%;
    }
    
    .js .boxgallery,
    .js .boxgallery div {
            position: absolute;
    }
    
    .js .boxgallery,
    .bg-tile,
    .bg-img {
            overflow: hidden;
    }
    
    .js .boxgallery,
    .js .panel {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
    }
    
    .panel {
            z-index: 0;
            -webkit-perspective: 1200px;
            perspective: 1200px;
    }
    
    .bg-tile {
            width: 50%;
            height: 50%;
    }
    
    .bg-tile:nth-child(2),
    .bg-tile:nth-child(4) {
            left: 50%;
    }
    
    .bg-tile:nth-child(3),
    .bg-tile:nth-child(4) {
            top: 50%;
    }
    
    .bg-img {
            width: 100%;
            height: 100%;
            background: #999;
    }
    
    .bg-img img {
            position: absolute;
            display: block;
            height: 200%;
    }
    
    @media screen and (min-aspect-ratio: 1280/850) {
            .bg-img img {
                    width: 200%;
                    height: auto;
            }
    }
    
    .bg-tile:nth-child(2) .bg-img img,
    .bg-tile:nth-child(4) .bg-img img {
            left: -100%;
    }
    
    .bg-tile:nth-child(3) .bg-img img,
    .bg-tile:nth-child(4) .bg-img img {
            top: -100%;
    }
    
    /* Navigation Arrow */
    .boxgallery > nav span {
            position: absolute;
            top: 50%;
            z-index: 1000;
            display: block;
            width: 100px;
            height: 100px;
            outline: none;
            text-align: left;
            cursor: pointer;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    }
    
    .boxgallery > nav span.prev {
            left: 0;
    }
    
    .boxgallery > nav span.next {
            right: 0;
    }
    
    .boxgallery > nav i {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
    }
    
    .boxgallery > nav span::before,
    .boxgallery > nav span::after,
    .boxgallery > nav i::before,
    .boxgallery > nav i::after {
            position: absolute;
            left: 50%;
            width: 3px;
            height: 50%;
            outline: 1px solid transparent;
            background: #dbccd0;
            content: '';
            -webkit-transition: -webkit-transform 0.3s;
            transition: transform 0.3s;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    }
    
    .boxgallery > nav i::before,
    .boxgallery > nav i::after {
            z-index: 100;
            height: 0;
            background: #fff;
            -webkit-transition: height 0.3s, -webkit-transform 0.3s;
            transition: height 0.3s, transform 0.3s;
    }
    
    .boxgallery > nav span::before,
    .boxgallery > nav i::before {
            top: 50%;
            -webkit-transform: translateX(-50%) rotate(-135deg);
            transform: translateX(-50%) rotate(-135deg);
            -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    }
    
    .boxgallery > nav span.next::before,
    .boxgallery > nav span.next i::before {
            -webkit-transform: translateX(-50%) rotate(135deg);
            transform: translateX(-50%) rotate(135deg);
            -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    }
    
    .boxgallery > nav span::after,
    .boxgallery > nav i::after {
            top: 50%;
            -webkit-transform: translateX(-50%) rotate(-45deg);
            transform: translateX(-50%) rotate(-45deg);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    }
    
    .boxgallery > nav span.next::after,
    .boxgallery > nav span.next i::after {
            -webkit-transform: translateX(-50%) rotate(45deg);
            transform: translateX(-50%) rotate(45deg);
            -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    }
    
    .no-touch .boxgallery > nav span:hover i::before,
    .no-touch .boxgallery > nav span:hover i::after {
            height: 50%;
    }
    
    .no-touch .boxgallery > nav span:hover::before,
    .no-touch .boxgallery > nav span:hover i::before {
            -webkit-transform: translateX(-50%) rotate(-125deg);
            transform: translateX(-50%) rotate(-125deg);
    }
    
    .no-touch .boxgallery > nav span.next:hover::before,
    .no-touch .boxgallery > nav span.next:hover i::before {
            -webkit-transform: translateX(-50%) rotate(125deg);
            transform: translateX(-50%) rotate(125deg);
    }
    
    .no-touch .boxgallery > nav span:hover::after,
    .no-touch .boxgallery > nav span:hover i::after {
            -webkit-transform: translateX(-50%) rotate(-55deg);
            transform: translateX(-50%) rotate(-55deg);
    }
    
    .no-touch .boxgallery > nav span.next:hover::after,
    .no-touch .boxgallery > nav span.next:hover i::after {
            -webkit-transform: translateX(-50%) rotate(55deg);
            transform: translateX(-50%) rotate(55deg);
    }
    
    /* Transitions and individual delays/effects */
    /* The "active" class is given to the panel that is coming */
    
    .panel.current {
            z-index: 2;
    }
    
    .panel.active {
            z-index: 1;
    }
    
    .panel.current .bg-img {
            -webkit-transition: -webkit-transform 1.1s ease-in-out;
            transition: transform 1.1s ease-in-out;
    }
    
    .boxgallery[data-effect="effect-1"] .panel.active .bg-tile,
    .boxgallery[data-effect="effect-2"] .panel.active .bg-tile {
            -webkit-animation: scaleDown 1.1s ease-in-out;
            animation: scaleDown 1.1s ease-in-out;
    }
    
    @-webkit-keyframes scaleDown {
            from { -webkit-transform: translate3d(0,0,380px); transform: translate3d(0,0,380px); }
            to { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
    }
    
    @keyframes scaleDown {
            from { -webkit-transform: translate3d(0,0,380px); transform: translate3d(0,0,380px); }
            to { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
    }
    
    /* Variation 2 */
    .boxgallery[data-effect="effect-2"] .panel.current .bg-img {
            -webkit-transition: -webkit-transform 0.9s cubic-bezier(0.7,0,0.3,1);
            transition: transform 0.9s cubic-bezier(0.7,0,0.3,1);
    }
    
    .boxgallery[data-effect="effect-2"] .panel.current .bg-tile:nth-child(2) .bg-img {
            -webkit-transition-delay: 0.15s;
            transition-delay: 0.15s;
    }
    
    .boxgallery[data-effect="effect-2"] .panel.current .bg-tile:nth-child(3) .bg-img {
            -webkit-transition-delay: 0.3s;
            transition-delay: 0.3s;
    }
    
    .boxgallery[data-effect="effect-2"] .panel.current .bg-tile:nth-child(4) .bg-img {
            -webkit-transition-delay: 0.45s;
            transition-delay: 0.45s;
    }
    
    /* Variation 3 */
    .boxgallery[data-effect="effect-3"] .panel::after {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            content: '';
            -webkit-transition: opacity 1.1s ease-in-out;
            transition: opacity 1.1s ease-in-out;
    }
    
    .boxgallery[data-effect="effect-3"] .panel.current::after,
    .boxgallery[data-effect="effect-3"] .panel.active::after {
            opacity: 0;
    }
    
    .boxgallery[data-effect="effect-3"] .panel.current::after {
            -webkit-transition: none;
            transition: none;
    }
    
    .boxgallery[data-effect="effect-3"] .panel.current .bg-img {
            -webkit-transition: -webkit-transform 1.1s cubic-bezier(0.7,0,0.3,1);
            transition: transform 1.1s cubic-bezier(0.7,0,0.3,1);
    }
    
    .boxgallery[data-effect="effect-3"] .panel.current .bg-tile:nth-child(2) .bg-img {
            -webkit-transition-delay: 0.15s;
            transition-delay: 0.15s;
    }
    
    .boxgallery[data-effect="effect-3"] .panel.current .bg-tile:nth-child(3) .bg-img {
            -webkit-transition-delay: 0.3s;
            transition-delay: 0.3s;
    }
    
    .boxgallery[data-effect="effect-3"] .panel.current .bg-tile:nth-child(4) .bg-img {
            -webkit-transition-delay: 0.45s;
            transition-delay: 0.45s;
    }
    
    @media screen and (max-width: 380px) {
            .boxgallery > nav span {
                    width: 50px;
                    height: 50px;
            }
    }

Javascript

( function( window ) {
            
            'use strict';
    
            // based on http://responsejs.com/labs/dimensions/
            function getViewport(axis) {
                    var client, inner;
                    if( axis === 'x' ) {
                            client = docElem['clientWidth'];
                            inner = window['innerWidth'];
                    }
                    else if( axis === 'y' ) {
                            client = docElem['clientHeight'];
                            inner = window['innerHeight'];
                    }
                    
                    return client < inner ? inner : client;
            }
    
            var docElem = window.document.documentElement,
                    transEndEventNames = {
                            'WebkitTransition': 'webkitTransitionEnd',
                            'MozTransition': 'transitionend',
                            'OTransition': 'oTransitionEnd',
                            'msTransition': 'MSTransitionEnd',
                            'transition': 'transitionend'
                    },
                    transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
                    support = { transitions : Modernizr.csstransitions },
                    win = { width : getViewport('x'), height : getViewport('y') };
            
            function extend( a, b ) {
                    for( var key in b ) { 
                            if( b.hasOwnProperty( key ) ) {
                                    a[key] = b[key];
                            }
                    }
                    return a;
            }
    
            function BoxesFx( el, options ) {        
                    this.el = el;
                    this.options = extend( {}, this.options );
                    extend( this.options, options );
                    this._init();
            }
    
            BoxesFx.prototype.options = {}
    
            BoxesFx.prototype._init = function() {
                    // set transforms configuration
                    this._setTransforms();
                    // which effect
                    this.effect = this.el.getAttribute( 'data-effect' ) || 'effect-1';
                    // check if animating
                    this.isAnimating = false;
                    // the panels
                    this.panels = [].slice.call( this.el.querySelectorAll( '.panel' ) );
                    // total number of panels (4 for this demo)
                    //this.panelsCount = this.panels.length;
                    this.panelsCount = 4;
                    // current panel´s index
                    this.current = 0;
                    classie.add( this.panels[0], 'current' );
                    // replace image with 4 divs, each including the image
                    var self = this;
                    this.panels.forEach( function( panel ) {
                            var img = panel.querySelector( 'img' ), imgReplacement = '';
                            for( var i = 0; i < self.panelsCount; ++i ) {
                                    imgReplacement += '<div class="bg-tile"><div class="bg-img"><img src="' + img.src + '" /></div></div>'
                            }
                            panel.removeChild( img );
                            panel.innerHTML = imgReplacement + panel.innerHTML;
                    } );
                    // add navigation element
                    this.nav = document.createElement( 'nav' );
                    this.nav.innerHTML = '<span class="prev"><i></i></span><span class="next"><i></i></span>';
                    this.el.appendChild( this.nav );
                    // initialize events
                    this._initEvents();
            }
    
            // set the transforms per effect
            // we have defined both the next and previous action transforms for each panel
            BoxesFx.prototype._setTransforms = function() {
                    this.transforms = {
                            'effect-1' : {
                                    'next' : [
                                            'translate3d(0, ' + (win.height/2+10) + 'px, 0)', // transforms for 1 panel
                                            'translate3d(-' + (win.width/2+10) + 'px, 0, 0)', // transforms for 2 panel
                                            'translate3d(' + (win.width/2+10) + 'px, 0, 0)', // transforms for 3 panel
                                            'translate3d(0, -' + (win.height/2+10) + 'px, 0)' // transforms for 4 panel
                                    ],
                                    'prev' : [
                                            'translate3d(' + (win.width/2+10) + 'px, 0, 0)',
                                            'translate3d(0, ' + (win.height/2+10) + 'px, 0)',
                                            'translate3d(0, -' + (win.height/2+10) + 'px, 0)',
                                            'translate3d(-' + (win.width/2+10) + 'px, 0, 0)'
                                    ]
                            },
                            'effect-2' : {
                                    'next' : [
                                            'translate3d(-' + (win.width/2+10) + 'px, 0, 0)',
                                            'translate3d(' + (win.width/2+10) + 'px, 0, 0)',
                                            'translate3d(-' + (win.width/2+10) + 'px, 0, 0)',
                                            'translate3d(' + (win.width/2+10) + 'px, 0, 0)'
                                    ],
                                    'prev' : [
                                            'translate3d(0,-' + (win.height/2+10) + 'px, 0)',
                                            'translate3d(0,-' + (win.height/2+10) + 'px, 0)',
                                            'translate3d(0,' + (win.height/2+10) + 'px, 0)',
                                            'translate3d(0,' + (win.height/2+10) + 'px, 0)'
                                    ]
                            },
                            'effect-3' : {
                                    'next' : [
                                            'translate3d(0,' + (win.height/2+10) + 'px, 0)',
                                            'translate3d(0,' + (win.height/2+10) + 'px, 0)',
                                            'translate3d(0,' + (win.height/2+10) + 'px, 0)',
                                            'translate3d(0,' + (win.height/2+10) + 'px, 0)'
                                    ],
                                    'prev' : [
                                            'translate3d(0,-' + (win.height/2+10) + 'px, 0)',
                                            'translate3d(0,-' + (win.height/2+10) + 'px, 0)',
                                            'translate3d(0,-' + (win.height/2+10) + 'px, 0)',
                                            'translate3d(0,-' + (win.height/2+10) + 'px, 0)'
                                    ]
                            }
                    };        
            }
    
            BoxesFx.prototype._initEvents = function() {
                    var self = this, navctrls = this.nav.children;
                    // previous action
                    navctrls[0].addEventListener( 'click', function() { self._navigate('prev') } );
                    // next action
                    navctrls[1].addEventListener( 'click', function() { self._navigate('next') } );
                    // window resize
                    window.addEventListener( 'resize', function() { self._resizeHandler(); } );
            }
    
            // goto next or previous slide
            BoxesFx.prototype._navigate = function( dir ) {
                    if( this.isAnimating ) return false;
                    this.isAnimating = true;
    
                    var self = this, currentPanel = this.panels[ this.current ];
    
                    if( dir === 'next' ) {
                            this.current = this.current < this.panelsCount - 1 ? this.current + 1 : 0;                        
                    }
                    else {
                            this.current = this.current > 0 ? this.current - 1 : this.panelsCount - 1;
                    }
    
                    // next panel to be shown
                    var nextPanel = this.panels[ this.current ];
                    // add class active to the next panel to trigger its animation
                    classie.add( nextPanel, 'active' );
                    // apply the transforms to the current panel
                    this._applyTransforms( currentPanel, dir );
    
                    // let´s track the number of transitions ended per panel
                    var cntTransTotal = 0,
                            
                            // transition end event function
                            onEndTransitionFn = function( ev ) {
                                    if( ev && !classie.has( ev.target, 'bg-img' ) ) return false;
    
                                    // return if not all panel transitions ended
                                    ++cntTransTotal;
                                    if( cntTransTotal < self.panelsCount ) return false;
    
                                    if( support.transitions ) {
                                            this.removeEventListener( transEndEventName, onEndTransitionFn );
                                    }
    
                                    // remove current class from current panel and add it to the next one
                                    classie.remove( currentPanel, 'current' );
                                    classie.add( nextPanel, 'current' );
                                    // reset transforms for the currentPanel
                                    self._resetTransforms( currentPanel );
                                    // remove class active
                                    classie.remove( nextPanel, 'active' );
                                    self.isAnimating = false;
                            };
    
                    if( support.transitions ) {
                            currentPanel.addEventListener( transEndEventName, onEndTransitionFn );
                    }
                    else {
                            onEndTransitionFn();
                    }
            }
    
            BoxesFx.prototype._applyTransforms = function( panel, dir ) {
                    var self = this;
                    [].slice.call( panel.querySelectorAll( 'div.bg-img' ) ).forEach( function( tile, pos ) {
                            tile.style.WebkitTransform = self.transforms[self.effect][dir][pos];
                            tile.style.transform = self.transforms[self.effect][dir][pos];
                    } );
            }
    
            BoxesFx.prototype._resetTransforms = function( panel ) {
                    [].slice.call( panel.querySelectorAll( 'div.bg-img' ) ).forEach( function( tile ) {
                            tile.style.WebkitTransform = 'none';
                            tile.style.transform = 'none';
                    } );
            }
    
            BoxesFx.prototype._resizeHandler = function() {
                    var self = this;
                    function delayed() {
                            self._resize();
                            self._resizeTimeout = null;
                    }
                    if ( this._resizeTimeout ) {
                            clearTimeout( this._resizeTimeout );
                    }
                    this._resizeTimeout = setTimeout( delayed, 50 );
            }
    
            BoxesFx.prototype._resize = function() {
                    win.width = getViewport('x');
                    win.height = getViewport('y');
                    this._setTransforms();
            }
    
            // add to global namespace
            window.BoxesFx = BoxesFx;
    
    } )( window );

[165.jpg]: http://bbs.html5cn.org/data/attachment/forum/201408/06/102223swrovvr9vt9zv8m3.jpg
[_39.7 KB]: http://bbs.html5cn.org/forum.php?mod=attachment&aid=MjQxMjZ8NTc4MjU0Njd8MTQzMDgzMzMzOXwwfDgzNzc0&nothumb=yes
[1]: http://www.gbtags.com/gb/de**wer/3663/ad8a2c61-2bc6-407b-ba90-432092ec9bc3/FourBoxes%7Cindex.html.htm
[_2]: http://www.gbtags.com/gb/de**wer/3663/ad8a2c61-2bc6-407b-ba90-432092ec9bc3/FourBoxes%7Cindex2.html.htm
[_3]: http://www.gbtags.com/gb/de**wer/3663/ad8a2c61-2bc6-407b-ba90-432092ec9bc3/FourBoxes%7Cindex3.html.htm
[Link 1]: http://www.gbtags.com/gb/share/3663.htm#
[CSS3]: http://www.html5cn.org/portal.php?mod=list&catid=16