forked from jshjohnson/Animate
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
71 lines (70 loc) · 3.18 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
<!DOCTYPE html>
<html>
<head>
<title>Animate.js</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Animate.js: A tiny vanilla JS plugin to trigger animations on elements when they are within the viewport">
<link rel="stylesheet" type="text/css" href="assets/css/app.min.css?version=1.3.2">
<link rel="stylesheet" type="text/css" href="assets/css/animate.css?version=1.3.2">
<noscript>
<style>.invisible { opacity: 1; }</style>
</noscript>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<header data-animate data-animation-reverse="false" data-animation-remove="false" data-animation-classes="animated fadeIn">
<a href="https://github.com/jshjohnson/animate" target="_blank" title="Go to repo">
<img src="assets/images/logo.svg" class="logo" alt="Animate.js logo">
</a>
</header>
<div class="box box--zero-top visible" data-animate data-animation-classes="animated tada"></div>
<div class="box visible" data-animate data-animation-classes="animated shake"></div>
<div class="box visible" data-animate data-animation-classes="animated jello"></div>
<div class="box visible" data-animate data-animation-classes="animated wobble" data-animation-offset="0.5, 1"></div>
<div class="box visible" data-animate data-animation-classes="animated rubberBand"></div>
<div class="box visible" data-animate data-animation-classes="animated swing" data-animation-scrolled="true"></div>
<footer class="push-top" alt="Animate.js logo">
<a href="http://joshuajohnson.co.uk" class="text-center">joshuajohnson.co.uk</a>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/2014.01.31/classList.min.js"></script>
<script src="assets/js/dist/animate.js?version=1.3.2"></script>
<script>
var animate = new Animate({
target: '[data-animate]',
animatedClass: 'visible',
offset: [0.5, 0.5],
delay: 0,
remove: false,
reverse: true,
scrolled: false,
debug: true,
onLoad: true,
onScroll: true,
onResize: false,
callbackOnInit: function() {
console.log('Initialised');
},
callbackOnInView: function(element) {
var animationType = element.getAttribute('data-animation-classes').replace('animated', '').trim();
console.log(animationType + ' in view.');
},
callbackOnAnimate: function(element) {
console.log(element)
}
});
animate.init();
</script>
<!-- Google Analytics - Ignore me -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-31575166-1', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->
</body>
</html>