Add scroll snap demo directory and files.
[WebKit-https.git] / Websites / webkit.org / demos / scroll-snap / index.html
1 <html>
2     <head>
3         <meta name="viewport" content="width=device-width,initial-scale=1">
4         <title>Scroll Snapping Examples</title>
5         <style>
6         body {
7             line-height: 1.5;
8             margin: 2em 2em;
9             padding: 0;
10             background-color: #E2E6F5;
11         }
12
13         pre {
14             padding: 1em 3em;
15             border: 1px solid #ccc;
16             border-radius: 10px;
17             background-color: #ddd;
18         }
19
20         code {
21             font-size: 115%;
22             font-weight: bold;
23             color: #0F5426;
24         }
25
26         p > span {
27             color: #6666FF;
28         }
29
30         h1, h3, p {
31             font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
32             font-size: 120%;
33         }
34
35         h1 {
36             font-size: 40px;
37         }
38
39         p {
40             font-size: 20px;
41         }
42
43         h3 {
44             font-size: 25px;
45             margin-top: 10vh;
46         }
47
48         .corner {
49             fill: black;
50             background: transparent;
51             position: absolute;
52             width: 50px;
53             height: 50px;
54         }
55
56         .child {
57             width: 400px;
58             height: 400px;
59             position: relative;
60             background-color: #F0F0F0;
61             display: inline-block;
62             margin-right: -4px;
63             border: 1px solid black;
64         }
65
66         .label {
67             width: 200px;
68             height: 200px;
69             border-radius: 25%;
70             background-color: white;
71             margin: 100px auto 0 auto;
72         }
73
74         .label > h1 {
75             font-size: 80px;
76             padding-left: calc(50% - 22px);
77             padding-top: calc(50% - 60px);
78         }
79
80         .top-right {
81             left: 350px;
82             -ms-transform: rotate(90deg);
83             -webkit-transform: rotate(90deg);
84             transform: rotate(90deg);
85         }
86
87         .bottom-left {
88             top: 350px;
89             -ms-transform: rotate(270deg);
90             -webkit-transform: rotate(270deg);
91             transform: rotate(270deg);
92         }
93
94         .bottom-right {
95             top: 350px;
96             left: 350px;
97             -ms-transform: rotate(180deg);
98             -webkit-transform: rotate(180deg);
99             transform: rotate(180deg);
100         }
101
102         .child-thin {
103             width: 300px;
104         }
105
106         .child-thin > .top-right {
107             left: 250px;
108         }
109         
110         .child-thin > .bottom-right {
111             left: 250px;
112         }
113
114         .container {
115             width: 402px;
116             height: 410px;
117             overflow-x: auto;
118             overflow-y: hidden;
119             white-space: nowrap;
120             -webkit-overflow-scrolling: touch;
121             margin: 10vh auto 0 auto;
122         }
123
124         #snap-scroll-container {
125             -webkit-scroll-snap-type: mandatory;
126             scroll-snap-type: mandatory;
127             -webkit-scroll-snap-points-x: repeat(100%);
128             scroll-snap-points-x: repeat(100%);
129         }
130
131         #snap-scroll-container-coordinates {
132             -webkit-scroll-snap-type: mandatory;
133             scroll-snap-type: mandatory;
134         }
135
136         #snap-scroll-container-coordinates > .child {
137             -webkit-scroll-snap-coordinate: 0% 0%;
138             scroll-snap-coordinate: 0% 0%;
139         }
140
141         #snap-scroll-container-coordinates-centered {
142             width: 402px;
143             -webkit-scroll-snap-type: mandatory;
144             scroll-snap-type: mandatory;
145             -webkit-scroll-snap-destination: 50% 50%;
146             scroll-snap-destination: 50% 50%;
147         }
148
149         #snap-scroll-container-coordinates-centered > .child {
150             -webkit-scroll-snap-coordinate: 50% 50%;
151             scroll-snap-coordinate: 50% 50%;
152         }
153
154         .snap-destination,
155         .snap-destination-centered {
156             width: 25px;
157             height: 25px;
158             z-index: 1;
159             position: absolute;
160         }
161
162         .snap-destination {
163             margin: -10px 0 0 -10px;
164         }
165
166         .snap-destination-centered {
167             margin: 187px 0 0 187px;
168         }
169
170         .snap-point {
171             width: 25px;
172             height: 25px;
173             -ms-transform: rotate(45deg);
174             -webkit-transform: rotate(45deg);
175             transform: rotate(45deg);
176             z-index: 1;
177             position: absolute;
178             margin: -10px 0 0 -10px;
179         }
180
181         #snap-scroll-container-2D,
182         #snap-scroll-container-2D-rotated {
183             -webkit-scroll-snap-type: mandatory;
184             scroll-snap-type: mandatory;
185             -webkit-scroll-snap-destination: 50% 50%;
186             scroll-snap-destination: 50% 50%;
187             overflow: scroll;
188             width: 500px;
189             height: 500px;
190             border-radius: 50px;
191         }
192
193         #snap-scroll-container-2D > img,
194         #snap-scroll-container-2D-rotated > img {
195             -webkit-scroll-snap-coordinate: 50% 50%;
196             scroll-snap-coordinate: 50% 50%;
197             width: 400px;
198             height: 400px;
199         }
200
201         #snap-scroll-container-2D-rotated {
202             margin-top: 20vh;
203             margin-bottom: 20vh;
204             -ms-transform: rotate(30deg);
205             -webkit-transform: rotate(30deg);
206             transform: rotate(30deg);
207         }
208
209         #nasa {
210             font-size: 16px;
211         }
212         </style>
213     </head>
214
215     <body>
216         <h1>The <code>scroll-snap-*</code> Properties.</h1>
217         <p id="subtext">The following examples are overflow-scrolling <code>div</code>s. In the second, third and fourth examples, the <span>blue</span> cross represents the location of each container&rsquo;s scroll snap destination.</p>
218         <!-- Normal scrolling container (no snapping) -->
219         <h3 style="margin-top: 5vh;">This first container does not have any scroll snapping behavior.</h3>
220         <div class="container">
221             <div class="child">
222                 <img class="corner top-left" src="images/corner.svg"></img>
223                 <img class="corner top-right" src="images/corner.svg"></img>
224                 <img class="corner bottom-left" src="images/corner.svg"></img>
225                 <img class="corner bottom-right" src="images/corner.svg"></img>
226                 <div class="label"><h1>1</h1></div>
227             </div>
228             <div class="child">
229                 <img class="corner top-left" src="images/corner.svg"></img>
230                 <img class="corner top-right" src="images/corner.svg"></img>
231                 <img class="corner bottom-left" src="images/corner.svg"></img>
232                 <img class="corner bottom-right" src="images/corner.svg"></img>
233                 <div class="label"><h1>2</h1></div>
234             </div>
235             <div class="child">
236                 <img class="corner top-left" src="images/corner.svg"></img>
237                 <img class="corner top-right" src="images/corner.svg"></img>
238                 <img class="corner bottom-left" src="images/corner.svg"></img>
239                 <img class="corner bottom-right" src="images/corner.svg"></img>
240                 <div class="label"><h1>3</h1></div>
241             </div>
242             <div class="child">
243                 <img class="corner top-left" src="images/corner.svg"></img>
244                 <img class="corner top-right" src="images/corner.svg"></img>
245                 <img class="corner bottom-left" src="images/corner.svg"></img>
246                 <img class="corner bottom-right" src="images/corner.svg"></img>
247                 <div class="label"><h1>4</h1></div>
248             </div>
249         </div>
250
251         <!-- Simple scroll snapping container (using repeat) -->
252         <h3>This second container shows what basic scroll snapping can do for us.</h3>
253         <div class="container" id="snap-scroll-container">
254             <img src="images/bluecross.svg" class="snap-destination"></img>
255             <div class="child">
256                 <img class="corner top-left" src="images/corner.svg"></img>
257                 <img class="corner top-right" src="images/corner.svg"></img>
258                 <img class="corner bottom-left" src="images/corner.svg"></img>
259                 <img class="corner bottom-right" src="images/corner.svg"></img>
260                 <div class="label"><h1>1</h1></div>
261             </div>
262             <div class="child">
263                 <img class="corner top-left" src="images/corner.svg"></img>
264                 <img class="corner top-right" src="images/corner.svg"></img>
265                 <img class="corner bottom-left" src="images/corner.svg"></img>
266                 <img class="corner bottom-right" src="images/corner.svg"></img>
267                 <div class="label"><h1>2</h1></div>
268             </div>
269             <div class="child">
270                 <img class="corner top-left" src="images/corner.svg"></img>
271                 <img class="corner top-right" src="images/corner.svg"></img>
272                 <img class="corner bottom-left" src="images/corner.svg"></img>
273                 <img class="corner bottom-right" src="images/corner.svg"></img>
274                 <div class="label"><h1>3</h1></div>
275             </div>
276             <div class="child">
277                 <img class="corner top-left" src="images/corner.svg"></img>
278                 <img class="corner top-right" src="images/corner.svg"></img>
279                 <img class="corner bottom-left" src="images/corner.svg"></img>
280                 <img class="corner bottom-right" src="images/corner.svg"></img>
281                 <div class="label"><h1>4</h1></div>
282             </div>
283         </div>
284         <p>The CSS for the above container is:</p>
285         <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-points-x: repeat(100%);</pre>
286
287         <!-- Scroll snapping container using coordinates -->
288         <h3>This next container snaps to elements of different sizes when scrolling.</h3>
289         <div class="container" id="snap-scroll-container-coordinates">
290             <img src="images/bluecross.svg" class="snap-destination"></img>
291             <div class="child">
292                 <img class="corner top-left" src="images/corner.svg"></img>
293                 <img class="corner top-right" src="images/corner.svg"></img>
294                 <img class="corner bottom-left" src="images/corner.svg"></img>
295                 <img class="corner bottom-right" src="images/corner.svg"></img>
296                 <div class="label"><h1>1</h1></div>
297             </div>
298             <div class="child child-thin">
299                 <img class="corner top-left" src="images/corner.svg"></img>
300                 <img class="corner top-right" src="images/corner.svg"></img>
301                 <img class="corner bottom-left" src="images/corner.svg"></img>
302                 <img class="corner bottom-right" src="images/corner.svg"></img>
303                 <div class="label"><h1>2</h1></div>
304             </div>
305             <div class="child">
306                 <img class="corner top-left" src="images/corner.svg"></img>
307                 <img class="corner top-right" src="images/corner.svg"></img>
308                 <img class="corner bottom-left" src="images/corner.svg"></img>
309                 <img class="corner bottom-right" src="images/corner.svg"></img>
310                 <div class="label"><h1>3</h1></div>
311             </div>
312             <div class="child child-thin">
313                 <img class="corner top-left" src="images/corner.svg"></img>
314                 <img class="corner top-right" src="images/corner.svg"></img>
315                 <img class="corner bottom-left" src="images/corner.svg"></img>
316                 <img class="corner bottom-right" src="images/corner.svg"></img>
317                 <div class="label"><h1>4</h1></div>
318             </div>
319             <div class="child">
320                 <img class="corner top-left" src="images/corner.svg"></img>
321                 <img class="corner top-right" src="images/corner.svg"></img>
322                 <img class="corner bottom-left" src="images/corner.svg"></img>
323                 <img class="corner bottom-right" src="images/corner.svg"></img>
324                 <div class="label"><h1>5</h1></div>
325             </div>
326             <div class="child child-thin">
327                 <img class="corner top-left" src="images/corner.svg"></img>
328                 <img class="corner top-right" src="images/corner.svg"></img>
329                 <img class="corner bottom-left" src="images/corner.svg"></img>
330                 <img class="corner bottom-right" src="images/corner.svg"></img>
331                 <div class="label"><h1>6</h1></div>
332             </div>
333             <div class="child">
334                 <img class="corner top-left" src="images/corner.svg"></img>
335                 <img class="corner top-right" src="images/corner.svg"></img>
336                 <img class="corner bottom-left" src="images/corner.svg"></img>
337                 <img class="corner bottom-right" src="images/corner.svg"></img>
338                 <div class="label"><h1>7</h1></div>
339             </div>
340         </div>
341         <p>The CSS for the above container is:</p>
342         <pre>-webkit-scroll-snap-type: mandatory;</pre>
343         <p>The CSS for each of the container&rsquo;s children is:</p>
344         <pre>-webkit-scroll-snap-coordinate: 0% 0%;</pre>
345
346         <!-- Centered scroll snapping container using coordinates -->
347         <h3>Here, we snap elements of different sizes to the center of the container.</h3>
348         <div class="container" id="snap-scroll-container-coordinates-centered">
349             <img src="images/bluecross.svg" class="snap-destination-centered"></img>
350             <div class="child">
351                 <img class="corner top-left" src="images/corner.svg"></img>
352                 <img class="corner top-right" src="images/corner.svg"></img>
353                 <img class="corner bottom-left" src="images/corner.svg"></img>
354                 <img class="corner bottom-right" src="images/corner.svg"></img>
355                 <div class="label"><h1>1</h1></div>
356             </div>
357             <div class="child child-thin">
358                 <img class="corner top-left" src="images/corner.svg"></img>
359                 <img class="corner top-right" src="images/corner.svg"></img>
360                 <img class="corner bottom-left" src="images/corner.svg"></img>
361                 <img class="corner bottom-right" src="images/corner.svg"></img>
362                 <div class="label"><h1>2</h1></div>
363             </div>
364             <div class="child">
365                 <img class="corner top-left" src="images/corner.svg"></img>
366                 <img class="corner top-right" src="images/corner.svg"></img>
367                 <img class="corner bottom-left" src="images/corner.svg"></img>
368                 <img class="corner bottom-right" src="images/corner.svg"></img>
369                 <div class="label"><h1>3</h1></div>
370             </div>
371             <div class="child child-thin">
372                 <img class="corner top-left" src="images/corner.svg"></img>
373                 <img class="corner top-right" src="images/corner.svg"></img>
374                 <img class="corner bottom-left" src="images/corner.svg"></img>
375                 <img class="corner bottom-right" src="images/corner.svg"></img>
376                 <div class="label"><h1>4</h1></div>
377             </div>
378             <div class="child">
379                 <img class="corner top-left" src="images/corner.svg"></img>
380                 <img class="corner top-right" src="images/corner.svg"></img>
381                 <img class="corner bottom-left" src="images/corner.svg"></img>
382                 <img class="corner bottom-right" src="images/corner.svg"></img>
383                 <div class="label"><h1>5</h1></div>
384             </div>
385             <div class="child child-thin">
386                 <img class="corner top-left" src="images/corner.svg"></img>
387                 <img class="corner top-right" src="images/corner.svg"></img>
388                 <img class="corner bottom-left" src="images/corner.svg"></img>
389                 <img class="corner bottom-right" src="images/corner.svg"></img>
390                 <div class="label"><h1>6</h1></div>
391             </div>
392             <div class="child">
393                 <img class="corner top-left" src="images/corner.svg"></img>
394                 <img class="corner top-right" src="images/corner.svg"></img>
395                 <img class="corner bottom-left" src="images/corner.svg"></img>
396                 <img class="corner bottom-right" src="images/corner.svg"></img>
397                 <div class="label"><h1>7</h1></div>
398             </div>
399         </div>
400         <p>The CSS for the above container is:</p>
401         <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-destination: 50% 50%;</pre>
402         <p>The CSS for each of the container&rsquo;s children is:</p>
403         <pre>-webkit-scroll-snap-coordinate: 50% 50%;</pre>
404
405         <!-- Centered scroll snapping container in 2D -->
406         <h3>This container shows centered scroll snapping in a 2D grid.</h3>
407         <div class="container" id="snap-scroll-container-2D">
408             <img src="images/1.png"/><img src="images/2.png"/><img src="images/3.png"/><img src="images/4.png"/><br>
409             <img src="images/5.png"/><img src="images/6.png"/><img src="images/7.png"/><img src="images/8.png"/><br>
410             <img src="images/9.png"/><img src="images/10.png"/><img src="images/11.png"/><img src="images/12.png"/><br>
411             <img src="images/13.png"/><img src="images/14.png"/><img src="images/15.png"/><img src="images/16.png"/>
412         </div>
413         <p>The CSS for the above container is:</p>
414         <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-destination: 50% 50%;</pre>
415         <p>The CSS for each of the container&rsquo;s children is:</p>
416         <pre>-webkit-scroll-snap-coordinate: 50% 50%;</pre>
417
418         <!-- Centered scroll snapping container in 2D, rotated -->
419         <h3>This example takes the 2D scroll snapping grid above and rotates it by 30 degrees.</h3>
420         <div class="container" id="snap-scroll-container-2D-rotated">
421             <img src="images/1.png"/><img src="images/2.png"/><img src="images/3.png"/><img src="images/4.png"/><br>
422             <img src="images/5.png"/><img src="images/6.png"/><img src="images/7.png"/><img src="images/8.png"/><br>
423             <img src="images/9.png"/><img src="images/10.png"/><img src="images/11.png"/><img src="images/12.png"/><br>
424             <img src="images/13.png"/><img src="images/14.png"/><img src="images/15.png"/><img src="images/16.png"/>
425         </div>
426         <p>The CSS for the above container is:</p>
427         <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-destination: 50% 50%;<br>-webkit-transform: rotate(30deg);</pre>
428         <p>The CSS for each of the container&rsquo;s children is:</p>
429         <pre>-webkit-scroll-snap-coordinate: 50% 50%;</pre>
430
431         <p id="nasa">Images from <a target="_blank" href="https://www.nasa.gov/multimedia/imagegallery/iotd.html">NASA&rsquo;s image of the day gallery</a>.</p>
432     </body>
433 </html>