add fidget demo

joshparkerj · Dec 29, 2021 · cb0008a · cb0008a
1 parent 235a99c
commit cb0008a
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 11 deletions.
diff --git a/beatify/beat.css b/beatify/beat.css
@@ -1,27 +1,74 @@
 body {
+  background-color: black;
+  position: fixed;
+  inset: 0;
+}
+
+h1 {
+  margin: 8em;
   animation-duration: 3s;
   animation-name: beat;
   animation-iteration-count: infinite;
-  background-color: black;
-  padding: 50px 5px;
+  color: gold;
+  text-align: center;
+}
+
+p {
+  color: white;
+  position: fixed;
+  inset: 20%;
+}
+
+.ease {
+  animation-timing-function: ease;
+}
+
+.linear {
+  animation-timing-function: linear;
+}
+
+.beat-effect {
+  position: relative;
+}
+
+.beat-effect::before {
+  content: attr(title);
+  opacity: 0;
+}
+
+.beat-effect::after {
   display: inline-block;
-  margin: 250px 5px;
+  text-align: center;
+  vertical-align: middle;
+  line-height: inherit;
+  content: attr(title);
+  animation-duration: 3s;
+  animation-name: beat;
+  animation-iteration-count: infinite;
+  position: absolute;
+  inset: 0;
+  height: inherit;
 }
 
 @keyframes beat {
   from {
-    transform: rotate(0);
-  }
-
-  25% {
-    transform: rotate(360deg);
+    /* font-size: xx-small; */
+    font-stretch: condensed;
+    /* letter-spacing: 0.5em;
+    line-height: 3; */
   }
 
   50% {
-    transform: translateY(0);
+    font-stretch: normal;
+    /* font-size: large; */
+    /* letter-spacing: normal;
+    line-height: normal; */
   }
 
   to {
-    transform: translateY(0);
+    font-stretch: condensed;
+    /* font-size: xx-small; */
+    /* letter-spacing: 0.5em;
+    line-height: 3; */
   }
 }
diff --git a/beatify/beat.html b/beatify/beat.html
@@ -2,4 +2,8 @@
   <link href='./beat.css' rel='stylesheet' type='text/css' />
 </head>
 
-<body>LOADING</body>
+<body>
+  <!-- <h1 class="ease">LOADING</h1>
+  <h1 class="linear">LOADING</h1> -->
+  <p>This is the text that contains the <span class="beat-effect" title="beat"></span> that I really like haha.</p>
+</body>
diff --git a/text-effect/fidget.html b/text-effect/fidget.html
@@ -0,0 +1,52 @@
+<!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>Document</title>
+  <style>
+    .fidget > span {
+      animation-name: fidget;
+      animation-iteration-count: infinite;
+      display: inline-block;
+    }
+
+    @keyframes fidget {
+      from {
+        transform: rotate(0);
+      }
+
+      35% {
+        transform: rotate(0);
+      }
+
+      50% {
+        transform: rotate(360deg);
+      }
+
+      65% {
+        transform: rotate(360deg);
+      }
+
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <p>This is where we like to <span
+      class="fidget"><span>f</span><span>i</span><span>d</span><span>g</span><span>e</span><span>t</span></span> all the
+    time haha</p>
+    <script>
+      const fidgetChars = [...document.querySelectorAll('.fidget > span')];
+      fidgetChars.forEach((char) => {
+        char.setAttribute('style', `animation-duration: ${4 + Math.random() * 8}s; animation-delay: ${Math.random() * 1.6}s;`);
+      });
+    </script>
+</body>
+
+</html>