Trang chủ Module có hiệu ứng (Chứa JS) Slider show hiệu ứng animation

Slider show hiệu ứng animation

Giá: 490.000₫

<div class="slideshow" id="slideshow">
                <ol class="slides">
                    <li class="current">
                        <div class="description">
                            <h2>Tilted Content Slideshow</h2>
                            <p>This slider, as seen on the landing page of the <a href="http://www.thefwa.com/">FWA</a>, plays with 3D perspective and performs some interesting animations on the right-hand side images.</p>
                        </div>
                        <div class="tiltview col">
                            <a href="http://grovemade.com/"><img src="https://tympanus.net/Tutorials/TiltedContentSlideshow/img/1_screen.jpg"/></a>
                            <a href="https://tsovet.com/"><img src="https://tympanus.net/Tutorials/TiltedContentSlideshow/img/2_screen.jpg"/></a>
                        </div>
                    </li>
                    <li>
                        <div class="description">
                            <h2>CSS Animations</h2>
                            <p>We are using 12 different animations for showing and hiding the items of a slide. The animations are defined by randomly adding data-attributes called <code>data-effect-in</code> and <code>data-effect-out</code> for every slide. </p>
                        </div>
                        <div class="tiltview row">
                            <a href="http://pexcil.com/"><img src="https://tympanus.net/Tutorials/TiltedContentSlideshow/img/3_mobile.jpg"/></a>
                            <a href="http://foodsense.is/"><img src="https://tympanus.net/Tutorials/TiltedContentSlideshow/img/4_mobile.jpg"/></a>
                        </div>
                    </li>
                    <li>
                        <div class="description">
                            <h2>Tilted Items</h2>
                            <p>The perspective view is achieved by adding a perspective value to the slide list item and tilting a division that contains the two screenshots.</p>
                        </div>
                        <div class="tiltview col">
                            <a href="http://minimalmonkey.com/"><img src="https://tympanus.net/Tutorials/TiltedContentSlideshow/img/5_screen.jpg"/></a>
                            <a href="http://www.herschelsupply.com/"><img src="https://tympanus.net/Tutorials/TiltedContentSlideshow/img/6_screen.jpg"/></a>
                        </div>
                    </li>
                    <li>
                        <div class="description">
                            <h2>Column or Row</h2>
                            <p>The items in the tilted container are either laid out in a column or in a row. For some directions we need to adjust the animation delays for the items, since we don't want the items to overlap each other when they move in or out.</p>
                        </div>
                        <div class="tiltview row">
                            <a href="http://grovemade.com/"><img src="https://tympanus.net/Tutorials/TiltedContentSlideshow/img/1_mobile.jpg"/></a>
                            <a href="https://tsovet.com/"><img src="https://tympanus.net/Tutorials/TiltedContentSlideshow/img/2_mobile.jpg"/></a>
                        </div>
                    </li>
                    <li>
                        <div class="description">
                            <h2>Responsiveness</h2>
                            <p>For smaller screens, the items on the right hand side will become less opaque and serve as decoration only. The focus will be on the description which will occupy all the width.</p>
                        </div>
                        <div class="tiltview col">
                            <a href="http://pexcil.com/"><img src="https://tympanus.net/Tutorials/TiltedContentSlideshow/img/3_screen.jpg"/></a>
                            <a href="http://foodsense.is/"><img src="https://tympanus.net/Tutorials/TiltedContentSlideshow/img/4_screen.jpg"/></a>
                        </div>
                    </li>
                    <li>
                        <div class="description">
                            <h2>Navigation</h2>
                            <p>For the "line" navigation we use a little trick to make the clickable area a bit bigger: we add a thick white border to the top and bottom of the span. Since the border is part of the element, it will be part of the clickable zone.</p>
                        </div>
                        <div class="tiltview row">
                            <a href="http://minimalmonkey.com/"><img src="https://tympanus.net/Tutorials/TiltedContentSlideshow/img/5_mobile.jpg"/></a>
                            <a href="http://www.herschelsupply.com/"><img src="https://tympanus.net/Tutorials/TiltedContentSlideshow/img/6_mobile.jpg"/></a>
                        </div>
                    </li>
                </ol>
            </div>

.slideshow {
	position: relative;
}

.slides {
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
	height: 340px;
	width: 100%;
	overflow: hidden;
	background: #ddd;
	color: #333;
}

.no-js .slides {
	height: auto;
}

.slides > li {
	width: 100%;
	height: 100%;
	position: absolute;
	visibility: hidden;
	-webkit-perspective: 1600px;
	perspective: 1600px;
}

.no-js .slides > li {
	position: relative;
	visibility: visible;
}

.slideshow > nav {
	text-align: center;
	margin-top: 10px;
}

.slideshow > nav span {
	display: inline-block;
	width: 60px;
	height: 25px;
	border-top: 10px solid #fff;
	border-bottom: 10px solid #fff;
	background-color: #ddd;
	cursor: pointer;
	margin: 0 3px;
	transition: background-color 0.2s;
}

.slideshow > nav span:hover {
	background-color: #333;
}

.slideshow > nav span.current {
	background-color: #aaa;
}

.description {
	width: 50%;
	padding: 2em 4em;
	font-size: 1.5em;
	position: relative;
	z-index: 1000;
	opacity: 0;
}

.no-js .description {
	opacity: 1;
}

.description h2 {
	font-size: 200%;
}

.tiltview {
	position: absolute;
	left: 50%;
	width: 50%;
	top: 50%;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translateY(-50%) rotateX(60deg) rotateZ(35deg);
	transform: translateY(-50%) rotateX(60deg) rotateZ(35deg);
}

.tiltview a {
	outline: 1px solid transparent;
}

.tiltview a,
.tiltview a img {
	max-width: 100%;
	display: block;
	margin: 0 auto;
}

.tiltview a:first-child {
	margin-bottom: 30px;
}

.tiltview.row a {
	width: 48%;
	width: calc(50% - 15px);
	margin: 0;
}

.tiltview.row a:nth-child(2) {
	left: 50%;
	left: calc(50% + 15px);
	position: absolute;
	top: 0;
}

.slides > li.current,
.slides > li.show {
	visibility: visible;
}

.description {
	transition: opacity 0.75s;
}

.current .description,
.show .description {
	opacity: 1;
}

.hide .description {
	opacity: 0;
}

/* Individual effects */

/* Move Up, Move Down, Slide Up, Slide Down, Slide Left, Slide Right */
/* For each effect we'll define the incoming and outgoing animation */

/***********************/
/* Move up */
/***********************/
.hide[data-effect-out="moveUpOut"] .tiltview a {
	-webkit-animation: moveUpOut 1.5s both;
	animation: moveUpOut 1.5s both;
}

.hide[data-effect-out="moveUpOut"] .tiltview a:nth-child(2) {
	-webkit-animation-delay: 0.25s;
	animation-delay: 0.25s;
}

@-webkit-keyframes moveUpOut {
	25% {
		-webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-webkit-transform: translateZ(-30px);
	}
	100% {
		-webkit-transform: translateZ(3000px);
	}
}

@keyframes moveUpOut {
	25% {
		-webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-webkit-transform: translateZ(-30px);
		transform: translateZ(-30px);
	}
	100% {
		-webkit-transform: translateZ(3000px);
		transform: translateZ(3000px);
	}
}

.show[data-effect-in="moveUpIn"] .tiltview a {
	-webkit-animation: moveUpIn 1.5s 0.5s both;
	animation: moveUpIn 1.5s 0.5s both;
}

.show[data-effect-in="moveUpIn"] .tiltview a:nth-child(2) {
	-webkit-animation-delay: 0.75s;
	animation-delay: 0.75s;
}

@-webkit-keyframes moveUpIn {
	0% {
		-webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-webkit-transform: translateZ(-3000px);
	}
	75% {
		-webkit-transform: translateZ(30px);
	}
	100% {
		-webkit-transform: translateZ(0);
	}
}

@keyframes moveUpIn {
	0% {
		-webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-webkit-transform: translateZ(-3000px);
		transform: translateZ(-3000px);
	}
	75% {
		-webkit-transform: translateZ(30px);
		transform: translateZ(30px);
	}
	100% {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
}

.hide[data-effect-out="moveDownOut"] .tiltview a {
	-webkit-animation: moveDownOut 1.5s both;
	animation: moveDownOut 1.5s both;
}

.hide[data-effect-out="moveDownOut"] .tiltview a:nth-child(2) {
	-webkit-animation-delay: 0.25s;
	animation-delay: 0.25s;
}

@-webkit-keyframes moveDownOut {
	25% {
		-webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-webkit-transform: translateZ(30px);
	}
	100% {
		-webkit-transform: translateZ(-3000px);
	}
}

@keyframes moveDownOut {
	25% {
		-webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-webkit-transform: translateZ(30px);
		transform: translateZ(30px);
	}
	100% {
		-webkit-transform: translateZ(-3000px);
		transform: translateZ(-3000px);
	}
}

.show[data-effect-in="moveDownIn"] .tiltview a {
	-webkit-animation: moveDownIn 1.5s 0.5s both;
	animation: moveDownIn 1.5s 0.5s both;
}

.show[data-effect-in="moveDownIn"] .tiltview a:nth-child(2) {
	-webkit-animation-delay: 0.75s;
	animation-delay: 0.75s;
}

@-webkit-keyframes moveDownIn {
	0% {
		-webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-webkit-transform: translateZ(3000px);
	}
	75% {
		-webkit-transform: translateZ(-30px);
	}
	100% {
		-webkit-transform: translateZ(0);
	}
}

@keyframes moveDownIn {
	0% {
		-webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-webkit-transform: translateZ(3000px);
		transform: translateZ(3000px);
	}
	75% {
		-webkit-transform: translateZ(-30px);
		transform: translateZ(-30px);
	}
	100% {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
}
.hide[data-effect-out="slideUpOut"] .tiltview a {
	-webkit-animation: slideUpOut 1.5s both;
	animation: slideUpOut 1.5s both;
}

.hide[data-effect-out="slideUpOut"] .tiltview a:nth-child(2) {
	-webkit-animation-delay: 0.25s;
	animation-delay: 0.25s;
}

@-webkit-keyframes slideUpOut {
	25% {
		-webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-webkit-transform: translateY(30px);
	}
	100% {
		-webkit-transform: translateY(-3000px);
	}
}

@keyframes slideUpOut {
	25% {
		-webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-webkit-transform: translateY(30px);
		transform: translateY(30px);
	}
	100% {
		-webkit-transform: translateY(-3000px);
		transform: translateY(-3000px);
	}
}

.show[data-effect-in="slideUpIn"] .tiltview a {
	-webkit-animation: slideUpIn 1.5s 0.5s both;
	animation: slideUpIn 1.5s 0.5s both;
}

.show[data-effect-in="slideUpIn"] .tiltview a:nth-child(2) {
	-webkit-animation-delay: 0.75s;
	animation-delay: 0.75s;
}

@-webkit-keyframes slideUpIn {
	0% {
		-webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-webkit-transform: translateY(3000px);
	}
	75% {
		-webkit-transform: translateY(-30px);
	}
	100% {
		-webkit-transform: translateY(0);
	}
}

@keyframes slideUpIn {
	0% {
		-webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-webkit-transform: translateY(3000px);
		transform: translateY(3000px);
	}
	75% {
		-webkit-transform: translateY(-30px);
		transform: translateY(-30px);
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}
.hide[data-effect-out="slideDownOut"] .tiltview a {
	-webkit-animation: slideDownOut 1.5s both;
	animation: slideDownOut 1.5s both;
}

.hide[data-effect-out="slideDownOut"] .tiltview.row a:nth-child(2),
.hide[data-effect-out="slideDownOut"] .tiltview.col a:first-child {
	-webkit-animation-delay: 0.25s;
	animation-delay: 0.25s;
}

@-webkit-keyframes slideDownOut {
	25% {
		-webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-webkit-transform: translateY(-30px);
	}
	100% {
		-webkit-transform: translateY(3000px);
	}
}

@keyframes slideDownOut {
	25% {
		-webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-webkit-transform: translateY(-30px);
		transform: translateY(-30px);
	}
	100% {
		-webkit-transform: translateY(3000px);
		transform: translateY(3000px);
	}
}

.show[data-effect-in="slideDownIn"] .tiltview a {
	-webkit-animation: slideDownIn 1.5s 0.5s both;
	animation: slideDownIn 1.5s 0.5s both;
}

.show[data-effect-in="slideDownIn"] .tiltview.row a:nth-child(2),
.show[data-effect-in="slideDownIn"] .tiltview.col a:first-child {
	-webkit-animation-delay: 0.75s;
	animation-delay: 0.75s;
}

@-webkit-keyframes slideDownIn {
	0% {
		-webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-webkit-transform: translateY(-3000px);
	}
	75% {
		-webkit-transform: translateY(30px);
	}
	100% {
		-webkit-transform: translateY(0);
	}
}

@keyframes slideDownIn {
	0% {
		-webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-webkit-transform: translateY(-3000px);
		transform: translateY(-3000px);
	}
	75% {
		-webkit-transform: translateY(30px);
		transform: translateY(30px);
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

.hide[data-effect-out="slideLeftOut"] .tiltview a {
	-webkit-animation: slideLeftOut 1.5s both;
	animation: slideLeftOut 1.5s both;
}

.hide[data-effect-out="slideLeftOut"] .tiltview a:nth-child(2) {
	-webkit-animation-delay: 0.25s;
	animation-delay: 0.25s;
}

@-webkit-keyframes slideLeftOut {
	25% {
		-webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-webkit-transform: translateX(30px);
	}
	100% {
		-webkit-transform: translateX(-5000px);
	}
}

@keyframes slideLeftOut {
	25% {
		-webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-webkit-transform: translateX(30px);
		transform: translateX(30px);
	}
	100% {
		-webkit-transform: translateX(-5000px);
		transform: translateX(-5000px);
	}
}

.show[data-effect-in="slideLeftIn"] .tiltview a {
	-webkit-animation: slideLeftIn 1.5s 0.5s both;
	animation: slideLeftIn 1.5s 0.5s both;
}

.show[data-effect-in="slideLeftIn"] .tiltview a:nth-child(2) {
	-webkit-animation-delay: 0.75s;
	animation-delay: 0.75s;
}

@-webkit-keyframes slideLeftIn {
	0% {
		-webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-webkit-transform: translateX(3000px);
	}
	75% {
		-webkit-transform: translateX(-30px);
	}
	100% {
		-webkit-transform: translateX(0);
	}
}

@keyframes slideLeftIn {
	0% {
		-webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-webkit-transform: translateX(3000px);
		transform: translateX(3000px);
	}
	75% {
		-webkit-transform: translateX(-30px);
		transform: translateX(-30px);
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}

.hide[data-effect-out="slideRightOut"] .tiltview a {
	-webkit-animation: slideRightOut 1.5s both;
	animation: slideRightOut 1.5s both;
}

.hide[data-effect-out="slideRightOut"] .tiltview.col a:nth-child(2),
.hide[data-effect-out="slideRightOut"] .tiltview.row a:first-child {
	-webkit-animation-delay: 0.25s;
	animation-delay: 0.25s;
}

@-webkit-keyframes slideRightOut {
	25% {
		-webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-webkit-transform: translateX(-30px);
	}
	100% {
		-webkit-transform: translateX(3000px);
	}
}

@keyframes slideRightOut {
	25% {
		-webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-webkit-transform: translateX(-30px);
		transform: translateX(-30px);
	}
	100% {
		-webkit-transform: translateX(3000px);
		transform: translateX(3000px);
	}
}

.show[data-effect-in="slideRightIn"] .tiltview a {
	-webkit-animation: slideRightIn 1.5s 0.5s both;
	animation: slideRightIn 1.5s 0.5s both;
}

.show[data-effect-in="slideRightIn"] .tiltview.col a:nth-child(2),
.show[data-effect-in="slideRightIn"] .tiltview.row a:first-child {
	-webkit-animation-delay: 0.75s;
	animation-delay: 0.75s;
}

@-webkit-keyframes slideRightIn {
	0% {
		-webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-webkit-transform: translateX(-5000px);
	}
	75% {
		-webkit-transform: translateX(30px);
	}
	100% {
		-webkit-transform: translateX(0);
	}
}

@keyframes slideRightIn {
	0% {
		-webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		-webkit-transform: translateX(-5000px);
		transform: translateX(-5000px);
	}
	75% {
		-webkit-transform: translateX(30px);
		transform: translateX(30px);
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}

.no-csstransformspreserve3d .show .tiltview a,
.no-csstransformspreserve3d .hide .tiltview a,
.no-csstransforms3d .show .tiltview a,
.no-csstransforms3d .hide .tiltview a {
	-webkit-animation: none !important;
	animation: none !important;
}

.no-csstransforms3d .tiltview.col {
	top: -50%;
}

.no-csstransforms3d .tiltview.row {
	top: 20px;
}

@media screen and (max-width: 65.3125em) {
	.description,
	.tiltview {
		width: 100%;
	}

	.tiltview {
		left: 0;
		opacity: 0.3;
		pointer-events: none;
	}
}

@media screen and (max-width: 33.75em) {
	.description {
		font-size: 1.1em;
	}

	.slideshow > nav span {
		width: 20px;
		height: 40px;
		margin: 0 10px;
	}
}

@media screen and (max-width: 24em) {
	.slides {
		height: 320px;
	}

	.description {
		font-size: 1em;
		padding: 1.4em;
	}

	.no-csstransforms3d .tiltview.col,
	.no-csstransforms3d .tiltview.row {
		top: 0;
	}
}

;( function( window ) {
	'use strict';
	Modernizr.addTest('csstransformspreserve3d', function () {
		var prop = Modernizr.prefixed('transformStyle');
		var val = 'preserve-3d';
		var computedStyle;
		if(!prop) return false;

		prop = prop.replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-');

		Modernizr.testStyles('#modernizr{' + prop + ':' + val + ';}', function (el, rule) {
			computedStyle = window.getComputedStyle ? getComputedStyle(el, null).getPropertyValue(prop) : '';
		});

		return (computedStyle === val);
	});

	var support = { 
			animations : Modernizr.cssanimations,
			preserve3d : Modernizr.csstransformspreserve3d,
			transforms3d : Modernizr.csstransforms3d
		},
		isSupported = support.animations && support.preserve3d && support.transforms3d,
		animEndEventNames = {
			'WebkitAnimation' : 'webkitAnimationEnd',
			'OAnimation' : 'oAnimationEnd',
			'msAnimation' : 'MSAnimationEnd',
			'animation' : 'animationend'
		},
		// animation end event name
		animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ];

	function extend( a, b ) {
		for( var key in b ) { 
			if( b.hasOwnProperty( key ) ) {
				a[key] = b[key];
			}
		}
		return a;
	}

	function TiltSlider( el, options ) {
		this.el = el;
		// available effects for the animations (animation class names) - when a item comes in / out
		this.animEffectsOut = ['moveUpOut','moveDownOut','slideUpOut','slideDownOut','slideLeftOut','slideRightOut'];
		this.animEffectsIn = ['moveUpIn','moveDownIn','slideUpIn','slideDownIn','slideLeftIn','slideRightIn'];
		// the items
		this.items = this.el.querySelector( 'ol.slides' ).children;
		// total items
		this.itemsCount = this.items.length;
		if( !this.itemsCount ) return;
		// index of the current item
		this.current = 0;
		this.options = extend( {}, this.options );
		extend( this.options, options );
		this._init();
	}

	TiltSlider.prototype.options = {};

	TiltSlider.prototype._init = function() {
		this._addNavigation();
		this._initEvents();
	}

	// add the navigation to the DOM
	TiltSlider.prototype._addNavigation = function() {
		// add nav "dots"
		this.nav = document.createElement( 'nav' )
		var inner = '';
		for( var i = 0; i < this.itemsCount; ++i ) {
			inner += i === 0 ? '<span class="current"></span>' : '<span></span>';
		}
		this.nav.innerHTML = inner;
		this.el.appendChild( this.nav );
		this.navDots = [].slice.call( this.nav.children );
	}

	TiltSlider.prototype._initEvents = function() {
		var self = this;
		// show a new item when clicking the navigation "dots"
		this.navDots.forEach( function( dot, idx ) {
			dot.addEventListener( 'click', function() {
				if( idx !== self.current ) {
					self._showItem( idx );
				}
			} );
		} );
	}

	TiltSlider.prototype._showItem = function( pos ) {
		if( this.isAnimating ) {
			return false;
		}
		this.isAnimating = true;

		classie.removeClass( this.navDots[ this.current ], 'current' );

		var self = this,
			// the current item
			currentItem = this.items[ this.current ];

		this.current = pos;

		// next item to come in
		var nextItem = this.items[ this.current ],
			// set random effects for the items
			outEffect = this.animEffectsOut[ Math.floor( Math.random() * this.animEffectsOut.length ) ],
			inEffect = this.animEffectsIn[ Math.floor( Math.random() * this.animEffectsOut.length ) ];

		currentItem.setAttribute( 'data-effect-out', outEffect );
		nextItem.setAttribute( 'data-effect-in', inEffect );

		classie.addClass( this.navDots[ this.current ], 'current' );

		var cntAnims = 0,
			// the number of elements that actually animate inside the current item
			animElemsCurrentCount = currentItem.querySelector( '.tiltview' ).children.length, 
			// the number of elements that actually animate inside the next item
			animElemsNextCount = nextItem.querySelector( '.tiltview' ).children.length,
			// keep track of the number of animations that are terminated
			animEndCurrentCnt = 0, animEndNextCnt = 0,
			// check function for the end of each animation
			isFinished = function() {
				++cntAnims;
				if( cntAnims === 2 ) {
					self.isAnimating = false;
				}
			},
			// function for the end of the current item animation
			onEndAnimationCurrentItem = function() {
				++animEndCurrentCnt;
				var endFn = function() {
					classie.removeClass( currentItem, 'hide' );
					classie.removeClass( currentItem, 'current' );
					isFinished();
				};
					
				if( !isSupported ) {
					endFn();
				}
				else if( animEndCurrentCnt === animElemsCurrentCount ) {
					currentItem.removeEventListener( animEndEventName, onEndAnimationCurrentItem );
					endFn();
				}
			},
			// function for the end of the next item animation
			onEndAnimationNextItem = function() {
				++animEndNextCnt;
				var endFn = function() {
					classie.removeClass( nextItem, 'show' );
					classie.addClass( nextItem, 'current' );
					isFinished();
				};

				if( !isSupported ) {
					endFn();
				}
				else if( animEndNextCnt === animElemsNextCount ) {
					nextItem.removeEventListener( animEndEventName, onEndAnimationNextItem );
					endFn();
				}
			};

		classie.addClass( currentItem, 'hide' );
		classie.addClass( nextItem, 'show' );

		if( isSupported ) {
			currentItem.addEventListener( animEndEventName, onEndAnimationCurrentItem );
			nextItem.addEventListener( animEndEventName, onEndAnimationNextItem );
		}
		else {
			onEndAnimationCurrentItem();
			onEndAnimationNextItem();
		}
	}

	// add to global namespace
	window.TiltSlider = TiltSlider;

})( window );

new TiltSlider( document.getElementById( 'slideshow' ) );

Slider show hiệu ứng animation

Danh mục