特效描述:FadeThis 滚动动画插件。FadeThis滚动动画插件
代码结构
1. 引入CSS
<link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/gridle.css"> <link rel="stylesheet" href="css/demo.css"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800|Alike' rel='stylesheet' type='text/css'>
2. 引入JS
<script src="jquery.min.js"></script> <script src="jquery.easing.min.js"></script> <script src="jquery.fadethis.js"></script>
3. HTML代码
<div class="container"> <section class="main_section"> <h1>Basic usage</h1> <p> Add this before the <em>body</em> closing tag: <br> <code style="display: inline-block;"><script><b>$(window).fadeThis();</b></script></code> <br> and add one of the following classes to the elements you want to target: </p> <section class="container"> <h2>Appear from left</h2> <div class="grid-10"> <code><div class="<b>slide-left</b>"></div></code> </div> <div class="grid-2 box_wrapper"> <div class="box_footprint"> <div id="test" class="slide-left"></div> </div> </div> </section> <section class="container"> <h2>Appear from right</h2> <div class="grid-10"> <code><div class="<b>slide-right</b>"></div></code> </div> <div class="grid-2 box_wrapper"> <div class="box_footprint"> <div class="slide-right"></div> </div> </div> </section> <section class="container"> <h2>Appear from top</h2> <div class="grid-10"> <code><div class="<b>slide-top</b>"></div></code> </div> <div class="grid-2 box_wrapper"> <div class="box_footprint"> <div class="slide-top"></div> </div> </div> </section> <section class="container"> <h2>Appear from bottom</h2> <div class="grid-10"> <code><div class="<b>slide-bottom</b>"></div></code> </div> <div class="grid-2 box_wrapper"> <div class="box_footprint"> <div class="slide-bottom"></div> </div> </div> </section> </section> <section class="main_section"> <h1>Advanced usage</h1> <section class="container"> <h2>Set configuration for the whole page</h2> <div class="grid-10"> <code>$(window).fadeThis(<b>{speed: 1000}</b>);</code> <code><div class="slide-left"></div></code> </div> <div class="grid-2 box_wrapper"> <div class="box_footprint"> <div class="slide-left"></div> </div> </div> </section> <section class="container"> <h2>Set configuration per block</h2> <div class="grid-10"> <code>$(<b>'.block'</b>).fadeThis(<b>{speed: 1000}</b>);</code> <code><div class="block"><br> <div class="slide-left"></div><br></div></code> <div class="well container"> <div class="grid-1 icon"> <i class="fa fa-info fa-2x"></i> </div> <p class="grid-11"> When defining elements options, the rule is <em>First come, first served</em>. The options set for a block doesn't override previous block options adressing the same elements, or page options. So if you use block options definition, don't use <em>$(window).fadeThis()</em> before! </p> </div> </div> <div class="grid-2 box_wrapper"> <div class="box_footprint"> <div class="slide-left"></div> </div> </div> </section> <section class="container"> <h2>Set configuration per element using HTML5 data attributes</h2> <div class="grid-10"> <code>$(…).fadeThis(…);</code> <code><div class="slide-right" <b>data-plugin-options='{"speed":200, "distance":400}'</b>></div></code> <div class="well container"> <div class="grid-1 icon"> <i class="fa fa-info fa-2x"></i> </div> <p class="grid-11"> The options set by data attributes override any other options set per block. </p> </div> <div class="well container"> <div class="grid-1 icon"> <i class="fa fa-info fa-2x"></i> </div> <p class="grid-11"> Note the position and order of the quotation mark for the data attribute. <br> For some browsers, reverting this order may cause misunderstanding of the options. </p> </div> </div> <div class="grid-2 box_wrapper"> <div class="box_footprint"> <div class="slide-right" data-plugin-options='{"speed":200, "distance":400}'></div> </div> </div> </section> </section> </div> <script> $(document).ready(function() { $(window).fadeThis({ speed: 1000, }); }); </script>