Merge branch 'master' of https://github.com/zxuqian/html-css-examples

add scroll based animation example, from the shop
zxuqian · Mar 14, 2024 · 68581e5 · 68581e5
2 parents 9b0592d + 62a26d5
commit 68581e5
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 0 deletions.
diff --git a/51-css-scroll-based-animation/.vscode/settings.json b/51-css-scroll-based-animation/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/51-css-scroll-based-animation/index.html b/51-css-scroll-based-animation/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <style>
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+        background-color: transparent;
+      }
+
+      main {
+        background-color: hsl(209, 100%, 50%);
+        width: 100vw;
+        height: calc(100vh * 3);
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        justify-items: center;
+
+        perspective: 1000px;
+      }
+
+      .box {
+        margin-top: 50vh;
+        background-color: hsl(40, 100%, 50%);
+        width: 300px;
+        height: 300px;
+        animation: scaleAndFlip linear;
+        animation-timeline: scroll(root block);
+        transform-style: preserve-3d;
+      }
+
+      .box2 {
+        background-color: hsl(60, 100%, 50%);
+      }
+
+      @keyframes scaleAndFlip {
+        0% {
+          scale: 1;
+          rotate: x 0deg;
+        }
+        100% {
+          scale: 4;
+          rotate: x 360deg;
+          opacity: 0.1;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <div class="box box1"></div>
+      <div class="box box2"></div>
+    </main>
+  </body>
+</html>