a path example

jsnkuhn · Jan 4, 2021 · 8b7b335 · 8b7b335
1 parent b1f7509
commit 8b7b335
Showing 1 changed file with 166 additions and 0 deletions.
diff --git a/path/offset-path.html b/path/offset-path.html
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>path() example with offset-path</title>
+
+  <style>
+    body {
+      font: 1.2em Helvetica, Arial, sans-serif;
+      margin: 20px;
+      padding: 0;
+    }
+
+    textarea {
+      font-family: monospace;
+      display: block;
+      margin-bottom: 10px;
+      height: 160px;
+      background-color: #F4F7F8;
+      border: none;
+      border-left: 6px solid #558ABB;
+      color: #4D4E53;
+      width: 90%;
+      max-width: 700px;
+      padding: 10px 10px 0px;
+      font-size: 90%;
+    }
+
+    textarea:nth-of-type(1) {
+      height: 80px
+    }
+
+    textarea:nth-of-type(2) {
+      height: 160px
+    }
+
+    .playable-buttons {
+      text-align: right;
+      width: 90%;
+      max-width: 700px;
+      padding: 5px 10px 5px 26px;
+      font-size: 100%;
+    }
+
+    section {
+      width: 90%;
+      max-width: 700px;
+      border: 1px solid #4D4E53;
+      border-radius: 2px;
+      padding: 10px 14px 10px 10px;
+      margin-bottom: 10px;
+    }
+
+    section input {
+      display: block;
+      margin: 5px;
+    }
+    img {
+    max-width: 100%;
+}
+
+  </style>
+  <style class="editable">
+    .parent {
+      width: 200px;
+      height: 200px;
+      border: 4px solid rgba(0,0,0,0.1);
+      border-radius: 50%;
+      margin: 40px;
+    }
+
+    .item {
+      width: 50px;
+      height: 50px;
+      background-color: red;
+      border-radius: 50%;
+      offset-path: path("M100,0 A100,100 0 1,1 100,200 A100,100 0 1,1 100,0");
+    }
+  </style>
+</head>
+
+<body>
+  <section>
+    <div class="container">
+        <div class="parent">
+            <div class="item"></div>
+        </div>
+
+        <button id="button">animate</button>  
+    </div>
+
+  </section>
+  <textarea class="playable-css" style="height: 300px">
+.parent {
+  width: 200px;
+  height: 200px;
+  border: 4px solid rgba(0,0,0,0.1);
+  border-radius: 50%;
+  margin: 40px;
+}
+
+.item {
+  width: 50px;
+  height: 50px;
+  background-color: red;
+  border-radius: 50%;
+  offset-path: path("M100,0 A100,100 0 1,1 100,200 A100,100 0 1,1 100,0");
+}
+      </textarea>
+  <textarea id="code" class="playable-html">
+<div class="container">
+    <div class="parent">
+      <div class="item"></div>
+    </div>     
+    <button id="button">animate</button>  
+</div>
+      </textarea>
+  <div class="playable-buttons">
+    <input id="reset" type="button" value="Reset">
+  </div>
+</body>
+<script>
+  var section = document.querySelector('section');
+  var editable = document.querySelector('.editable');
+  var textareaHTML = document.querySelector('.playable-html');
+  var textareaCSS = document.querySelector('.playable-css');
+  var reset = document.getElementById('reset');
+  var htmlCode = textareaHTML.value;
+  var cssCode = textareaCSS.value;
+
+  function fillCode() {
+    editable.innerHTML = textareaCSS.value;
+    section.innerHTML = textareaHTML.value;
+
+    let btn = document.getElementById("button");
+
+    btn.addEventListener("click", function (evt) {
+    document.querySelector(".parent > .item").animate([
+	  { offsetDistance: 0 },
+	  { offsetDistance: '100%' }
+	], 
+	{
+	  duration: 1200,
+	  easing: 'linear',
+	  iterations: 3,
+	  fill: 'forwards'
+	} 
+  )
+});
+  }
+
+  reset.addEventListener('click', function () {
+    textareaHTML.value = htmlCode;
+    textareaCSS.value = cssCode;
+    fillCode();
+  });
+
+  textareaHTML.addEventListener('input', fillCode);
+  textareaCSS.addEventListener('input', fillCode);
+  window.addEventListener('load', fillCode);
+
+
+</script>
+
+</html>