Title: [189755] trunk/Websites/webkit.org
Revision
189755
Author
wenson_hs...@apple.com
Date
2015-09-14 16:21:20 -0700 (Mon, 14 Sep 2015)

Log Message

Add scroll snap demo directory and files.

* demos/scroll-snap/images/1.png: Added.
* demos/scroll-snap/images/10.png: Added.
* demos/scroll-snap/images/11.png: Added.
* demos/scroll-snap/images/12.png: Added.
* demos/scroll-snap/images/13.png: Added.
* demos/scroll-snap/images/14.png: Added.
* demos/scroll-snap/images/15.png: Added.
* demos/scroll-snap/images/16.png: Added.
* demos/scroll-snap/images/2.png: Added.
* demos/scroll-snap/images/3.png: Added.
* demos/scroll-snap/images/4.png: Added.
* demos/scroll-snap/images/5.png: Added.
* demos/scroll-snap/images/6.png: Added.
* demos/scroll-snap/images/7.png: Added.
* demos/scroll-snap/images/8.png: Added.
* demos/scroll-snap/images/9.png: Added.
* demos/scroll-snap/images/bluecross.svg: Added.
* demos/scroll-snap/images/corner.svg: Added.
* demos/scroll-snap/index.html: Added.

Modified Paths

Added Paths

Diff

Modified: trunk/Websites/webkit.org/ChangeLog (189754 => 189755)


--- trunk/Websites/webkit.org/ChangeLog	2015-09-14 22:40:29 UTC (rev 189754)
+++ trunk/Websites/webkit.org/ChangeLog	2015-09-14 23:21:20 UTC (rev 189755)
@@ -1,3 +1,27 @@
+2015-09-14  Wenson Hsieh  <wenson_hs...@apple.com>
+
+        Add scroll snap demo directory and files.
+
+        * demos/scroll-snap/images/1.png: Added.
+        * demos/scroll-snap/images/10.png: Added.
+        * demos/scroll-snap/images/11.png: Added.
+        * demos/scroll-snap/images/12.png: Added.
+        * demos/scroll-snap/images/13.png: Added.
+        * demos/scroll-snap/images/14.png: Added.
+        * demos/scroll-snap/images/15.png: Added.
+        * demos/scroll-snap/images/16.png: Added.
+        * demos/scroll-snap/images/2.png: Added.
+        * demos/scroll-snap/images/3.png: Added.
+        * demos/scroll-snap/images/4.png: Added.
+        * demos/scroll-snap/images/5.png: Added.
+        * demos/scroll-snap/images/6.png: Added.
+        * demos/scroll-snap/images/7.png: Added.
+        * demos/scroll-snap/images/8.png: Added.
+        * demos/scroll-snap/images/9.png: Added.
+        * demos/scroll-snap/images/bluecross.svg: Added.
+        * demos/scroll-snap/images/corner.svg: Added.
+        * demos/scroll-snap/index.html: Added.
+
 2015-09-03  Matt Baker  <mattba...@apple.com>
 
         Added and updated assets for Introducing the Rendering Frames Timeline blog post.

Added: trunk/Websites/webkit.org/demos/scroll-snap/images/1.png


(Binary files differ)
Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/1.png ___________________________________________________________________

Added: svn:mime-type

Added: trunk/Websites/webkit.org/demos/scroll-snap/images/10.png


(Binary files differ)
Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/10.png ___________________________________________________________________

Added: svn:mime-type

Added: trunk/Websites/webkit.org/demos/scroll-snap/images/11.png


(Binary files differ)
Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/11.png ___________________________________________________________________

Added: svn:mime-type

Added: trunk/Websites/webkit.org/demos/scroll-snap/images/12.png


(Binary files differ)
Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/12.png ___________________________________________________________________

Added: svn:mime-type

Added: trunk/Websites/webkit.org/demos/scroll-snap/images/13.png


(Binary files differ)
Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/13.png ___________________________________________________________________

Added: svn:mime-type

Added: trunk/Websites/webkit.org/demos/scroll-snap/images/14.png


(Binary files differ)
Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/14.png ___________________________________________________________________

Added: svn:mime-type

Added: trunk/Websites/webkit.org/demos/scroll-snap/images/15.png


(Binary files differ)
Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/15.png ___________________________________________________________________

Added: svn:mime-type

Added: trunk/Websites/webkit.org/demos/scroll-snap/images/16.png


(Binary files differ)
Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/16.png ___________________________________________________________________

Added: svn:mime-type

Added: trunk/Websites/webkit.org/demos/scroll-snap/images/2.png


(Binary files differ)
Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/2.png ___________________________________________________________________

Added: svn:mime-type

Added: trunk/Websites/webkit.org/demos/scroll-snap/images/3.png


(Binary files differ)
Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/3.png ___________________________________________________________________

Added: svn:mime-type

Added: trunk/Websites/webkit.org/demos/scroll-snap/images/4.png


(Binary files differ)
Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/4.png ___________________________________________________________________

Added: svn:mime-type

Added: trunk/Websites/webkit.org/demos/scroll-snap/images/5.png


(Binary files differ)
Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/5.png ___________________________________________________________________

Added: svn:mime-type

Added: trunk/Websites/webkit.org/demos/scroll-snap/images/6.png


(Binary files differ)
Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/6.png ___________________________________________________________________

Added: svn:mime-type

Added: trunk/Websites/webkit.org/demos/scroll-snap/images/7.png


(Binary files differ)
Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/7.png ___________________________________________________________________

Added: svn:mime-type

Added: trunk/Websites/webkit.org/demos/scroll-snap/images/8.png


(Binary files differ)
Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/8.png ___________________________________________________________________

Added: svn:mime-type

Added: trunk/Websites/webkit.org/demos/scroll-snap/images/9.png


(Binary files differ)
Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/9.png ___________________________________________________________________

Added: svn:mime-type

Added: trunk/Websites/webkit.org/demos/scroll-snap/images/bluecross.svg (0 => 189755)


--- trunk/Websites/webkit.org/demos/scroll-snap/images/bluecross.svg	                        (rev 0)
+++ trunk/Websites/webkit.org/demos/scroll-snap/images/bluecross.svg	2015-09-14 23:21:20 UTC (rev 189755)
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <polygon fill="#6666FF" points="10,0 15,0 15,10 26,10 26,15 15,15 15,26 10,26 10,15 0,15 0,10 10,10"></polygon>
+</svg>
\ No newline at end of file

Added: trunk/Websites/webkit.org/demos/scroll-snap/images/corner.svg (0 => 189755)


--- trunk/Websites/webkit.org/demos/scroll-snap/images/corner.svg	                        (rev 0)
+++ trunk/Websites/webkit.org/demos/scroll-snap/images/corner.svg	2015-09-14 23:21:20 UTC (rev 189755)
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <polygon points="0,0 50,0 50,5 5,5 5,50 0,50"></polygon>
+</svg>
\ No newline at end of file

Added: trunk/Websites/webkit.org/demos/scroll-snap/index.html (0 => 189755)


--- trunk/Websites/webkit.org/demos/scroll-snap/index.html	                        (rev 0)
+++ trunk/Websites/webkit.org/demos/scroll-snap/index.html	2015-09-14 23:21:20 UTC (rev 189755)
@@ -0,0 +1,433 @@
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <title>Scroll Snapping Examples</title>
+        <style>
+        body {
+            line-height: 1.5;
+            margin: 2em 2em;
+            padding: 0;
+            background-color: #E2E6F5;
+        }
+
+        pre {
+            padding: 1em 3em;
+            border: 1px solid #ccc;
+            border-radius: 10px;
+            background-color: #ddd;
+        }
+
+        code {
+            font-size: 115%;
+            font-weight: bold;
+            color: #0F5426;
+        }
+
+        p > span {
+            color: #6666FF;
+        }
+
+        h1, h3, p {
+            font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+            font-size: 120%;
+        }
+
+        h1 {
+            font-size: 40px;
+        }
+
+        p {
+            font-size: 20px;
+        }
+
+        h3 {
+            font-size: 25px;
+            margin-top: 10vh;
+        }
+
+        .corner {
+            fill: black;
+            background: transparent;
+            position: absolute;
+            width: 50px;
+            height: 50px;
+        }
+
+        .child {
+            width: 400px;
+            height: 400px;
+            position: relative;
+            background-color: #F0F0F0;
+            display: inline-block;
+            margin-right: -4px;
+            border: 1px solid black;
+        }
+
+        .label {
+            width: 200px;
+            height: 200px;
+            border-radius: 25%;
+            background-color: white;
+            margin: 100px auto 0 auto;
+        }
+
+        .label > h1 {
+            font-size: 80px;
+            padding-left: calc(50% - 22px);
+            padding-top: calc(50% - 60px);
+        }
+
+        .top-right {
+            left: 350px;
+            -ms-transform: rotate(90deg);
+            -webkit-transform: rotate(90deg);
+            transform: rotate(90deg);
+        }
+
+        .bottom-left {
+            top: 350px;
+            -ms-transform: rotate(270deg);
+            -webkit-transform: rotate(270deg);
+            transform: rotate(270deg);
+        }
+
+        .bottom-right {
+            top: 350px;
+            left: 350px;
+            -ms-transform: rotate(180deg);
+            -webkit-transform: rotate(180deg);
+            transform: rotate(180deg);
+        }
+
+        .child-thin {
+            width: 300px;
+        }
+
+        .child-thin > .top-right {
+            left: 250px;
+        }
+        
+        .child-thin > .bottom-right {
+            left: 250px;
+        }
+
+        .container {
+            width: 402px;
+            height: 410px;
+            overflow-x: auto;
+            overflow-y: hidden;
+            white-space: nowrap;
+            -webkit-overflow-scrolling: touch;
+            margin: 10vh auto 0 auto;
+        }
+
+        #snap-scroll-container {
+            -webkit-scroll-snap-type: mandatory;
+            scroll-snap-type: mandatory;
+            -webkit-scroll-snap-points-x: repeat(100%);
+            scroll-snap-points-x: repeat(100%);
+        }
+
+        #snap-scroll-container-coordinates {
+            -webkit-scroll-snap-type: mandatory;
+            scroll-snap-type: mandatory;
+        }
+
+        #snap-scroll-container-coordinates > .child {
+            -webkit-scroll-snap-coordinate: 0% 0%;
+            scroll-snap-coordinate: 0% 0%;
+        }
+
+        #snap-scroll-container-coordinates-centered {
+            width: 402px;
+            -webkit-scroll-snap-type: mandatory;
+            scroll-snap-type: mandatory;
+            -webkit-scroll-snap-destination: 50% 50%;
+            scroll-snap-destination: 50% 50%;
+        }
+
+        #snap-scroll-container-coordinates-centered > .child {
+            -webkit-scroll-snap-coordinate: 50% 50%;
+            scroll-snap-coordinate: 50% 50%;
+        }
+
+        .snap-destination,
+        .snap-destination-centered {
+            width: 25px;
+            height: 25px;
+            z-index: 1;
+            position: absolute;
+        }
+
+        .snap-destination {
+            margin: -10px 0 0 -10px;
+        }
+
+        .snap-destination-centered {
+            margin: 187px 0 0 187px;
+        }
+
+        .snap-point {
+            width: 25px;
+            height: 25px;
+            -ms-transform: rotate(45deg);
+            -webkit-transform: rotate(45deg);
+            transform: rotate(45deg);
+            z-index: 1;
+            position: absolute;
+            margin: -10px 0 0 -10px;
+        }
+
+        #snap-scroll-container-2D,
+        #snap-scroll-container-2D-rotated {
+            -webkit-scroll-snap-type: mandatory;
+            scroll-snap-type: mandatory;
+            -webkit-scroll-snap-destination: 50% 50%;
+            scroll-snap-destination: 50% 50%;
+            overflow: scroll;
+            width: 500px;
+            height: 500px;
+            border-radius: 50px;
+        }
+
+        #snap-scroll-container-2D > img,
+        #snap-scroll-container-2D-rotated > img {
+            -webkit-scroll-snap-coordinate: 50% 50%;
+            scroll-snap-coordinate: 50% 50%;
+            width: 400px;
+            height: 400px;
+        }
+
+        #snap-scroll-container-2D-rotated {
+            margin-top: 20vh;
+            margin-bottom: 20vh;
+            -ms-transform: rotate(30deg);
+            -webkit-transform: rotate(30deg);
+            transform: rotate(30deg);
+        }
+
+        #nasa {
+            font-size: 16px;
+        }
+        </style>
+    </head>
+
+    <body>
+        <h1>The <code>scroll-snap-*</code> Properties.</h1>
+        <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>
+        <!-- Normal scrolling container (no snapping) -->
+        <h3 style="margin-top: 5vh;">This first container does not have any scroll snapping behavior.</h3>
+        <div class="container">
+            <div class="child">
+                <img class="corner top-left" src=""
+                <img class="corner top-right" src=""
+                <img class="corner bottom-left" src=""
+                <img class="corner bottom-right" src=""
+                <div class="label"><h1>1</h1></div>
+            </div>
+            <div class="child">
+                <img class="corner top-left" src=""
+                <img class="corner top-right" src=""
+                <img class="corner bottom-left" src=""
+                <img class="corner bottom-right" src=""
+                <div class="label"><h1>2</h1></div>
+            </div>
+            <div class="child">
+                <img class="corner top-left" src=""
+                <img class="corner top-right" src=""
+                <img class="corner bottom-left" src=""
+                <img class="corner bottom-right" src=""
+                <div class="label"><h1>3</h1></div>
+            </div>
+            <div class="child">
+                <img class="corner top-left" src=""
+                <img class="corner top-right" src=""
+                <img class="corner bottom-left" src=""
+                <img class="corner bottom-right" src=""
+                <div class="label"><h1>4</h1></div>
+            </div>
+        </div>
+
+        <!-- Simple scroll snapping container (using repeat) -->
+        <h3>This second container shows what basic scroll snapping can do for us.</h3>
+        <div class="container" id="snap-scroll-container">
+            <img src="" class="snap-destination"></img>
+            <div class="child">
+                <img class="corner top-left" src=""
+                <img class="corner top-right" src=""
+                <img class="corner bottom-left" src=""
+                <img class="corner bottom-right" src=""
+                <div class="label"><h1>1</h1></div>
+            </div>
+            <div class="child">
+                <img class="corner top-left" src=""
+                <img class="corner top-right" src=""
+                <img class="corner bottom-left" src=""
+                <img class="corner bottom-right" src=""
+                <div class="label"><h1>2</h1></div>
+            </div>
+            <div class="child">
+                <img class="corner top-left" src=""
+                <img class="corner top-right" src=""
+                <img class="corner bottom-left" src=""
+                <img class="corner bottom-right" src=""
+                <div class="label"><h1>3</h1></div>
+            </div>
+            <div class="child">
+                <img class="corner top-left" src=""
+                <img class="corner top-right" src=""
+                <img class="corner bottom-left" src=""
+                <img class="corner bottom-right" src=""
+                <div class="label"><h1>4</h1></div>
+            </div>
+        </div>
+        <p>The CSS for the above container is:</p>
+        <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-points-x: repeat(100%);</pre>
+
+        <!-- Scroll snapping container using coordinates -->
+        <h3>This next container snaps to elements of different sizes when scrolling.</h3>
+        <div class="container" id="snap-scroll-container-coordinates">
+            <img src="" class="snap-destination"></img>
+            <div class="child">
+                <img class="corner top-left" src=""
+                <img class="corner top-right" src=""
+                <img class="corner bottom-left" src=""
+                <img class="corner bottom-right" src=""
+                <div class="label"><h1>1</h1></div>
+            </div>
+            <div class="child child-thin">
+                <img class="corner top-left" src=""
+                <img class="corner top-right" src=""
+                <img class="corner bottom-left" src=""
+                <img class="corner bottom-right" src=""
+                <div class="label"><h1>2</h1></div>
+            </div>
+            <div class="child">
+                <img class="corner top-left" src=""
+                <img class="corner top-right" src=""
+                <img class="corner bottom-left" src=""
+                <img class="corner bottom-right" src=""
+                <div class="label"><h1>3</h1></div>
+            </div>
+            <div class="child child-thin">
+                <img class="corner top-left" src=""
+                <img class="corner top-right" src=""
+                <img class="corner bottom-left" src=""
+                <img class="corner bottom-right" src=""
+                <div class="label"><h1>4</h1></div>
+            </div>
+            <div class="child">
+                <img class="corner top-left" src=""
+                <img class="corner top-right" src=""
+                <img class="corner bottom-left" src=""
+                <img class="corner bottom-right" src=""
+                <div class="label"><h1>5</h1></div>
+            </div>
+            <div class="child child-thin">
+                <img class="corner top-left" src=""
+                <img class="corner top-right" src=""
+                <img class="corner bottom-left" src=""
+                <img class="corner bottom-right" src=""
+                <div class="label"><h1>6</h1></div>
+            </div>
+            <div class="child">
+                <img class="corner top-left" src=""
+                <img class="corner top-right" src=""
+                <img class="corner bottom-left" src=""
+                <img class="corner bottom-right" src=""
+                <div class="label"><h1>7</h1></div>
+            </div>
+        </div>
+        <p>The CSS for the above container is:</p>
+        <pre>-webkit-scroll-snap-type: mandatory;</pre>
+        <p>The CSS for each of the container&rsquo;s children is:</p>
+        <pre>-webkit-scroll-snap-coordinate: 0% 0%;</pre>
+
+        <!-- Centered scroll snapping container using coordinates -->
+        <h3>Here, we snap elements of different sizes to the center of the container.</h3>
+        <div class="container" id="snap-scroll-container-coordinates-centered">
+            <img src="" class="snap-destination-centered"></img>
+            <div class="child">
+                <img class="corner top-left" src=""
+                <img class="corner top-right" src=""
+                <img class="corner bottom-left" src=""
+                <img class="corner bottom-right" src=""
+                <div class="label"><h1>1</h1></div>
+            </div>
+            <div class="child child-thin">
+                <img class="corner top-left" src=""
+                <img class="corner top-right" src=""
+                <img class="corner bottom-left" src=""
+                <img class="corner bottom-right" src=""
+                <div class="label"><h1>2</h1></div>
+            </div>
+            <div class="child">
+                <img class="corner top-left" src=""
+                <img class="corner top-right" src=""
+                <img class="corner bottom-left" src=""
+                <img class="corner bottom-right" src=""
+                <div class="label"><h1>3</h1></div>
+            </div>
+            <div class="child child-thin">
+                <img class="corner top-left" src=""
+                <img class="corner top-right" src=""
+                <img class="corner bottom-left" src=""
+                <img class="corner bottom-right" src=""
+                <div class="label"><h1>4</h1></div>
+            </div>
+            <div class="child">
+                <img class="corner top-left" src=""
+                <img class="corner top-right" src=""
+                <img class="corner bottom-left" src=""
+                <img class="corner bottom-right" src=""
+                <div class="label"><h1>5</h1></div>
+            </div>
+            <div class="child child-thin">
+                <img class="corner top-left" src=""
+                <img class="corner top-right" src=""
+                <img class="corner bottom-left" src=""
+                <img class="corner bottom-right" src=""
+                <div class="label"><h1>6</h1></div>
+            </div>
+            <div class="child">
+                <img class="corner top-left" src=""
+                <img class="corner top-right" src=""
+                <img class="corner bottom-left" src=""
+                <img class="corner bottom-right" src=""
+                <div class="label"><h1>7</h1></div>
+            </div>
+        </div>
+        <p>The CSS for the above container is:</p>
+        <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-destination: 50% 50%;</pre>
+        <p>The CSS for each of the container&rsquo;s children is:</p>
+        <pre>-webkit-scroll-snap-coordinate: 50% 50%;</pre>
+
+        <!-- Centered scroll snapping container in 2D -->
+        <h3>This container shows centered scroll snapping in a 2D grid.</h3>
+        <div class="container" id="snap-scroll-container-2D">
+            <img src="" src="" src="" src=""
+            <img src="" src="" src="" src=""
+            <img src="" src="" src="" src=""
+            <img src="" src="" src="" src=""
+        </div>
+        <p>The CSS for the above container is:</p>
+        <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-destination: 50% 50%;</pre>
+        <p>The CSS for each of the container&rsquo;s children is:</p>
+        <pre>-webkit-scroll-snap-coordinate: 50% 50%;</pre>
+
+        <!-- Centered scroll snapping container in 2D, rotated -->
+        <h3>This example takes the 2D scroll snapping grid above and rotates it by 30 degrees.</h3>
+        <div class="container" id="snap-scroll-container-2D-rotated">
+            <img src="" src="" src="" src=""
+            <img src="" src="" src="" src=""
+            <img src="" src="" src="" src=""
+            <img src="" src="" src="" src=""
+        </div>
+        <p>The CSS for the above container is:</p>
+        <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-destination: 50% 50%;<br>-webkit-transform: rotate(30deg);</pre>
+        <p>The CSS for each of the container&rsquo;s children is:</p>
+        <pre>-webkit-scroll-snap-coordinate: 50% 50%;</pre>
+
+        <p id="nasa">Images from <a target="_blank" href="" image of the day gallery</a>.</p>
+    </body>
+</html>
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to