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>