Add anchor tags for scroll snapping examples.
[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         <a name="scroll-normal"></a>
220         <h3 style="margin-top: 5vh;">This first container does not have any scroll snapping behavior.</h3>
221         <div class="container">
222             <div class="child">
223                 <img class="corner top-left" src="images/corner.svg"></img>
224                 <img class="corner top-right" src="images/corner.svg"></img>
225                 <img class="corner bottom-left" src="images/corner.svg"></img>
226                 <img class="corner bottom-right" src="images/corner.svg"></img>
227                 <div class="label"><h1>1</h1></div>
228             </div>
229             <div class="child">
230                 <img class="corner top-left" src="images/corner.svg"></img>
231                 <img class="corner top-right" src="images/corner.svg"></img>
232                 <img class="corner bottom-left" src="images/corner.svg"></img>
233                 <img class="corner bottom-right" src="images/corner.svg"></img>
234                 <div class="label"><h1>2</h1></div>
235             </div>
236             <div class="child">
237                 <img class="corner top-left" src="images/corner.svg"></img>
238                 <img class="corner top-right" src="images/corner.svg"></img>
239                 <img class="corner bottom-left" src="images/corner.svg"></img>
240                 <img class="corner bottom-right" src="images/corner.svg"></img>
241                 <div class="label"><h1>3</h1></div>
242             </div>
243             <div class="child">
244                 <img class="corner top-left" src="images/corner.svg"></img>
245                 <img class="corner top-right" src="images/corner.svg"></img>
246                 <img class="corner bottom-left" src="images/corner.svg"></img>
247                 <img class="corner bottom-right" src="images/corner.svg"></img>
248                 <div class="label"><h1>4</h1></div>
249             </div>
250         </div>
251
252         <!-- Simple scroll snapping container (using repeat) -->
253         <a name="scroll-snap-1"></a>
254         <h3>This second container shows what basic scroll snapping can do for us.</h3>
255         <div class="container" id="snap-scroll-container">
256             <img src="images/bluecross.svg" class="snap-destination"></img>
257             <div class="child">
258                 <img class="corner top-left" src="images/corner.svg"></img>
259                 <img class="corner top-right" src="images/corner.svg"></img>
260                 <img class="corner bottom-left" src="images/corner.svg"></img>
261                 <img class="corner bottom-right" src="images/corner.svg"></img>
262                 <div class="label"><h1>1</h1></div>
263             </div>
264             <div class="child">
265                 <img class="corner top-left" src="images/corner.svg"></img>
266                 <img class="corner top-right" src="images/corner.svg"></img>
267                 <img class="corner bottom-left" src="images/corner.svg"></img>
268                 <img class="corner bottom-right" src="images/corner.svg"></img>
269                 <div class="label"><h1>2</h1></div>
270             </div>
271             <div class="child">
272                 <img class="corner top-left" src="images/corner.svg"></img>
273                 <img class="corner top-right" src="images/corner.svg"></img>
274                 <img class="corner bottom-left" src="images/corner.svg"></img>
275                 <img class="corner bottom-right" src="images/corner.svg"></img>
276                 <div class="label"><h1>3</h1></div>
277             </div>
278             <div class="child">
279                 <img class="corner top-left" src="images/corner.svg"></img>
280                 <img class="corner top-right" src="images/corner.svg"></img>
281                 <img class="corner bottom-left" src="images/corner.svg"></img>
282                 <img class="corner bottom-right" src="images/corner.svg"></img>
283                 <div class="label"><h1>4</h1></div>
284             </div>
285         </div>
286         <p>The CSS for the above container is:</p>
287         <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-points-x: repeat(100%);</pre>
288
289         <!-- Scroll snapping container using coordinates -->
290         <a name="scroll-snap-2"></a>
291         <h3>This next container snaps to elements of different sizes when scrolling.</h3>
292         <div class="container" id="snap-scroll-container-coordinates">
293             <img src="images/bluecross.svg" class="snap-destination"></img>
294             <div class="child">
295                 <img class="corner top-left" src="images/corner.svg"></img>
296                 <img class="corner top-right" src="images/corner.svg"></img>
297                 <img class="corner bottom-left" src="images/corner.svg"></img>
298                 <img class="corner bottom-right" src="images/corner.svg"></img>
299                 <div class="label"><h1>1</h1></div>
300             </div>
301             <div class="child child-thin">
302                 <img class="corner top-left" src="images/corner.svg"></img>
303                 <img class="corner top-right" src="images/corner.svg"></img>
304                 <img class="corner bottom-left" src="images/corner.svg"></img>
305                 <img class="corner bottom-right" src="images/corner.svg"></img>
306                 <div class="label"><h1>2</h1></div>
307             </div>
308             <div class="child">
309                 <img class="corner top-left" src="images/corner.svg"></img>
310                 <img class="corner top-right" src="images/corner.svg"></img>
311                 <img class="corner bottom-left" src="images/corner.svg"></img>
312                 <img class="corner bottom-right" src="images/corner.svg"></img>
313                 <div class="label"><h1>3</h1></div>
314             </div>
315             <div class="child child-thin">
316                 <img class="corner top-left" src="images/corner.svg"></img>
317                 <img class="corner top-right" src="images/corner.svg"></img>
318                 <img class="corner bottom-left" src="images/corner.svg"></img>
319                 <img class="corner bottom-right" src="images/corner.svg"></img>
320                 <div class="label"><h1>4</h1></div>
321             </div>
322             <div class="child">
323                 <img class="corner top-left" src="images/corner.svg"></img>
324                 <img class="corner top-right" src="images/corner.svg"></img>
325                 <img class="corner bottom-left" src="images/corner.svg"></img>
326                 <img class="corner bottom-right" src="images/corner.svg"></img>
327                 <div class="label"><h1>5</h1></div>
328             </div>
329             <div class="child child-thin">
330                 <img class="corner top-left" src="images/corner.svg"></img>
331                 <img class="corner top-right" src="images/corner.svg"></img>
332                 <img class="corner bottom-left" src="images/corner.svg"></img>
333                 <img class="corner bottom-right" src="images/corner.svg"></img>
334                 <div class="label"><h1>6</h1></div>
335             </div>
336             <div class="child">
337                 <img class="corner top-left" src="images/corner.svg"></img>
338                 <img class="corner top-right" src="images/corner.svg"></img>
339                 <img class="corner bottom-left" src="images/corner.svg"></img>
340                 <img class="corner bottom-right" src="images/corner.svg"></img>
341                 <div class="label"><h1>7</h1></div>
342             </div>
343         </div>
344         <p>The CSS for the above container is:</p>
345         <pre>-webkit-scroll-snap-type: mandatory;</pre>
346         <p>The CSS for each of the container&rsquo;s children is:</p>
347         <pre>-webkit-scroll-snap-coordinate: 0% 0%;</pre>
348
349         <!-- Centered scroll snapping container using coordinates -->
350         <a name="scroll-snap-3"></a>
351         <h3>Here, we snap elements of different sizes to the center of the container.</h3>
352         <div class="container" id="snap-scroll-container-coordinates-centered">
353             <img src="images/bluecross.svg" class="snap-destination-centered"></img>
354             <div class="child">
355                 <img class="corner top-left" src="images/corner.svg"></img>
356                 <img class="corner top-right" src="images/corner.svg"></img>
357                 <img class="corner bottom-left" src="images/corner.svg"></img>
358                 <img class="corner bottom-right" src="images/corner.svg"></img>
359                 <div class="label"><h1>1</h1></div>
360             </div>
361             <div class="child child-thin">
362                 <img class="corner top-left" src="images/corner.svg"></img>
363                 <img class="corner top-right" src="images/corner.svg"></img>
364                 <img class="corner bottom-left" src="images/corner.svg"></img>
365                 <img class="corner bottom-right" src="images/corner.svg"></img>
366                 <div class="label"><h1>2</h1></div>
367             </div>
368             <div class="child">
369                 <img class="corner top-left" src="images/corner.svg"></img>
370                 <img class="corner top-right" src="images/corner.svg"></img>
371                 <img class="corner bottom-left" src="images/corner.svg"></img>
372                 <img class="corner bottom-right" src="images/corner.svg"></img>
373                 <div class="label"><h1>3</h1></div>
374             </div>
375             <div class="child child-thin">
376                 <img class="corner top-left" src="images/corner.svg"></img>
377                 <img class="corner top-right" src="images/corner.svg"></img>
378                 <img class="corner bottom-left" src="images/corner.svg"></img>
379                 <img class="corner bottom-right" src="images/corner.svg"></img>
380                 <div class="label"><h1>4</h1></div>
381             </div>
382             <div class="child">
383                 <img class="corner top-left" src="images/corner.svg"></img>
384                 <img class="corner top-right" src="images/corner.svg"></img>
385                 <img class="corner bottom-left" src="images/corner.svg"></img>
386                 <img class="corner bottom-right" src="images/corner.svg"></img>
387                 <div class="label"><h1>5</h1></div>
388             </div>
389             <div class="child child-thin">
390                 <img class="corner top-left" src="images/corner.svg"></img>
391                 <img class="corner top-right" src="images/corner.svg"></img>
392                 <img class="corner bottom-left" src="images/corner.svg"></img>
393                 <img class="corner bottom-right" src="images/corner.svg"></img>
394                 <div class="label"><h1>6</h1></div>
395             </div>
396             <div class="child">
397                 <img class="corner top-left" src="images/corner.svg"></img>
398                 <img class="corner top-right" src="images/corner.svg"></img>
399                 <img class="corner bottom-left" src="images/corner.svg"></img>
400                 <img class="corner bottom-right" src="images/corner.svg"></img>
401                 <div class="label"><h1>7</h1></div>
402             </div>
403         </div>
404         <p>The CSS for the above container is:</p>
405         <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-destination: 50% 50%;</pre>
406         <p>The CSS for each of the container&rsquo;s children is:</p>
407         <pre>-webkit-scroll-snap-coordinate: 50% 50%;</pre>
408
409         <!-- Centered scroll snapping container in 2D -->
410         <a name="scroll-snap-4"></a>
411         <h3>This container shows centered scroll snapping in a 2D grid.</h3>
412         <div class="container" id="snap-scroll-container-2D">
413             <img src="images/1.png"/><img src="images/2.png"/><img src="images/3.png"/><img src="images/4.png"/><br>
414             <img src="images/5.png"/><img src="images/6.png"/><img src="images/7.png"/><img src="images/8.png"/><br>
415             <img src="images/9.png"/><img src="images/10.png"/><img src="images/11.png"/><img src="images/12.png"/><br>
416             <img src="images/13.png"/><img src="images/14.png"/><img src="images/15.png"/><img src="images/16.png"/>
417         </div>
418         <p>The CSS for the above container is:</p>
419         <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-destination: 50% 50%;</pre>
420         <p>The CSS for each of the container&rsquo;s children is:</p>
421         <pre>-webkit-scroll-snap-coordinate: 50% 50%;</pre>
422
423         <!-- Centered scroll snapping container in 2D, rotated -->
424         <a name="scroll-snap-5"></a>
425         <h3>This example takes the 2D scroll snapping grid above and rotates it by 30 degrees.</h3>
426         <div class="container" id="snap-scroll-container-2D-rotated">
427             <img src="images/1.png"/><img src="images/2.png"/><img src="images/3.png"/><img src="images/4.png"/><br>
428             <img src="images/5.png"/><img src="images/6.png"/><img src="images/7.png"/><img src="images/8.png"/><br>
429             <img src="images/9.png"/><img src="images/10.png"/><img src="images/11.png"/><img src="images/12.png"/><br>
430             <img src="images/13.png"/><img src="images/14.png"/><img src="images/15.png"/><img src="images/16.png"/>
431         </div>
432         <p>The CSS for the above container is:</p>
433         <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-destination: 50% 50%;<br>-webkit-transform: rotate(30deg);</pre>
434         <p>The CSS for each of the container&rsquo;s children is:</p>
435         <pre>-webkit-scroll-snap-coordinate: 50% 50%;</pre>
436
437         <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>
438     </body>
439 </html>