This repository has been archived by the owner on Apr 28, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 865
/
index.html
executable file
·149 lines (121 loc) · 5.26 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Smooth Scroll</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- stylesheets -->
<style type="text/css">
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 112.5%;
margin-left: auto;
margin-right: auto;
max-width: 40em;
width: 88%;
}
</style>
</head>
<body>
<main id="top">
<nav>
<h1>Smooth Scroll</h1>
<p><a href="https://github.com/cferdinandi/smooth-scroll">GitHub</a></p>
<hr>
</nav>
<section>
<p>
<strong>Linear</strong><br>
<a data-easing="linear" href="#bazinga">Linear (no other options)</a><br>
</p>
<p>
<strong>Ease-In</strong><br>
<a data-easing="easeInQuad" href="#bazinga">Quad</a><br>
<a data-easing="easeInCubic" href="#bazinga">Cubic</a><br>
<a data-easing="easeInQuart" href="#bazinga">Quart</a><br>
<a data-easing="easeInQuint" href="#bazinga">Quint</a>
</p>
<p>
<strong>Ease-In-Out</strong><br>
<a data-easing="easeInOutQuad" href="#bazinga">Quad</a><br>
<a data-easing="easeInOutCubic" href="#bazinga">Cubic</a><br>
<a data-easing="easeInOutQuart" href="#bazinga">Quart</a><br>
<a data-easing="easeInOutQuint" href="#bazinga">Quint</a>
</p>
<p>
<strong>Ease-Out</strong><br>
<a data-easing="easeOutQuad" href="#bazinga">Quad</a><br>
<a data-easing="easeOutCubic" href="#bazinga">Cubic</a><br>
<a data-easing="easeOutQuart" href="#bazinga">Quart</a><br>
<a data-easing="easeOutQuint" href="#bazinga">Quint</a>
</p>
<p>
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
</p>
<p>
<strong>Non-ASCII Characters</strong><br>
<a href="#中文">中文</a>
</p>
<p>
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
</p>
<p id="中文">
<strong>中文</strong>
<a href="#myymälä">More Special Characters</a>
</p>
<p>
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
</p>
<p id="myymälä">myymälä</p>
<p>
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
</p>
<p id="bazinga"><a href="#1@#%^-bottom">Bazinga!</a></p>
<p>
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
</p>
<p id="1@#%^-bottom"><a href="#top">Back to the top</a></p>
</section>
</main>
<!-- Javascript -->
<script src="dist/smooth-scroll.polyfills.js"></script>
<script>
// Instantiate Scrolls
var scroll = new SmoothScroll('a[href*="#"]:not([data-easing])');
if (document.querySelector('[data-easing]')) {
var linear = new SmoothScroll('[data-easing="linear"]', {easing: 'linear'});
var easeInQuad = new SmoothScroll('[data-easing="easeInQuad"]', {easing: 'easeInQuad'});
var easeInCubic = new SmoothScroll('[data-easing="easeInCubic"]', {easing: 'easeInCubic'});
var easeInQuart = new SmoothScroll('[data-easing="easeInQuart"]', {easing: 'easeInQuart'});
var easeInQuint = new SmoothScroll('[data-easing="easeInQuint"]', {easing: 'easeInQuint'});
var easeInOutQuad = new SmoothScroll('[data-easing="easeInOutQuad"]', {easing: 'easeInOutQuad'});
var easeInOutCubic = new SmoothScroll('[data-easing="easeInOutCubic"]', {easing: 'easeInOutCubic'});
var easeInOutQuart = new SmoothScroll('[data-easing="easeInOutQuart"]', {easing: 'easeInOutQuart'});
var easeInOutQuint = new SmoothScroll('[data-easing="easeInOutQuint"]', {easing: 'easeInOutQuint'});
var easeOutQuad = new SmoothScroll('[data-easing="easeOutQuad"]', {easing: 'easeOutQuad'});
var easeOutCubic = new SmoothScroll('[data-easing="easeOutCubic"]', {easing: 'easeOutCubic'});
var easeOutQuart = new SmoothScroll('[data-easing="easeOutQuart"]', {easing: 'easeOutQuart'});
var easeOutQuint = new SmoothScroll('[data-easing="easeOutQuint"]', {easing: 'easeOutQuint'});
}
// // Log scroll events
// var logScrollEvent = function (event) {
// console.log('type:', event.type);
// console.log('anchor:', event.detail.anchor);
// console.log('toggle:', event.detail.toggle);
// };
// document.addEventListener('scrollStart', logScrollEvent, false);
// document.addEventListener('scrollStop', logScrollEvent, false);
// document.addEventListener('scrollCancel', logScrollEvent, false);
</script>
</body>
</html>