js特效

代码结构

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;">&lt;script&gt;<b>$(window).fadeThis();</b>&lt;/script&gt;</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>&lt;div class=&quot;<b>slide-left</b>&quot;&gt;&lt;/div&gt;</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>&lt;div class=&quot;<b>slide-right</b>&quot;&gt;&lt;/div&gt;</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>&lt;div class=&quot;<b>slide-top</b>&quot;&gt;&lt;/div&gt;</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>&lt;div class=&quot;<b>slide-bottom</b>&quot;&gt;&lt;/div&gt;</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>&lt;div class=&quot;slide-left&quot;&gt;&lt;/div&gt;</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>&lt;div class=&quot;block&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;slide-left&quot;&gt;&lt;/div&gt;<br>&lt;/div&gt;</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>$(&hellip;).fadeThis(&hellip;);</code>
						<code>&lt;div class=&quot;slide-right&quot; <b>data-plugin-options='{&quot;speed&quot;:200, &quot;distance&quot;:400}'</b>&gt;&lt;/div&gt;</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>