modernizr html5 jquery.windy圖片類似紙被風吹走3D動畫特效



98 388 130



特效描述:被風吹走動畫 3D動畫特效,

代碼結構

1. 引入CSS

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/windy.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<link rel="stylesheet" type="text/css" href="css/noJS.css" />

2. 引入JS

<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.windy.js"></script>

3. HTML代碼

<div class="container">
	<nav class="codrops-demos">
		<a class="current-demo" href="index.html">Demo 1</a>
		<a href="index2.html">Demo 2</a>
		<a href="index3.html">Demo 3</a>
	</nav>
	<section class="main">
		<div class="windy-demo">
			<ul id="wi-el" class="wi-container">
				<li><img src="images/demo1/1.jpg" alt="image1"/><h4>Coco Loko</h4><p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p></li>
				<li><img src="images/demo1/2.jpg" alt="image2"/><h4>Vermouth Land</h4><p>Velit chambray fugiat, enim aesthetic esse ullamco typewriter.</p></li>
				<li><img src="images/demo1/3.jpg" alt="image3"/><h4>Electrodynamics</h4><p>Before they sold out PBR magna jean shorts non seitan ea. Dolor wolf pop-up.</p></li>
				<li><img src="images/demo1/4.jpg" alt="image4"/><h4>Retinal Bliss</h4><p>Locavore vero ad, before they sold out food truck bushwick helvetica.</p></li>
				<li><img src="images/demo1/5.jpg" alt="image5"/><h4>Disco Fever</h4><p>Cillum laboris consequat, qui elit retro next level skateboard freegan hella.</p></li>
				<li><img src="images/demo1/6.jpg" alt="image6"/><h4>Serenity</h4><p>Truffaut wes anderson hoodie 3 wolf moon labore, fugiat lomo iphone eiusmod vegan.</p></li>
				<li><img src="images/demo1/7.jpg" alt="image7"/><h4>Dark Honor</h4><p>Chillwave mustache pinterest, marfa seitan umami id farm-to-table iphone.</p></li>
				<li><img src="images/demo1/8.jpg" alt="image8"/><h4>Nested Happiness</h4><p>Minim post-ironic banksy american apparel iphone wayfarers.</p></li>
				<li><img src="images/demo1/9.jpg" alt="image9"/><h4>Cherry Country</h4><p>Sint vinyl Austin street art odd future id trust fund, terry richardson cray.</p></li>
				<li><img src="images/demo1/10.jpg" alt="image10"/><h4>Blossom Delight</h4><p>Craft beer gentrify nihil pariatur aliqua high life, irony cosby sweater.</p></li>
				<li><img src="images/demo1/11.jpg" alt="image11"/><h4>Heartbeat</h4><p>Cliche vinyl consequat, carles wolf Austin williamsburg post-ironic mcsweeney's.</p></li>
				<li><img src="images/demo1/12.jpg" alt="image12"/><h4>Inner Organs</h4><p>Deserunt reprehenderit pour-over marfa VHS occaecat, aesthetic belly DIY.</p></li>
				<li><img src="images/demo1/13.jpg" alt="image13"/><h4>Wanted Darkness</h4><p>Organic irony incididunt blog retro, fanny pack nisi salvia.</p></li>
				<li><img src="images/demo1/14.jpg" alt="image14"/><h4>Blessed Fever</h4><p>Twee biodiesel fugiat ut. Thundercats mcsweeney's occaecat brooklyn mollit.</p></li>
				<li><img src="images/demo1/15.jpg" alt="image15"/><h4>Origins</h4><p>Quinoa marfa banksy nostrud brunch bushwick PBR. Mcsweeney's bushwick banksy.</p></li>
				<li><img src="images/demo1/16.jpg" alt="image16"/><h4>Fire Lime</h4><p>Brunch fugiat locavore, swag photo booth keffiyeh labore small batch.</p></li>
				<li><img src="images/demo1/17.jpg" alt="image17"/><h4>Host Rumor</h4><p>Helvetica wayfarers ea enim, street art you probably haven't heard of.</p></li>
				<li><img src="images/demo1/18.jpg" alt="image18"/><h4>Lovely Feast</h4><p>Semiotics ennui VHS high life you probably haven't heard of them sed craft beer.</p></li>
				<li><img src="images/demo1/19.jpg" alt="image19"/><h4>Red Greatness</h4><p>Cray 8-bit cliche, consequat VHS mumblecore salvia tattooed typewriter.</p></li>
				<li><img src="images/demo1/20.jpg" alt="image20"/><h4>Hollow Soul</h4><p>Kale chips enim eiusmod narwhal, magna before they sold out locavore.</p></li>
				<li><img src="images/demo1/1.jpg" alt="image1"/><h4>Coco Loko</h4><p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p></li>
				<li><img src="images/demo1/2.jpg" alt="image2"/><h4>Vermouth Land</h4><p>Velit chambray fugiat, enim aesthetic esse ullamco typewriter.</p></li>
				<li><img src="images/demo1/3.jpg" alt="image3"/><h4>Electrodynamics</h4><p>Before they sold out PBR magna jean shorts non seitan ea. Dolor wolf pop-up.</p></li>
				<li><img src="images/demo1/4.jpg" alt="image4"/><h4>Retinal Bliss</h4><p>Locavore vero ad, before they sold out food truck bushwick helvetica.</p></li>
				<li><img src="images/demo1/5.jpg" alt="image5"/><h4>Disco Fever</h4><p>Cillum laboris consequat, qui elit retro next level skateboard freegan hella.</p></li>
				<li><img src="images/demo1/6.jpg" alt="image6"/><h4>Serenity</h4><p>Truffaut wes anderson hoodie 3 wolf moon labore, fugiat lomo iphone eiusmod vegan.</p></li>
				<li><img src="images/demo1/7.jpg" alt="image7"/><h4>Dark Honor</h4><p>Chillwave mustache pinterest, marfa seitan umami id farm-to-table iphone.</p></li>
				<li><img src="images/demo1/8.jpg" alt="image8"/><h4>Nested Happiness</h4><p>Minim post-ironic banksy american apparel iphone wayfarers.</p></li>
				<li><img src="images/demo1/9.jpg" alt="image9"/><h4>Cherry Country</h4><p>Sint vinyl Austin street art odd future id trust fund, terry richardson cray.</p></li>
				<li><img src="images/demo1/10.jpg" alt="image10"/><h4>Blossom Delight</h4><p>Craft beer gentrify nihil pariatur aliqua high life, irony cosby sweater.</p></li>
				<li><img src="images/demo1/11.jpg" alt="image11"/><h4>Heartbeat</h4><p>Cliche vinyl consequat, carles wolf Austin williamsburg post-ironic mcsweeney's.</p></li>
				<li><img src="images/demo1/12.jpg" alt="image12"/><h4>Inner Organs</h4><p>Deserunt reprehenderit pour-over marfa VHS occaecat, aesthetic belly DIY.</p></li>
				<li><img src="images/demo1/13.jpg" alt="image13"/><h4>Wanted Darkness</h4><p>Organic irony incididunt blog retro, fanny pack nisi salvia.</p></li>
				<li><img src="images/demo1/14.jpg" alt="image14"/><h4>Blessed Fever</h4><p>Twee biodiesel fugiat ut. Thundercats mcsweeney's occaecat brooklyn mollit.</p></li>
				<li><img src="images/demo1/15.jpg" alt="image15"/><h4>Origins</h4><p>Quinoa marfa banksy nostrud brunch bushwick PBR. Mcsweeney's bushwick banksy.</p></li>
				<li><img src="images/demo1/16.jpg" alt="image16"/><h4>Fire Lime</h4><p>Brunch fugiat locavore, swag photo booth keffiyeh labore small batch.</p></li>
				<li><img src="images/demo1/17.jpg" alt="image17"/><h4>Host Rumor</h4><p>Helvetica wayfarers ea enim, street art you probably haven't heard of.</p></li>
				<li><img src="images/demo1/18.jpg" alt="image18"/><h4>Lovely Feast</h4><p>Semiotics ennui VHS high life you probably haven't heard of them sed craft beer.</p></li>
				<li><img src="images/demo1/19.jpg" alt="image19"/><h4>Red Greatness</h4><p>Cray 8-bit cliche, consequat VHS mumblecore salvia tattooed typewriter.</p></li>
				<li><img src="images/demo1/20.jpg" alt="image20"/><h4>Hollow Soul</h4><p>Kale chips enim eiusmod narwhal, magna before they sold out locavore.</p></li>
				<li><img src="images/demo1/1.jpg" alt="image1"/><h4>Coco Loko</h4><p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p></li>
				<li><img src="images/demo1/2.jpg" alt="image2"/><h4>Vermouth Land</h4><p>Velit chambray fugiat, enim aesthetic esse ullamco typewriter.</p></li>
				<li><img src="images/demo1/3.jpg" alt="image3"/><h4>Electrodynamics</h4><p>Before they sold out PBR magna jean shorts non seitan ea. Dolor wolf pop-up.</p></li>
				<li><img src="images/demo1/4.jpg" alt="image4"/><h4>Retinal Bliss</h4><p>Locavore vero ad, before they sold out food truck bushwick helvetica.</p></li>
				<li><img src="images/demo1/5.jpg" alt="image5"/><h4>Disco Fever</h4><p>Cillum laboris consequat, qui elit retro next level skateboard freegan hella.</p></li>
				<li><img src="images/demo1/6.jpg" alt="image6"/><h4>Serenity</h4><p>Truffaut wes anderson hoodie 3 wolf moon labore, fugiat lomo iphone eiusmod vegan.</p></li>
				<li><img src="images/demo1/7.jpg" alt="image7"/><h4>Dark Honor</h4><p>Chillwave mustache pinterest, marfa seitan umami id farm-to-table iphone.</p></li>
				<li><img src="images/demo1/8.jpg" alt="image8"/><h4>Nested Happiness</h4><p>Minim post-ironic banksy american apparel iphone wayfarers.</p></li>
				<li><img src="images/demo1/9.jpg" alt="image9"/><h4>Cherry Country</h4><p>Sint vinyl Austin street art odd future id trust fund, terry richardson cray.</p></li>
				<li><img src="images/demo1/10.jpg" alt="image10"/><h4>Blossom Delight</h4><p>Craft beer gentrify nihil pariatur aliqua high life, irony cosby sweater.</p></li>
				<li><img src="images/demo1/11.jpg" alt="image11"/><h4>Heartbeat</h4><p>Cliche vinyl consequat, carles wolf Austin williamsburg post-ironic mcsweeney's.</p></li>
				<li><img src="images/demo1/12.jpg" alt="image12"/><h4>Inner Organs</h4><p>Deserunt reprehenderit pour-over marfa VHS occaecat, aesthetic belly DIY.</p></li>
				<li><img src="images/demo1/13.jpg" alt="image13"/><h4>Wanted Darkness</h4><p>Organic irony incididunt blog retro, fanny pack nisi salvia.</p></li>
				<li><img src="images/demo1/14.jpg" alt="image14"/><h4>Blessed Fever</h4><p>Twee biodiesel fugiat ut. Thundercats mcsweeney's occaecat brooklyn mollit.</p></li>
				<li><img src="images/demo1/15.jpg" alt="image15"/><h4>Origins</h4><p>Quinoa marfa banksy nostrud brunch bushwick PBR. Mcsweeney's bushwick banksy.</p></li>
				<li><img src="images/demo1/16.jpg" alt="image16"/><h4>Fire Lime</h4><p>Brunch fugiat locavore, swag photo booth keffiyeh labore small batch.</p></li>
				<li><img src="images/demo1/17.jpg" alt="image17"/><h4>Host Rumor</h4><p>Helvetica wayfarers ea enim, street art you probably haven't heard of.</p></li>
				<li><img src="images/demo1/18.jpg" alt="image18"/><h4>Lovely Feast</h4><p>Semiotics ennui VHS high life you probably haven't heard of them sed craft beer.</p></li>
				<li><img src="images/demo1/19.jpg" alt="image19"/><h4>Red Greatness</h4><p>Cray 8-bit cliche, consequat VHS mumblecore salvia tattooed typewriter.</p></li>
				<li><img src="images/demo1/20.jpg" alt="image20"/><h4>Hollow Soul</h4><p>Kale chips enim eiusmod narwhal, magna before they sold out locavore.</p></li>
			</ul>
			<nav>
				<span id="nav-prev">prev</span>
				<span id="nav-next">next</span>
			</nav>
		</div>
		<p class="info"><strong>提示:</strong>保持鼠標長按,會有流動效果</p>
	</section>
</div>
<script type="text/javascript">	
$(function() {
	var $el = $( '#wi-el' ),
		windy = $el.windy(),
		allownavnext = false,
		allownavprev = false;
	$( '#nav-prev' ).on( 'mousedown', function( event ) {
		allownavprev = true;
		navprev();
	} ).on( 'mouseup mouseleave', function( event ) {
		allownavprev = false;
	} );
	$( '#nav-next' ).on( 'mousedown', function( event ) {
		allownavnext = true;
		navnext();
	} ).on( 'mouseup mouseleave', function( event ) {
		allownavnext = false;
	} );
	function navnext() {
		if( allownavnext ) {
			windy.next();
			setTimeout( function() {	
				navnext();
			}, 150 );
		}
	}
	function navprev() {
		if( allownavprev ) {
			windy.prev();
			setTimeout( function() {	
				navprev();
			}, 150 );
		}
	}
});
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 加載動畫 h5彈窗動畫 html5彈窗動畫 h5動畫 h5背景動畫 h5場景動畫 h53D動畫 h5界面動畫 html5動畫 h5按鈕動畫 html5按鈕動畫 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子