-
Notifications
You must be signed in to change notification settings - Fork 0
/
test2.html
160 lines (130 loc) · 6.53 KB
/
test2.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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Animate on scroll with wow.js</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/animatecss/3.5.2/animate.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div id="container">
<header>
<h1>Animate on scroll with wow.js</h1>
</header>
<div class="wow fadeInUp" data-wow-duration="2s">
<h4>Credits: <a href="https://pixabay.com/" target="_blank">Images</a> |
<a href="http://fontawesome.io/icons/" target="_blank">Icons</a> |
<a href="http://mynameismatthieu.com/WOW/" target="_blank">WOW JS</a> | <a href="https://daneden.github.io/animate.css/" target="_blank">Animate CSS</a></h4>
</div>
<div id="main">
<!-- FONT AWESOME DEMO -->
<div class="col_third">
<i class="fa fa-heart fa-5x icn_red wow pulse" data-wow-iteration="infinite" data-wow-duration="500ms"></i>
</div>
<div class="col_third">
<i class="fa fa-heart fa-5x icn_blue wow shake" data-wow-iteration="infinite" data-wow-duration="1500ms"></i>
</div>
<div class="col_third end">
<i class="fa fa-heart fa-5x icn_green wow bounce" data-wow-iteration="infinite" data-wow-duration="800ms"></i>
</div>
<div class="clear"></div>
<!--END / FONT AWESOME DEMO -->
<!-- 3 COLUMN DEMO -->
<div class="col_third">
<section class="section--yellow wow fadeInLeft" data-wow-delay="0.1s" style="visibility: visible; -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s;"></section>
</div>
<div class="col_third">
<section class="section--yellow wow fadeInLeft" data-wow-delay="0.2s" style="visibility: visible; -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s;"></section>
</div>
<div class="col_third end">
<section class="section--yellow wow fadeInLeft" data-wow-delay="0.3s" style="visibility: visible; -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;"></section>
</div>
<div class="clear"></div>
<!-- END / 3 COLUMN DEMO -->
<section class="section--purple"></section>
<section class="section--blue"></section>
<div class="wow fadeInUp" data-wow-duration="2s">
<h2 align="center"><strong>Reveal</strong> Animations When You Scroll</h2>
</div>
<section class="section--purple wow fadeInLeft" data-wow-duration="2s"></section>
<section class="section--green wow fadeInLeft" data-wow-duration="2s"></section>
<div class="clear"></div>
<!-- 3 COLUMN DEMO -->
<div class="col_third">
<section class="section--yellow wow fadeInRight" data-wow-delay="0.1s" style="visibility: visible; -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s;"></section>
</div>
<div class="col_third">
<section class="section--yellow wow fadeInRight" data-wow-delay="0.2s" style="visibility: visible; -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s;"></section>
</div>
<div class="col_third end">
<section class="section--yellow wow fadeInRight" data-wow-delay="0.3s" style="visibility: visible; -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;"></section>
</div>
<div class="clear"></div>
<!-- END / 3 COLUMN DEMO -->
<div class="service-section">
<div class="wow_imgage wow fadeInLeft" data-wow-delay="0.1s" style="visibility: visible; -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s;">
<figure>
<img src="https://cdn.pixabay.com/photo/2019/12/05/00/36/leaves-4673997_960_720.jpg" width="270" height="180"></img>
</figure>
</div>
<div class="wow_imgage wow fadeInLeft" data-wow-delay="0.2s" style="visibility: visible; -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s;">
<figure>
<img src="https://cdn.pixabay.com/photo/2019/12/05/00/36/leaves-4673997_960_720.jpg" width="270" height="180"></img>
</figure>
</div>
<div class="wow_imgage end wow fadeInLeft" data-wow-delay="0.3s" style="visibility: visible; -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;">
<figure>
<img src="https://cdn.pixabay.com/photo/2019/12/05/00/36/leaves-4673997_960_720.jpg" width="270" height="180"></img>
</figure>
</div>
</div>
<!--.SERVICES SECTION-->
<div class="clear"></div>
<section class="section--yellow wow fadeInDown" data-wow-duration="1s"></section>
<section class="section--purple wow fadeInDown" data-wow-duration="2s"></section>
<section class="section--blue wow fadeInDown" data-wow-duration="2s"></section>
<section class="section--green wow fadeInDown" data-wow-duration="3s"></section>
<div class="service-section">
<div class="wow_imgage wow fadeInLeft" data-wow-delay="0.1s">
<img src="https://cdn.pixabay.com/photo/2019/12/05/00/36/leaves-4673997_960_720.jpg" width="270" height="180"></img>
</div>
<div class="wow_imgage wow fadeInLeft" data-wow-delay="0.2s">
<img src="https://cdn.pixabay.com/photo/2019/12/05/00/36/leaves-4673997_960_720.jpg" width="270" height="180"></img>
</div>
<div class="wow_imgage end wow fadeInLeft" data-wow-delay="0.3s">
<img src="https://cdn.pixabay.com/photo/2019/12/05/00/36/leaves-4673997_960_720.jpg" width="270" height="180"></img>
</div>
</div>
<!-- End Images SECTION-->
<!-- 3 COLUMN DEMO -->
<div class="col_third">
<section class="section--yellow wow fadeInDown"></section>
</div>
<div class="col_third">
<section class="section--yellow wow fadeInDown"></section>
</div>
<div class="col_third end">
<section class="section--yellow wow fadeInDown"></section>
</div>
<div class="clear"></div>
<!-- END / 3 COLUMN DEMO -->
<!-- FONT AWESOME DEMO -->
<div class="col_third">
<i class="fa fa-heart fa-5x icn_red wow pulse" data-wow-iteration="infinite" data-wow-duration="500ms"></i>
</div>
<div class="col_third">
<i class="fa fa-heart fa-5x icn_blue wow shake" data-wow-iteration="infinite" data-wow-duration="1500ms"></i>
</div>
<div class="col_third end">
<i class="fa fa-heart fa-5x icn_green wow bounce" data-wow-iteration="infinite" data-wow-duration="800ms"></i>
</div>
<div class="clear"></div>
<!--END / FONT AWESOME DEMO -->
</div>
</div>
<!-- partial -->
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>