docs: create development demo page

yitengjun · Dec 30, 2022 · 69c8565 · 69c8565
1 parent 9e7f017
commit 69c8565
Show file tree

Hide file tree

Showing 5 changed files with 340 additions and 0 deletions.
diff --git a/demo/css/reset.css b/demo/css/reset.css
@@ -0,0 +1,91 @@
+/*! destyle.css v4.0.0 | MIT License | https://github.com/nicolas-cusan/destyle.css */
+
+/* Reset box-model and set borders */
+/* ============================================ */
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border-style: solid;
+  border-width: 0;
+}
+
+/* Document */
+/* ============================================ */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ * 3. Remove gray overlay on links for iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -webkit-tap-highlight-color: transparent; /* 3*/
+}
+
+/* Sections */
+/* ============================================ */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/* Lists (enumeration) */
+/* ============================================ */
+
+ul,
+ol {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+  text-decoration: none;
+  color: inherit;
+}
+
+/* Replaced content */
+/* ============================================ */
+
+/**
+ * Prevent vertical alignment issues.
+ */
+
+svg,
+img,
+embed,
+object,
+iframe {
+  vertical-align: bottom;
+}
+
+/**
+ * Correct cursors for clickable elements.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  cursor: pointer;
+}
+
+button:disabled,
+[type="button"]:disabled,
+[type="reset"]:disabled,
+[type="submit"]:disabled {
+  cursor: default;
+}
diff --git a/demo/css/style.css b/demo/css/style.css
@@ -0,0 +1,112 @@
+ body {
+      padding-top: 10vh;
+      padding-bottom: 100vh;
+    }
+
+    .container {
+      max-width: 85%;
+      margin: 0 auto;
+    }
+
+    .buttons {
+      position: fixed;
+      padding: 2.5rem;
+      bottom: 0;
+      right: 0;
+    }
+
+    h2 {
+      margin-top: 10rem;
+      margin-bottom: 1rem;
+    }
+
+    img {
+      width: 700px;
+      height: 500px;
+      display: block;
+      object-fit: cover;
+    }
+
+    video {
+      height: 500px;
+      object-fit: cover;
+      vertical-align: bottom;
+    }
+
+    .border-radius {
+      border-radius: 5em;
+    }
+
+    .margin-auto {
+      display: block;
+      margin: 0 auto;
+      width: 500px;
+    }
+
+    .margin-left-auto {
+      display: block;
+      margin-left: auto;
+      width: 500px;
+    }
+
+    .bg {
+      background-size: cover;
+      background-image: url(https://images.unsplash.com/photo-1670808951552-9d804d0033ef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80);
+      height: 500px;
+    }
+
+    .absolute-wrapper {
+      background-color: #f8f8f8;
+      position: relative;
+      width: 100%;
+      height: 800px;
+      border: 1px solid;
+    }
+
+    .absolute {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      display: block;
+      width: 70%;
+      height: 500px;
+    }
+
+    .absoluteTransformCenter {
+      width: 70%;
+      height: 500px;
+      display: block;
+      left: 50%;
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .grid-wrapper {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+      gap: 10px;
+      grid-auto-flow: dense;
+      margin: 0 auto;
+      max-width: 50%;
+    }
+
+    .grid-wrapper img {
+      display: block;
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+    }
+
+    .grid-wrapper>li:nth-child(2),
+    .grid-wrapper>li:nth-child(4),
+    .grid-wrapper>li:nth-child(5),
+    .grid-wrapper>li:nth-child(8) {
+      grid-column-end: span 2;
+    }
+
+    @media screen and (max-width: 768px) {
+    img {
+      width: 100%;
+    }
+    }
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Ukiyo.js Demo</title>
+  <link rel="stylesheet" href="./css/reset.css">
+  <link rel="stylesheet" href="./css/style.css">
+</head>
+<body>
+
+  <div class="container">
+    <div class="row">
+      <!--img element-->
+      <h2>img element</h2>
+      <img class="ukiyo" src="https://images.unsplash.com/photo-1670808951552-9d804d0033ef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80">
+
+      <!--div + background-image-->
+      <h2>background-image</h2>
+      <div class="ukiyo bg"></div>
+
+      <!--picture element-->
+      <h2>picture element</h2>
+      <picture>
+        <source srcset="https://images.unsplash.com/photo-1661961112835-ca6f5811d2af?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&h=500&q=80" media="(min-width: 1000px)">
+        <source srcset="https://images.unsplash.com/photo-1647849754185-2b52aec8458b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&h=500&q=80" media="(min-width: 700px)">
+        <img class="ukiyo" src="https://images.unsplash.com/photo-1504051771394-dd2e66b2e08f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&h=500&q=80">
+      </picture>
+
+      <!--video element-->
+      <h2>video element</h2>
+      <video class="ukiyo" autoplay muted loop playsinline poster="">
+        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
+        <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
+        Your browser does not support HTML5 video.
+      </video>
+
+      <!--(option) data-u-scale scale:2-->
+      <h2>(option) data-u-scale scale: 1.7</h2>
+      <img class="ukiyo" data-u-scale="1.7" src="https://images.unsplash.com/photo-1670808951552-9d804d0033ef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80">
+
+      <!--(option) data-u-speed speed:0.7-->
+      <h2>(option) data-u-speed speed: 0.7</h2>
+      <img class="ukiyo" data-u-speed="0.7" src="https://images.unsplash.com/photo-1670808951552-9d804d0033ef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80">
+
+      <!--(option) data-u-speed speed:0.7-->
+      <h2>(option) data-u-willchange</h2>
+      <img class="ukiyo" data-u-willchange src="https://images.unsplash.com/photo-1670808951552-9d804d0033ef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80">
+
+      <h2>(option) data-u-wrapper="customName"</h2>
+      <img class="ukiyo" data-u-wrapper="customName" src="https://images.unsplash.com/photo-1670808951552-9d804d0033ef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80">
+
+      <!--with border-radius-->
+      <h2>(style) with border-radius</h2>
+      <img class="ukiyo border-radius" src="https://images.unsplash.com/photo-1670808951552-9d804d0033ef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80">
+
+      <!--[style]margin: 0 auto-->
+      <h2>(style) with margin: auto</h2>
+      <img class="ukiyo margin-auto" src="https://images.unsplash.com/photo-1670808951552-9d804d0033ef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80">
+
+      <h2>(style) with margin-left: auto</h2>
+      <img class="ukiyo margin-left-auto" src="https://images.unsplash.com/photo-1670808951552-9d804d0033ef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80">
+
+
+      <!--[style]position: absolute-->
+      <h2>(style) with position: absolute</h2>
+      <div class="absolute-wrapper">
+        <img class="ukiyo absolute" src="https://images.unsplash.com/photo-1670808951552-9d804d0033ef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80">
+      </div>
+
+      <!--[style]position: absolute-->
+      <h2>(style) with position: absolute + transform: translate(-50%, -50%)</h2>
+      <div class="absolute-wrapper">
+        <img class="ukiyo absoluteTransformCenter" src="https://images.unsplash.com/photo-1670808951552-9d804d0033ef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80">
+      </div>
+
+      <!--[style] CSS Grid-->
+      <h2>(style) with CSS Grid</h2>
+      <ul class="grid-wrapper">
+        <li>
+          <img class="ukiyo" src="https://images.unsplash.com/photo-1670808951552-9d804d0033ef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80">
+        </li>
+        <li>
+          <img class="ukiyo" src="https://images.unsplash.com/photo-1670808951552-9d804d0033ef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80">
+        </li>
+        <li>
+          <img class="ukiyo" src="https://images.unsplash.com/photo-1670808951552-9d804d0033ef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80">
+        </li>
+        <li>
+          <img class="ukiyo" src="https://images.unsplash.com/photo-1670808951552-9d804d0033ef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80">
+        </li>
+        <li>
+          <img class="ukiyo" src="https://images.unsplash.com/photo-1670808951552-9d804d0033ef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80">
+        </li>
+        <li>
+          <img class="ukiyo" src="https://images.unsplash.com/photo-1670808951552-9d804d0033ef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80">
+        </li>
+        <li>
+          <img class="ukiyo" src="https://images.unsplash.com/photo-1670808951552-9d804d0033ef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80">
+        </li>
+        <li>
+          <img class="ukiyo" src="https://images.unsplash.com/photo-1670808951552-9d804d0033ef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80">
+        </li>
+        <li>
+          <img class="ukiyo" src="https://images.unsplash.com/photo-1670808951552-9d804d0033ef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80">
+        </li>
+        <li>
+          <img class="ukiyo" src="https://images.unsplash.com/photo-1670808951552-9d804d0033ef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80">
+        </li>
+      </ul>
+
+    </div>
+  </div>
+
+  <div class="buttons">
+    <button class="button--reset" type="button">reset</button>
+    <button class="button--destroy" type="button">destroy</button>
+  </div>
+
+  <script src="./ukiyo.min.js"></script>
+  <script>
+    const parallax = new Ukiyo(".ukiyo");
+    const resetButton = document.querySelector('.button--reset');
+    const destroyButton = document.querySelector('.button--destroy');
+
+    resetButton.addEventListener('click', event => {
+      parallax.reset()
+    });
+    destroyButton.addEventListener('click', event => {
+      parallax.destroy()
+    });
+  </script>
+</body>
+</html>
diff --git a/demo/ukiyo.min.js b/demo/ukiyo.min.js
diff --git a/demo/ukiyo.min.js.map b/demo/ukiyo.min.js.map