Add 'with-javascript/assets/main/pages/animation.html'

2021-03-18 18:22:19 +00:00 · 2021-03-18 18:22:19 +00:00 · ced155c147
parent 64816c5c7b
commit ced155c147
1 changed files with 38 additions and 0 deletions
--- a/with-javascript/assets/main/pages/animation.html
+++ b/with-javascript/assets/main/pages/animation.html
@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <script>
+            // Wrap every letter in a span
+var textWrapper = document.querySelector('.ml7 .letters');
+textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
+
+anime.timeline({loop: true})
+  .add({
+    targets: '.ml7 .letter',
+    translateY: ["1.1em", 0],
+    translateX: ["0.55em", 0],
+    translateZ: 0,
+    rotateZ: [180, 0],
+    duration: 750,
+    easing: "easeOutExpo",
+    delay: (el, i) => 50 * i
+  }).add({
+    targets: '.ml7',
+    opacity: 0,
+    duration: 1000,
+    easing: "easeOutExpo",
+    delay: 1000
+  });
+    </script>
+    <head>
+        <link rel="stylesheet" href="animation.css">
+    </head>
+    <body>
+    <h1 class="ml7">
+        <span class="text-wrapper">
+    <span class="letters">Reality is broken</span>
+    </span>
+    </h1>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
+    </body>
+</html>