-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
195 lines (178 loc) · 7.76 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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll-driven Animations</title>
<link rel="icon" type="image/x-icon" href="public/myAvatar.ico">
<link rel="stylesheet" href="style.css">
<style>
/* Progress bar */
html {
scroll-timeline-name: --page-scroll;
}
@keyframes grow-progress {
from { transform: scaleX(0); }
to {transform: scaleX(1); }
}
#progress {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 0.5em;
background-color: rgb(25, 233, 223);
transform-origin: 0 50%;
animation: grow-progress auto linear;
animation-timeline: --page-scroll;
}
/* card stacks */
@supports (animation-timeline: view()) {
.card {
--index0: calc(var(--index) - 1); /* 0-based index */
--reverse-index: calc(var(--numcards) - var(--index0)); /* reverse index */
--reverse-index0: calc(var(--reverse-index) - 1); /* 0-based reverse index */
}
@keyframes scale {
to {
transform:
scale(calc(1.1 - calc(0.1 * var(--reverse-index))));
}
}
#cards {
--numcards: 6;
view-timeline-name: --cards-element-scrolls-in-body;
}
.card__content {
--start-range: calc(var(--index0) / var(--numcards) * 100%);
--end-range: calc((var(--index)) / var(--numcards) * 100%);
animation: linear scale forwards;
animation-timeline: --cards-element-scrolls-in-body;
animation-range: exit-crossing var(--start-range) exit-crossing var(--end-range);
}
}
</style>
</head>
<body>
<div id="progress"></div>
<header>
<div>
<h1>Keep it Simple 🌈 </h1>
<p>What's new in CSS</p>
<p>👇</p>
</div>
</header>
<main>
<ul id="cards">
<li class="card" id="card_1">
<div class="card__content">
<div>
<h2>Scroll driven animations</h2>
<p>Use chrome browser. It is a relatively new feature (in 2024) which means current browser support is not great.</p>
<p><a href="https://caniuse.com/?search=animation-timeline" target="_blank" class="btn btn--accent">Can I use?</a></p>
<p>Pre-requisite - CSS animations <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations" target="_blank" class="btn btn--accent">Read about animation</a></p>
</div>
<div class="animation_div">
<div id="box"></div>
</div>
</div>
</li>
<li class="card" id="card_2">
<div class="card__content">
<div>
<h2>animation-timeline</h2>
<p>
Create an anonymous scroller using <code>{ animation-timeline: scroll() }</code> and add to the element being animated.
</p>
<p>default options for scroll(<scroller> <axis>) - <code>scroll(nearest block)</code></p>
<p><a href="https://scroll-driven-animations.style/tools/scroll-timeline/params/" target="_blank" class="btn btn--accent">Scroll parameters</a></p>
</div>
<div class="animation_div long_div">
<p>Scroll here</p>
<div id="chameleon"></div>
<div class="spacer"></div>
</div>
</div>
</li>
<li class="card" id="card_3">
<div class="card__content">
<div>
<h2>scroll v/s view</h2>
<p>scroll-timeline - tracks the scroll progress in the scroll container. Here the progress bar at the top is using scroll-timeline.</p>
<p><a href="https://scroll-driven-animations.style/tools/scroll-timeline/progress/" target="_blank" class="btn btn--accent">Scroll timeline example</a></p>
<p>view-timeline - tracks the relative position of the subject within the scrollport. The cards are using view-timeline.</p>
<p><code>{ animation-timeline: view() }</code> always tracks within the nearest scroller.</p>
<p><a href="https://scroll-driven-animations.style/tools/view-timeline/progress/" target="_blank" class="btn btn--accent">View timeline example</a></p>
</div>
<div class="animation_div">
<div id="box2"></div>
</div>
</div>
</li>
<li class="card" id="card_4">
<div class="card__content">
<div>
<h2>Attachment range</h2>
<p><code>{ animation-range: contain 10% contain 90%; }</code> - animation starts when the element is 10% in view and stops when it has crossed 80% of the scrollport.</p>
<p>Default is normal (cover 0% cover 100%)</p>
<p>Other options include cover, contain, entry, exit, entry-crossing, exit-crossing</p>
<p><a href="https://scroll-driven-animations.style/tools/view-timeline/ranges/#range-start-name=cover&range-start-percentage=0&range-end-name=cover&range-end-percentage=100&view-timeline-axis=block&view-timeline-inset=0&subject-size=smaller&subject-animation=reveal&interactivity=clicktodrag&show-areas=yes&show-fromto=yes&show-labels=yes" target="_blank" class="btn btn--accent">Try it out</a></p>
</div>
<div class="animation_div long_div">
<p>Scroll here</p>
<div id="horizontalLine"></div>
<div class="spacer"></div>
</div>
</div>
</li>
<li class="card" id="card_5">
<div class="card__content">
<div>
<h2>Named timeline</h2>
<p>Name a scroll/view timeline using a custom identifier.</p>
<p>Examples in this page</p>
<p>
<code>html {
scroll-timeline-name: --page-scroll;
}</code></p>
<p><code>#card {
view-timeline-name: --cards-element-scrolls-in-body;
}</code></p>
</div>
<div class="animation_div">
<div id="ball"></div>
</div>
</div>
</li>
<li class="card" id="card_6">
<div class="card__content">
<div>
<h2>No Javascript</h2>
<p>This static page is built with HTML and CSS and hosted on github pages. <a href="https://github.com/shivangidas/scroll-animations" target="_blank" class="btn btn--accent">Check out the code</a></p>
<p>Javascript is not needed for styling a page or for animations. Nor do you need any framework or library. </p>
<p>(...if you really want to use JS here you can with Web Animations API
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API" target="_blank" class="btn btn--accent">WAAPI</a>)</p>
</div>
<div class="animation_div">
<div class="perspective">
<div id="box3d">
<div class="face top"></div>
<div class="face bottom"></div>
<div class="face back"></div>
<div class="face front"></div>
<div class="face left"></div>
<div class="face right"></div>
</div>
</div>
</div>
</div>
</li>
</ul>
</main>
<aside>
<div>
<h1>That's all for now</h1>
</div>
</aside>
</body>
</html>