Update index.html to include ARES-6.
[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: x mandatory;
127             -webkit-scroll-snap-points-x: repeat(100%);
128             scroll-snap-points-x: repeat(100%);
129         }
130
131         #snap-scroll-container > .child {
132             scroll-snap-align: start;
133         }
134
135         #snap-scroll-container-coordinates {
136             -webkit-scroll-snap-type: mandatory;
137             scroll-snap-type: x mandatory;
138         }
139
140         #snap-scroll-container-coordinates > .child {
141             -webkit-scroll-snap-coordinate: 0% 0%;
142             scroll-snap-coordinate: 0% 0%;
143             scroll-snap-align: start;
144         }
145
146         #snap-scroll-container-coordinates-centered {
147             width: 402px;
148             -webkit-scroll-snap-type: mandatory;
149             scroll-snap-type: x mandatory;
150             -webkit-scroll-snap-destination: 50% 50%;
151             scroll-snap-destination: 50% 50%;
152         }
153
154         #snap-scroll-container-coordinates-centered > .child {
155             -webkit-scroll-snap-coordinate: 50% 50%;
156             scroll-snap-coordinate: 50% 50%;
157             scroll-snap-align: center;
158         }
159
160         .snap-destination,
161         .snap-destination-centered {
162             width: 25px;
163             height: 25px;
164             z-index: 1;
165             position: absolute;
166         }
167
168         .snap-destination {
169             margin: -10px 0 0 -10px;
170         }
171
172         .snap-destination-centered {
173             margin: 187px 0 0 187px;
174         }
175
176         .snap-point {
177             width: 25px;
178             height: 25px;
179             -ms-transform: rotate(45deg);
180             -webkit-transform: rotate(45deg);
181             transform: rotate(45deg);
182             z-index: 1;
183             position: absolute;
184             margin: -10px 0 0 -10px;
185         }
186
187         #snap-scroll-container-2D,
188         #snap-scroll-container-2D-rotated {
189             -webkit-scroll-snap-type: mandatory;
190             scroll-snap-type: both mandatory;
191             -webkit-scroll-snap-destination: 50% 50%;
192             scroll-snap-destination: 50% 50%;
193             overflow: scroll;
194             width: 500px;
195             height: 500px;
196             border-radius: 50px;
197         }
198
199         #snap-scroll-container-2D > img,
200         #snap-scroll-container-2D-rotated > img {
201             -webkit-scroll-snap-coordinate: 50% 50%;
202             scroll-snap-coordinate: 50% 50%;
203             width: 400px;
204             height: 400px;
205             scroll-snap-align: center;
206         }
207
208         #snap-scroll-container-2D-rotated {
209             margin-top: 20vh;
210             margin-bottom: 20vh;
211             -ms-transform: rotate(30deg);
212             -webkit-transform: rotate(30deg);
213             transform: rotate(30deg);
214         }
215
216         #nasa {
217             font-size: 16px;
218         }
219         </style>
220     </head>
221
222     <body>
223         <h1>The <code>scroll-snap-*</code> Properties.</h1>
224         <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>
225         <!-- Normal scrolling container (no snapping) -->
226         <a name="scroll-normal"></a>
227         <h3 style="margin-top: 5vh;">This first container does not have any scroll snapping behavior.</h3>
228         <div class="container">
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>1</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>2</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>3</h1></div>
249             </div>
250             <div class="child">
251                 <img class="corner top-left" src="images/corner.svg"></img>
252                 <img class="corner top-right" src="images/corner.svg"></img>
253                 <img class="corner bottom-left" src="images/corner.svg"></img>
254                 <img class="corner bottom-right" src="images/corner.svg"></img>
255                 <div class="label"><h1>4</h1></div>
256             </div>
257         </div>
258
259         <!-- Simple scroll snapping container (using repeat) -->
260         <a name="scroll-snap-1"></a>
261         <h3>This second container shows what basic scroll snapping can do for us.</h3>
262         <div class="container" id="snap-scroll-container">
263             <img src="images/bluecross.svg" class="snap-destination"></img>
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>1</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>2</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>3</h1></div>
284             </div>
285             <div class="child">
286                 <img class="corner top-left" src="images/corner.svg"></img>
287                 <img class="corner top-right" src="images/corner.svg"></img>
288                 <img class="corner bottom-left" src="images/corner.svg"></img>
289                 <img class="corner bottom-right" src="images/corner.svg"></img>
290                 <div class="label"><h1>4</h1></div>
291             </div>
292         </div>
293         <p>The CSS for the above container is:</p>
294         <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-points-x: repeat(100%);</pre>
295
296         <!-- Scroll snapping container using coordinates -->
297         <a name="scroll-snap-2"></a>
298         <h3>This next container snaps to elements of different sizes when scrolling.</h3>
299         <div class="container" id="snap-scroll-container-coordinates">
300             <img src="images/bluecross.svg" class="snap-destination"></img>
301             <div class="child">
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>1</h1></div>
307             </div>
308             <div class="child child-thin">
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>2</h1></div>
314             </div>
315             <div class="child">
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>3</h1></div>
321             </div>
322             <div class="child child-thin">
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>4</h1></div>
328             </div>
329             <div class="child">
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>5</h1></div>
335             </div>
336             <div class="child child-thin">
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>6</h1></div>
342             </div>
343             <div class="child">
344                 <img class="corner top-left" src="images/corner.svg"></img>
345                 <img class="corner top-right" src="images/corner.svg"></img>
346                 <img class="corner bottom-left" src="images/corner.svg"></img>
347                 <img class="corner bottom-right" src="images/corner.svg"></img>
348                 <div class="label"><h1>7</h1></div>
349             </div>
350         </div>
351         <p>The CSS for the above container is:</p>
352         <pre>-webkit-scroll-snap-type: mandatory;</pre>
353         <p>The CSS for each of the container&rsquo;s children is:</p>
354         <pre>-webkit-scroll-snap-coordinate: 0% 0%;</pre>
355
356         <!-- Centered scroll snapping container using coordinates -->
357         <a name="scroll-snap-3"></a>
358         <h3>Here, we snap elements of different sizes to the center of the container.</h3>
359         <div class="container" id="snap-scroll-container-coordinates-centered">
360             <img src="images/bluecross.svg" class="snap-destination-centered"></img>
361             <div class="child">
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>1</h1></div>
367             </div>
368             <div class="child child-thin">
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>2</h1></div>
374             </div>
375             <div class="child">
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>3</h1></div>
381             </div>
382             <div class="child child-thin">
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>4</h1></div>
388             </div>
389             <div class="child">
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>5</h1></div>
395             </div>
396             <div class="child child-thin">
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>6</h1></div>
402             </div>
403             <div class="child">
404                 <img class="corner top-left" src="images/corner.svg"></img>
405                 <img class="corner top-right" src="images/corner.svg"></img>
406                 <img class="corner bottom-left" src="images/corner.svg"></img>
407                 <img class="corner bottom-right" src="images/corner.svg"></img>
408                 <div class="label"><h1>7</h1></div>
409             </div>
410         </div>
411         <p>The CSS for the above container is:</p>
412         <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-destination: 50% 50%;</pre>
413         <p>The CSS for each of the container&rsquo;s children is:</p>
414         <pre>-webkit-scroll-snap-coordinate: 50% 50%;</pre>
415
416         <!-- Centered scroll snapping container in 2D -->
417         <a name="scroll-snap-4"></a>
418         <h3>This container shows centered scroll snapping in a 2D grid.</h3>
419         <div class="container" id="snap-scroll-container-2D">
420             <img src="images/1.png"/><img src="images/2.png"/><img src="images/3.png"/><img src="images/4.png"/><br>
421             <img src="images/5.png"/><img src="images/6.png"/><img src="images/7.png"/><img src="images/8.png"/><br>
422             <img src="images/9.png"/><img src="images/10.png"/><img src="images/11.png"/><img src="images/12.png"/><br>
423             <img src="images/13.png"/><img src="images/14.png"/><img src="images/15.png"/><img src="images/16.png"/>
424         </div>
425         <p>The CSS for the above container is:</p>
426         <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-destination: 50% 50%;</pre>
427         <p>The CSS for each of the container&rsquo;s children is:</p>
428         <pre>-webkit-scroll-snap-coordinate: 50% 50%;</pre>
429
430         <!-- Centered scroll snapping container in 2D, rotated -->
431         <a name="scroll-snap-5"></a>
432         <h3>This example takes the 2D scroll snapping grid above and rotates it by 30 degrees.</h3>
433         <div class="container" id="snap-scroll-container-2D-rotated">
434             <img src="images/1.png"/><img src="images/2.png"/><img src="images/3.png"/><img src="images/4.png"/><br>
435             <img src="images/5.png"/><img src="images/6.png"/><img src="images/7.png"/><img src="images/8.png"/><br>
436             <img src="images/9.png"/><img src="images/10.png"/><img src="images/11.png"/><img src="images/12.png"/><br>
437             <img src="images/13.png"/><img src="images/14.png"/><img src="images/15.png"/><img src="images/16.png"/>
438         </div>
439         <p>The CSS for the above container is:</p>
440         <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-destination: 50% 50%;<br>-webkit-transform: rotate(30deg);</pre>
441         <p>The CSS for each of the container&rsquo;s children is:</p>
442         <pre>-webkit-scroll-snap-coordinate: 50% 50%;</pre>
443
444         <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>
445     </body>
446 </html>