-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.html
131 lines (113 loc) · 3.01 KB
/
example.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
<!DOCTYPE HTML>
<html>
<head>
<meta charset='utf-8'>
</head>
<body>
<!-- Ideally, use a separate file for styles. -->
<style>
section {
font-size: 48px;
font-family: sans-serif;
width: 100vw;
height: 100vh;
line-height: 100vh;
text-align: center;
}
/*Example initialState*/
.hidden {
visibility: hidden;
}
.not-sticky {
position: absolute;
bottom: 0;
right: 0;
height: 20vh;
line-height: 20vh;
font-size: 16px;
}
@keyframes fade-in-slide-left {
0% {
opacity: 0.5;
transform: translateX(20%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
/*Example finalStates*/
.fade-in-slide-left {
animation: fade-in-slide-left 3s;
}
.stick {
position: fixed;
top: 0;
right: 0;
height: 20vh;
line-height: 20vh;
font-size: 16px;
}
</style>
<section>
<p>Scroll down!</p>
<div class='not-sticky'>
<p>Example Sticky</p>
</div>
</section>
<section>
<div class='placeholder'></div>
<div class='one hidden'>
<p>Hello first section!</p>
</div>
</section>
<section>
<div class='placeholder'></div>
<div class='two hidden'>
<p>Hello second section!</p>
</div>
</section>
<section>
<div class='placeholder'></div>
<div class='three hidden'>
<p>Hello third section!</p>
</div>
</section>
<script src='./simple-scroll-hook.js' type='text/javascript'></script>
<script>
var scrollHook = window.scrollHook;
// Example with sticky element and animation
var sticky = document.querySelector('.not-sticky');
var stickyExample = {
initialStates: 'not-sticky',
finalStates: ['stick'],
position: sticky.getBoundingClientRect().top + window.innerHeight
};
scrollHook.register(sticky, stickyExample);
// Example with animation classes
var one = document.querySelector('.one');
var two = document.querySelector('.two');
var three = document.querySelector('.three');
var animationExample = {
initialStates: 'hidden',
finalStates: 'fade-in-slide-left'
};
// Chain event registration if you wan't
scrollHook.register(one, animationExample)
.register(two, animationExample)
.register(three, animationExample);
// Don't forget to call this!
scrollHook
.setThrottleTime(1)
.start();
/* getEventListeners is a functoin defined in Chrome dev tools, Firebug,
* and Safari Inspector. Shows the eventListeners of a DOM element.
*
* getEventListeners(document);
* getEventListeners(window);
*
* Should both be empty objects because ScrollHook cleans up after itself
*/
</script>
</body>
</html>