HTML5蹦床式弹动页面图片切换效果

查看演示立即下载

插件描述：这是一款效果非常好的蹦床式弹动页面图片切换插件，由SVG+CSS3打造，当点击按钮切换时，整个页面就像蹦床一样，将图片弹出去，以此来切换到另一张图片，而且支持通过拖动图片堆栈来切换图片。

这是一款效果非常好的蹦床式弹动页面图片切换插件，由SVG+CSS3打造，当点击按钮切换时，整个页面就像蹦床一样，将图片弹出去，以此来切换到另一张图片，而且支持通过拖动图片堆栈来切换图片，背景蹦床效果使用SVG来制作，通过Snap.svg来制作动画效果。整个动画动使用 CSS Transitions 来制作平滑的过渡效果。

用法参考：

HTML

页面的第一个元素是SVG图形，当切换图片时这个图形会发生变化。

<div id="morph-shape" class="morph-shape" data-morph-next="M301,301c0,0-83.8-21-151-21C71.8,280-1,301-1,301s21-65.7,21-151C20,79.936-1-1-1-1s73,11,151,11c85 0,151-11,151-11s-21,66.43-21,151C280,229.646,301,301,301,301z">
                	<svg width="100%" height="100%" viewBox="0 0 300 300" preserveAspectRatio="none">
                		<path d="M301,301c0,0-83.8,0-151,0c-78.2,0-151,0-151,0s0-65.7,0-151C-1,79.936-1-1-1-1s73,0,151,0c85,0,151,0,151,0s0,66.43,0,151
                C301,229.646,301,301,301,301z" />
                	</svg>
                </div>

矩形的初始形状是由SVG中的path定义的，被挤压的图形则储存在data-morph-next中。

图片堆栈的HTML结构如下：

<div class="stack">
                	<ul id="elasticstack" class="stack__images">
                		<li><img src="img/1.jpg" alt="01"/></li>
                		<li><img src="img/2.png" alt="02"/></li>
                		<li><img src="img/3.jpg" alt="03"/></li>
                		<li><img src="img/4.jpg" alt="04"/></li>
                		<li><img src="img/5.png" alt="05"/></li>
                		<li><img src="img/6.png" alt="06"/></li>
                	</ul><!--图片-->
                	<button id="stack-next" class="stack__next"><i class="icon icon-down"></i><span>Next</span></button><!--导航按钮-->
                	<ul id="stack-titles" class="stack__titles">
                		<li class="current">
                			<blockquote>
                			  <p>"Once you have eliminated the impossible, whatever remains, however improbable, must be the truth."</p>
                			  <footer><a href="/">#RIPLeonardNimoy</a> by James Olstein</footer>
                			</blockquote>
                		</li>
                		<li>
                			<blockquote>
                			  <p>"The needs of the many outweigh the needs of the few, or the one."</p>
                			  <footer><a href="/">Mr. Spock</a> by Mustafa Kural</footer>
                			</blockquote>
                		</li>
                		<li>
                			<blockquote>
                			  <p>"Insufficient facts always invite danger."</p>
                			  <footer><a href="/">LLAP</a> by Sarah McKay</footer>
                			</blockquote>
                		</li>
                		<li>
                			<blockquote>
                			  <p>"Without followers, evil cannot spread."</p>
                			  <footer><a href="/">RIP Leonard Nimoy</a> by derric</footer>
                			</blockquote>
                		</li>
                		<li>
                			<blockquote>
                			  <p>"Logic is the beginning of wisdom, not the end."</p>
                			  <footer><a href="/">#Goodnight, Spock</a> by Helen Tseng</footer>
                			</blockquote>
                		</li>
                		<li>
                			<blockquote>
                			  <p>"Change is the essential process of all existence."</p>
                			  <footer><a href="/">RIP Spock</a> by Sahirul Iman</footer>
                			</blockquote>
                		</li>
                	</ul><!--图像的标题和描述-->
                </div><!-- /stack -->

我们有了一个图像堆栈，一个导航按钮用于切换到下一个图像，以及每一个图像的标题，我们已经把标题从图像中分离出来，这样我们就可以应用不同的效果来调整它们的弹性堆栈（而不是我们在图像上看到的效果）。

CSS

SVG“蹦床”矩形需要自动拉伸到和屏幕一样大小：

.morph-shape {
                	position: absolute;
                	width: 100%;
                	height: 100%;
                	top: 0;
                	left: 0;
                }
                
                .morph-shape svg {
                	position: absolute;
                	margin: 0;
                	pointer-events: none;
                }

为了制作一些3D堆叠效果，插件在图片栈的图片列表ul元素上使用了perspective。在下面的这段CSS代码中，最后两个class是在拖动或动画图片栈是通过js动态添加的。

.stack ul {
                	position: relative;
                	margin: 0 auto;
                	padding: 0;
                	list-style: none;
                }
                
                .stack ul li {
                	position: absolute;
                	width: 100%;
                	opacity: 0;
                }
                
                ul.stack__images {
                	width: 400px;
                	height: 300px;
                	z-index: 10;
                	perspective: 1000px;
                	perspective-origin: 50% -50%;
                }
                
                @media screen and (max-height: 530px), screen and (max-width: 400px) {
                	ul.stack__images {
                		width: 260px;
                		height: 195px;
                	}
                }
                
                .stack__images li {
                	top: 0;
                	z-index: 1;
                	transform: translate3d(0, 0, -180px);
                	transform-style: preserve-3d;
                }
                
                .stack__images li img {
                	display: block;
                	max-width: 100%;
                	pointer-events: none;
                }
                
                .stack__images li:hover {
                	cursor: url(../img/cursor_vulcan.png), auto;
                }
                
                .stack__images li:active {
                	cursor: -webkit-grabbing;
                	cursor: grabbing;
                }
                
                .stack__images li.animate {
                	transition: all 0.3s ease-out;
                }
                
                .stack__images li.move-back {
                	transition-timing-function: cubic-bezier(0.175, 0.885, 0.470, 1.515);
                }

其它元素，如导航按钮和图片的标题、描述。

.stack__next {
                	border: none;
                	background: none;
                	display: block;
                	padding: 0;
                	overflow: hidden;
                	width: 36px;
                	height: 36px;
                	margin: 10px auto 0;
                	font-size: 30px;
                	position: relative;
                	cursor: pointer;
                	color: #067ba7;
                }
                
                .stack__next:hover {
                	color: #fff;
                }
                
                .stack__next:focus {
                	outline: none;
                }
                
                .stack__next span {
                	position: absolute;
                	top: 200%;
                }
                
                ul.stack__titles {
                	height: 18vh;
                	max-width: 560px;
                	width: 95%;
                }
                
                .stack__titles blockquote {
                	margin: 0;
                	text-align: center;
                	font-size: 1.4em;
                }
                
                .stack__titles blockquote footer {
                	font-size: 50%;
                	padding-bottom: 1em;
                	font-family: 'Montserrat', Arial, sans-serif;
                }
                
                .stack__titles li {
                	pointer-events: none;
                	transition: opacity 0.45s ease;
                }
                
                .stack__titles li.current {
                	opacity: 1;
                	pointer-events: auto;
                }

在切换图片时，图片的标题会有淡入淡出的效果。

我们在做CSS的最后一件事是过渡效果。当我们做了“蹦床效果”，SVG图形在执行“蹦床”动画的时候将会被填充，SVG图形的父容器会使用3D transform沿Z轴推拉页面，使其变小。主效果写在base.css中。

当切换图片的时候，navigate-next class会被添加到body标签上。在demo2中，添加了一些旋转效果，在Z轴上旋转10deg和在X轴上旋转-5deg。

.morph-shape svg {
                	fill: #01AEF0;
                	transition: fill 0.1s ease-out;
                }
                
                .navigate-next .morph-shape svg {
                	fill: #01a0dc;
                	transition-duration: 0.45s;
                }
                
                .container {
                	transition: transform 0.1s cubic-bezier(0.6, 0, 0.5, 1);
                }
                
                .demo-1.navigate-next .container {
                	transition-duration: 0.45s;
                	transform: translate3d(0, 0, -600px);
                }
                
                .demo-2.navigate-next .container {
                	transition-duration: 0.45s;
                	transform: rotate3d(-0.5, 0, 1, -6deg) translate3d(0, 0, -600px);
                }
                
                .demo-2 .morph-shape svg {
                	fill: #A2CD72;
                }
                
                .demo-2.navigate-next .morph-shape svg {
                	fill: #95C264;
                }

Javascript

js代码部分，需要引入snap.svg-min.js文件和Modernizr文件。还需要Draggabilly和elastiStack.js文件来制作图片堆栈和拖拽效果。插件中的js代码针对于SVG图形的变形，以及导航按钮和图片标题的效果。

(function() {
                	var body = document.body,
                		titles = [].slice.call( document.querySelectorAll( '#stack-titles > li' ) ),
                		totalTitles = titles.length,
                		stack = new ElastiStack( document.getElementById( 'elasticstack' ), {
                			onUpdateStack : function( idx ) {
                				classie.remove( titles[idx === 0 ? totalTitles - 1 : idx - 1], 'current' );
                				classie.add( titles[idx], 'current' );
                			}
                		} ),
                		shapeEl = document.getElementById( 'morph-shape' ),
                		s = Snap( shapeEl.querySelector( 'svg' ) ),
                		pathEl = s.select( 'path' ),
                		paths = { 
                			reset : pathEl.attr( 'd' ),
                			next  : shapeEl.getAttribute( 'data-morph-next' )
                		};
                
                	document.getElementById( 'stack-next' ).addEventListener( 'mousedown', nextItem );
                	
                	function nextItem() {
                		classie.add( body, 'animating' );
                		classie.add( body, 'navigate-next' );
                		pathEl.stop().animate( { 'path' : paths.next }, 450, mina.easeinout, function() {
                			classie.remove( body, 'navigate-next' );
                			stack.nextItem( { transform : 'translate3d(0,-60px,400px)' } );
                			pathEl.stop().animate( { 'path' : paths.reset }, 100, mina.easeout, function() {
                				classie.remove( body, 'animating' );
                			} );
                		} );
                	}
                })();

更多信息请下载源码进行参考。

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效：视差滚动效果
下一个特效： css3hoover