This repository has been archived by the owner on Dec 23, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathindex.html
92 lines (79 loc) · 3.24 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/divPeek.min.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<h1>DivPeek</h1>
<h2>CSS animation triggers with jQuery</h2>
<p style="text-align:left;">DivPeek simply watches the divs you specify to see if they are scrolled in to view.
If they are, a class is added so you can easily create a css-transform animation without having to mess with the JS.
A class is also added when the element is out of view, so for the sake of progressive enhancement you should create an non-viewed animation start state.
Oh, and resizing your browser window updates the viewport and (if necessary) triggers animations for state changes.
</p>
<p>Right, now scroll down for some hot demo action!</p>
</div>
<div class="scrollspacer"></div>
<div class="scrollspacer"></div>
<div class="scrollspacer"></div>
<p class="fxtitle">Build Animation</p>
<div id="scrollfx1" class="owlscrollfx">
<div class="owl"></div>
<div class="owl"></div>
<div class="owl"></div>
<div class="owl"></div>
<div class="owl"></div>
<div class="owl"></div>
<div style="clear:both;"></div>
</div>
<div id="scrollfx2" class="owlscrollfx">
<div class="owl"></div>
<div class="owl"></div>
<div class="owl"></div>
<div class="owl"></div>
<div class="owl"></div>
<div class="owl"></div>
<div style="clear:both;"></div>
</div>
<div id="scrollfx3" class="owlscrollfx">
<div class="owl"></div>
<div class="owl"></div>
<div class="owl"></div>
<div class="owl"></div>
<div class="owl"></div>
<div class="owl"></div>
<div style="clear:both;"></div>
</div>
<div id="scrollfx4" class="owlscrollfx">
<div class="owl"></div>
<div class="owl"></div>
<div class="owl"></div>
<div class="owl"></div>
<div class="owl"></div>
<div class="owl"></div>
<div style="clear:both;"></div>
</div>
<div class="scrollspacer"></div>
<p class="fxtitle">Simple Fade-In</p>
<div id="scrollfx5"></div>
<div class="scrollspacer"></div>
<p class="fxtitle">3D Transform</p>
<div id="scrollfx6"></div>
<div class="scrollspacer"></div>
<p class="fxtitle">Ken Burns Effect</p>
<div id="scrollfx7"></div>
<div class="scrollspacer"></div>
<div id="footer">
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/3.0/88x31.png" /></a><br />
This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_US">Creative Commons Attribution 3.0 Unported License</a>.
<br/><br/>
<small>image credits: <a href="http://www.flickr.com/photos/jasonidzerda/4003273528/" target="_blank">Jason Idzerda on Flickr<a/></small>
</div>
</div>
</body>
</html>