HTML5實現的震撼3D焦點圖動畫

2016-02-28 分類：焦點圖動畫、素材庫、指令碼程式碼、首頁精華1人評論發表於2016-02-28

本文由碼農網 – 小峰原創，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

這是一款基於HTML5和jQuery的3D焦點圖動畫，焦點圖中的圖片利用了CSS3的相關特性實現圖片傾斜效果，從而讓圖片出現3D的視覺效果。這款HTML5焦點圖不僅可以手動點選按鈕切換圖片，而且還支援自動切換圖片，使用起來也相當方便。如果你需要在網站中展示產品圖片，那麼這款焦點圖外掛非常適合你。

線上演示原始碼下載

HTML程式碼

<section id="dg-container" class="dg-container">
	<div class="dg-wrapper">
		<a href="#"><img src="images/1.jpg" alt="image01"><div>http://www.colazionedamichy.it/</div></a>
		<a href="#"><img src="images/2.jpg" alt="image02"><div>http://www.percivalclo.com/</div></a>
		<a href="#"><img src="images/3.jpg" alt="image03"><div>http://www.wanda.net/fr</div></a>
		<a href="#"><img src="images/4.jpg" alt="image04"><div>http://lifeingreenville.com/</div></a>
		<a href="#"><img src="images/5.jpg" alt="image05"><div>http://circlemeetups.com/</div></a>
		<a href="#"><img src="images/6.jpg" alt="image06"><div>http://www.castirondesign.com/</div></a>
		<a href="#"><img src="images/7.jpg" alt="image07"><div>http://www.foundrycollective.com/</div></a>
		<a href="#"><img src="images/8.jpg" alt="image08"><div>http://www.mathiassterner.com/home</div></a>
		<a href="#"><img src="images/9.jpg" alt="image09"><div>http://learnlakenona.com/</div></a>
		<a href="#"><img src="images/10.jpg" alt="image10"><div>http://www.neighborhood-studio.com/</div></a>
		<a href="#"><img src="images/11.jpg" alt="image11"><div>http://www.beckindesign.com/</div></a>
		<a href="#"><img src="images/12.jpg" alt="image12"><div>http://kicksend.com/</div></a>
	</div>
	<nav>	
		<span class="dg-prev">&lt;</span>
		<span class="dg-next">&gt;</span>
	</nav>
</section>

CSS程式碼

.dg-container{
	width: 100%;
	height: 450px;
	position: relative;
}
.dg-wrapper{
	width: 481px;
	height: 316px;
	margin: 0 auto;
	position: relative;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	-o-perspective: 1000px;
	-ms-perspective: 1000px;
	perspective: 1000px;
}
.dg-wrapper a{
	width: 482px;
	height: 316px;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	background: transparent url(../images/browser.png) no-repeat top left;
	box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
}
.dg-wrapper a.dg-transition{
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.dg-wrapper a img{
	display: block;
	padding: 41px 0px 0px 1px;
}
.dg-wrapper a div{
	font-style: italic;
	text-align: center;
	line-height: 50px;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
	color: #333;
	font-size: 16px;
	width: 100%;
	bottom: -55px;
	display: none;
	position: absolute;
}
.dg-wrapper a.dg-center div{
	display: block;
}
.dg-container nav{
	width: 58px;
	position: absolute;
	z-index: 1000;
	bottom: 40px;
	left: 50%;
	margin-left: -29px;
}
.dg-container nav span{
	text-indent: -9000px;
	float: left;
	cursor:pointer;
	width: 24px;
	height: 25px;
	opacity: 0.8;
	background: transparent url(../images/arrows.png) no-repeat top left;
}
.dg-container nav span:hover{
	opacity: 1;
}
.dg-container nav span.dg-next{
	background-position: top right;
	margin-left: 10px;
}

JavaScript程式碼

/**
 * jquery.gallery.js
 * http://www.codrops.com
 *
 * Copyright 2011, Pedro Botelho / Codrops
 * Free to use under the MIT license.
 *
 * Date: Mon Jan 30 2012
 */

(function( $, undefined ) {

	/*
	 * Gallery object.
	 */
	$.Gallery 				= function( options, element ) {

		this.$el	= $( element );
		this._init( options );

	};

	$.Gallery.defaults 		= {
		current		: 0,	// index of current item
		autoplay	: false,// slideshow on / off
		interval	: 2000  // time between transitions
    };

	$.Gallery.prototype 	= {
		_init 				: function( options ) {

			this.options 		= $.extend( true, {}, $.Gallery.defaults, options );

			// support for 3d / 2d transforms and transitions
			this.support3d		= Modernizr.csstransforms3d;
			this.support2d		= Modernizr.csstransforms;
			this.supportTrans	= Modernizr.csstransitions;

			this.$wrapper		= this.$el.find('.dg-wrapper');

			this.$items			= this.$wrapper.children();
			this.itemsCount		= this.$items.length;

			this.$nav			= this.$el.find('nav');
			this.$navPrev		= this.$nav.find('.dg-prev');
			this.$navNext		= this.$nav.find('.dg-next');

			// minimum of 3 items
			if( this.itemsCount < 3 ) {

				this.$nav.remove();
				return false;

			}	

			this.current		= this.options.current;

			this.isAnim			= false;

			this.$items.css({
				'opacity'	: 0,
				'visibility': 'hidden'
			});

			this._validate();

			this._layout();

			// load the events
			this._loadEvents();

			// slideshow
			if( this.options.autoplay ) {

				this._startSlideshow();

			}

		},
		_validate			: function() {

			if( this.options.current < 0 || this.options.current > this.itemsCount - 1 ) {

				this.current = 0;

			}	

		},
		_layout				: function() {

			// current, left and right items
			this._setItems();

			// current item is not changed
			// left and right one are rotated and translated
			var leftCSS, rightCSS, currentCSS;

			if( this.support3d && this.supportTrans ) {

				leftCSS 	= {
					'-webkit-transform'	: 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
					'-moz-transform'	: 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
					'-o-transform'		: 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
					'-ms-transform'		: 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
					'transform'			: 'translateX(-350px) translateZ(-200px) rotateY(45deg)'
				};

				rightCSS	= {
					'-webkit-transform'	: 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
					'-moz-transform'	: 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
					'-o-transform'		: 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
					'-ms-transform'		: 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
					'transform'			: 'translateX(350px) translateZ(-200px) rotateY(-45deg)'
				};

				leftCSS.opacity		= 1;
				leftCSS.visibility	= 'visible';
				rightCSS.opacity	= 1;
				rightCSS.visibility	= 'visible';

			}
			else if( this.support2d && this.supportTrans ) {

				leftCSS 	= {
					'-webkit-transform'	: 'translate(-350px) scale(0.8)',
					'-moz-transform'	: 'translate(-350px) scale(0.8)',
					'-o-transform'		: 'translate(-350px) scale(0.8)',
					'-ms-transform'		: 'translate(-350px) scale(0.8)',
					'transform'			: 'translate(-350px) scale(0.8)'
				};

				rightCSS	= {
					'-webkit-transform'	: 'translate(350px) scale(0.8)',
					'-moz-transform'	: 'translate(350px) scale(0.8)',
					'-o-transform'		: 'translate(350px) scale(0.8)',
					'-ms-transform'		: 'translate(350px) scale(0.8)',
					'transform'			: 'translate(350px) scale(0.8)'
				};

				currentCSS	= {
					'z-index'			: 999
				};

				leftCSS.opacity		= 1;
				leftCSS.visibility	= 'visible';
				rightCSS.opacity	= 1;
				rightCSS.visibility	= 'visible';

			}

			this.$leftItm.css( leftCSS || {} );
			this.$rightItm.css( rightCSS || {} );

			this.$currentItm.css( currentCSS || {} ).css({
				'opacity'	: 1,
				'visibility': 'visible'
			}).addClass('dg-center');

		},
		_setItems			: function() {

			this.$items.removeClass('dg-center');

			this.$currentItm	= this.$items.eq( this.current );
			this.$leftItm		= ( this.current === 0 ) ? this.$items.eq( this.itemsCount - 1 ) : this.$items.eq( this.current - 1 );
			this.$rightItm		= ( this.current === this.itemsCount - 1 ) ? this.$items.eq( 0 ) : this.$items.eq( this.current + 1 );

			if( !this.support3d && this.support2d && this.supportTrans ) {

				this.$items.css( 'z-index', 1 );
				this.$currentItm.css( 'z-index', 999 );

			}

			// next & previous items
			if( this.itemsCount > 3 ) {

				// next item
				this.$nextItm		= ( this.$rightItm.index() === this.itemsCount - 1 ) ? this.$items.eq( 0 ) : this.$rightItm.next();
				this.$nextItm.css( this._getCoordinates('outright') );

				// previous item
				this.$prevItm		= ( this.$leftItm.index() === 0 ) ? this.$items.eq( this.itemsCount - 1 ) : this.$leftItm.prev();
				this.$prevItm.css( this._getCoordinates('outleft') );

			}

		},
		_loadEvents			: function() {

			var _self	= this;

			this.$navPrev.on( 'click.gallery', function( event ) {

				if( _self.options.autoplay ) {

					clearTimeout( _self.slideshow );
					_self.options.autoplay	= false;

				}

				_self._navigate('prev');
				return false;

			});

			this.$navNext.on( 'click.gallery', function( event ) {

				if( _self.options.autoplay ) {

					clearTimeout( _self.slideshow );
					_self.options.autoplay	= false;

				}

				_self._navigate('next');
				return false;

			});

			this.$wrapper.on( 'webkitTransitionEnd.gallery transitionend.gallery OTransitionEnd.gallery', function( event ) {

				_self.$currentItm.addClass('dg-center');
				_self.$items.removeClass('dg-transition');
				_self.isAnim	= false;

			});

		},
		_getCoordinates		: function( position ) {

			if( this.support3d && this.supportTrans ) {

				switch( position ) {
					case 'outleft':
						return {
							'-webkit-transform'	: 'translateX(-450px) translateZ(-300px) rotateY(45deg)',
							'-moz-transform'	: 'translateX(-450px) translateZ(-300px) rotateY(45deg)',
							'-o-transform'		: 'translateX(-450px) translateZ(-300px) rotateY(45deg)',
							'-ms-transform'		: 'translateX(-450px) translateZ(-300px) rotateY(45deg)',
							'transform'			: 'translateX(-450px) translateZ(-300px) rotateY(45deg)',
							'opacity'			: 0,
							'visibility'		: 'hidden'
						};
						break;
					case 'outright':
						return {
							'-webkit-transform'	: 'translateX(450px) translateZ(-300px) rotateY(-45deg)',
							'-moz-transform'	: 'translateX(450px) translateZ(-300px) rotateY(-45deg)',
							'-o-transform'		: 'translateX(450px) translateZ(-300px) rotateY(-45deg)',
							'-ms-transform'		: 'translateX(450px) translateZ(-300px) rotateY(-45deg)',
							'transform'			: 'translateX(450px) translateZ(-300px) rotateY(-45deg)',
							'opacity'			: 0,
							'visibility'		: 'hidden'
						};
						break;
					case 'left':
						return {
							'-webkit-transform'	: 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
							'-moz-transform'	: 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
							'-o-transform'		: 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
							'-ms-transform'		: 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
							'transform'			: 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
							'opacity'			: 1,
							'visibility'		: 'visible'
						};
						break;
					case 'right':
						return {
							'-webkit-transform'	: 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
							'-moz-transform'	: 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
							'-o-transform'		: 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
							'-ms-transform'		: 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
							'transform'			: 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
							'opacity'			: 1,
							'visibility'		: 'visible'
						};
						break;
					case 'center':
						return {
							'-webkit-transform'	: 'translateX(0px) translateZ(0px) rotateY(0deg)',
							'-moz-transform'	: 'translateX(0px) translateZ(0px) rotateY(0deg)',
							'-o-transform'		: 'translateX(0px) translateZ(0px) rotateY(0deg)',
							'-ms-transform'		: 'translateX(0px) translateZ(0px) rotateY(0deg)',
							'transform'			: 'translateX(0px) translateZ(0px) rotateY(0deg)',
							'opacity'			: 1,
							'visibility'		: 'visible'
						};
						break;
				};

			}
			else if( this.support2d && this.supportTrans ) {

				switch( position ) {
					case 'outleft':
						return {
							'-webkit-transform'	: 'translate(-450px) scale(0.7)',
							'-moz-transform'	: 'translate(-450px) scale(0.7)',
							'-o-transform'		: 'translate(-450px) scale(0.7)',
							'-ms-transform'		: 'translate(-450px) scale(0.7)',
							'transform'			: 'translate(-450px) scale(0.7)',
							'opacity'			: 0,
							'visibility'		: 'hidden'
						};
						break;
					case 'outright':
						return {
							'-webkit-transform'	: 'translate(450px) scale(0.7)',
							'-moz-transform'	: 'translate(450px) scale(0.7)',
							'-o-transform'		: 'translate(450px) scale(0.7)',
							'-ms-transform'		: 'translate(450px) scale(0.7)',
							'transform'			: 'translate(450px) scale(0.7)',
							'opacity'			: 0,
							'visibility'		: 'hidden'
						};
						break;
					case 'left':
						return {
							'-webkit-transform'	: 'translate(-350px) scale(0.8)',
							'-moz-transform'	: 'translate(-350px) scale(0.8)',
							'-o-transform'		: 'translate(-350px) scale(0.8)',
							'-ms-transform'		: 'translate(-350px) scale(0.8)',
							'transform'			: 'translate(-350px) scale(0.8)',
							'opacity'			: 1,
							'visibility'		: 'visible'
						};
						break;
					case 'right':
						return {
							'-webkit-transform'	: 'translate(350px) scale(0.8)',
							'-moz-transform'	: 'translate(350px) scale(0.8)',
							'-o-transform'		: 'translate(350px) scale(0.8)',
							'-ms-transform'		: 'translate(350px) scale(0.8)',
							'transform'			: 'translate(350px) scale(0.8)',
							'opacity'			: 1,
							'visibility'		: 'visible'
						};
						break;
					case 'center':
						return {
							'-webkit-transform'	: 'translate(0px) scale(1)',
							'-moz-transform'	: 'translate(0px) scale(1)',
							'-o-transform'		: 'translate(0px) scale(1)',
							'-ms-transform'		: 'translate(0px) scale(1)',
							'transform'			: 'translate(0px) scale(1)',
							'opacity'			: 1,
							'visibility'		: 'visible'
						};
						break;
				};

			}
			else {

				switch( position ) {
					case 'outleft'	: 
					case 'outright'	: 
					case 'left'		: 
					case 'right'	:
						return {
							'opacity'			: 0,
							'visibility'		: 'hidden'
						};
						break;
					case 'center'	:
						return {
							'opacity'			: 1,
							'visibility'		: 'visible'
						};
						break;
				};

			}

		},
		_navigate			: function( dir ) {

			if( this.supportTrans && this.isAnim )
				return false;

			this.isAnim	= true;

			switch( dir ) {

				case 'next' :

					this.current	= this.$rightItm.index();

					// current item moves left
					this.$currentItm.addClass('dg-transition').css( this._getCoordinates('left') );

					// right item moves to the center
					this.$rightItm.addClass('dg-transition').css( this._getCoordinates('center') );	

					// next item moves to the right
					if( this.$nextItm ) {

						// left item moves out
						this.$leftItm.addClass('dg-transition').css( this._getCoordinates('outleft') );

						this.$nextItm.addClass('dg-transition').css( this._getCoordinates('right') );

					}
					else {

						// left item moves right
						this.$leftItm.addClass('dg-transition').css( this._getCoordinates('right') );

					}
					break;

				case 'prev' :

					this.current	= this.$leftItm.index();

					// current item moves right
					this.$currentItm.addClass('dg-transition').css( this._getCoordinates('right') );

					// left item moves to the center
					this.$leftItm.addClass('dg-transition').css( this._getCoordinates('center') );

					// prev item moves to the left
					if( this.$prevItm ) {

						// right item moves out
						this.$rightItm.addClass('dg-transition').css( this._getCoordinates('outright') );

						this.$prevItm.addClass('dg-transition').css( this._getCoordinates('left') );

					}
					else {

						// right item moves left
						this.$rightItm.addClass('dg-transition').css( this._getCoordinates('left') );

					}
					break;	

			};

			this._setItems();

			if( !this.supportTrans )
				this.$currentItm.addClass('dg-center');

		},
		_startSlideshow		: function() {

			var _self	= this;

			this.slideshow	= setTimeout( function() {

				_self._navigate( 'next' );

				if( _self.options.autoplay ) {

					_self._startSlideshow();

				}

			}, this.options.interval );

		},
		destroy				: function() {

			this.$navPrev.off('.gallery');
			this.$navNext.off('.gallery');
			this.$wrapper.off('.gallery');

		}
	};

	var logError 			= function( message ) {
		if ( this.console ) {
			console.error( message );
		}
	};

	$.fn.gallery			= function( options ) {

		if ( typeof options === 'string' ) {

			var args = Array.prototype.slice.call( arguments, 1 );

			this.each(function() {

				var instance = $.data( this, 'gallery' );

				if ( !instance ) {
					logError( "cannot call methods on gallery prior to initialization; " +
					"attempted to call method '" + options + "'" );
					return;
				}

				if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
					logError( "no such method '" + options + "' for gallery instance" );
					return;
				}

				instance[ options ].apply( instance, args );

			});

		} 
		else {

			this.each(function() {

				var instance = $.data( this, 'gallery' );
				if ( !instance ) {
					$.data( this, 'gallery', new $.Gallery( options, this ) );
				}
			});

		}

		return this;

	};

})( jQuery );

線上演示原始碼下載

本文連結：http://www.codeceo.com/article/html5-3d-image-slider.html
本文作者：碼農網 – 小峰
[ 原創作品，轉載必須在正文中標註並保留原文連結和作者等資訊。]

jQuery炫酷全屏3D焦點圖動畫
2016-03-19
jQuery3D動畫
HTML5自定義元素播放焦點圖動畫
2016-02-21
HTML動畫
超實用的jQuery百葉窗焦點圖動畫
2016-03-12
jQuery動畫
8 款超絢麗的 jQuery 焦點圖動畫
2015-12-03
jQuery動畫
14款華麗的最新jQuery焦點圖動畫外掛
2014-11-19
jQuery動畫
帶水平滑桿的jQuery焦點圖動畫外掛
2016-03-05
jQuery動畫
javascript實現的焦點圖輪播效果詳解
2017-04-07
JavaScript
jQuery實現的簡單焦點圖特效實現過程詳解
2017-04-18
jQuery特效
非常漂亮的CSS3百葉窗焦點圖動畫
2016-02-22
CSSS3動畫
JS實現八種焦點輪播圖（下）
2016-01-03
JS
《前端實戰總結》之使用純css實現網站換膚和焦點圖切換動畫
2019-12-20
前端CSS網站動畫
DIV的失去焦點(blur)實現
2019-02-16
CSS3 動畫實現的 3D 圖片過渡特效
2015-01-24
CSSS3動畫3D特效
9 個超絢麗的 HTML5 3D 圖片動畫特效
2015-12-14
HTML3D動畫特效
遮罩效果的焦點圖
2012-07-08
遮罩
html5 學習-3d動畫
2016-10-08
HTML3D動畫
基於HTML5實現的Heatmap熱圖3D應用
2014-09-12
HTML3D
絕對震撼 7款HTML5動畫應用及原始碼
2014-07-03
HTML動畫原始碼
超酷HTML5 3D動畫精選
2014-07-27
HTML3D動畫
基於HTML5實現3D熱圖Heatmap應用
2015-10-13
HTML3D
jQuery實現文字框獲取焦點
2017-03-09
jQuery
點點動畫～畫出懂你的3D魔方
2019-03-01
動畫3D
基於 HTML5 Canvas 實現的文字動畫特效
2018-04-02
HTMLCanvas動畫特效
8款效果驚豔的HTML5 3D動畫
2014-06-24
HTML3D動畫
HTML5 3D書本翻頁動畫
2016-03-13
HTML3D動畫
HTML5 3D衣服搖擺動畫特效
2016-03-16
HTML3D動畫特效
超酷實用的jQuery焦點圖賞析及原始碼
2014-10-22
jQuery原始碼
基於 HTML5 Canvas 實現文字動畫特效
2020-04-06
HTMLCanvas動畫特效
WebGL實現HTML5的3D貪吃蛇遊戲
2015-11-24
WebHTML3D遊戲
jquery焦點圖效果視訊
2020-04-04
jQuery
javascript實現的文字框焦點位置放置於尾部
2017-03-21
JavaScript
8款帥酷的HTML5/CSS3 3D動畫、圖片、選單應用
2014-06-11
HTMLCSSS33D動畫
10個經典實用的HTML5圖表動畫應用
2015-03-30
HTML動畫
10款絢麗實用的HTML5圖表動畫應用
2014-11-18
HTML動畫
9款令人驚歎的HTML5 3D動畫應用
2014-11-12
HTML3D動畫
8 個 3D 視覺效果的 HTML5 動畫欣賞
2015-12-06
3D視覺HTML動畫
分享7款超炫的HTML5 Canvas 3D動畫效果
2012-11-19
HTMLCanvas3D動畫
8個經典HTML5 3D動畫賞析
2015-03-16
HTML3D動畫

HTML5實現的震撼3D焦點圖動畫

HTML程式碼

CSS程式碼

JavaScript程式碼

相關文章