1 files changed, 56 insertions, 0 deletions
diff --git a/motto/script.js b/motto/script.js
new file mode 100644
index 0000000..6afc20b
--- /dev/null
+++ b/motto/script.js
@@ -0,0 +1,56 @@
+document.querySelector(".wrapper").style.opacity = 1;
+
+let cards = document.querySelectorAll(".card");
+cards.forEach((card, index) => {
+  card.style.zIndex = cards.length - index;
+  card.style.transform =
+    "scale(" + (20 - index) / 20 + ") translateY(-" + 30 * index + "px)";
+  card.style.opacity = (10 - index) / 10;
+
+  let hammer = new Hammer(card);
+  hammer.on("pan", (event) => {
+    if (event.deltaX === 0) return;
+    if (event.center.x === 0 && event.center.y === 0) return;
+
+    const xMulti = event.deltaX * 0.03;
+    const yMulti = event.deltaY / 80;
+    const rotate = xMulti * yMulti;
+
+    event.target.style.transform =
+      "translate(" +
+      event.deltaX +
+      "px, " +
+      event.deltaY +
+      "px) rotate(" +
+      rotate +
+      "deg)";
+  });
+
+  hammer.on("panend", (event) => {
+    const moveOutWidth = document.body.clientWidth;
+    const keep = Math.abs(event.deltax) < 80 || Math.abs(event.velocityX) < 0.5;
+    if (keep) {
+      event.target.style.transform = "";
+    } else {
+      event.target.style.opacity = 0;
+      const endX = Math.max(
+        Math.abs(event.velocityX) * moveOutWidth,
+        moveOutWidth
+      );
+      const toX = event.deltaX > 0 ? endX : -endX;
+      const endY = Math.abs(event.velocityY) * moveOutWidth;
+      var toY = event.deltaY > 0 ? endY : -endY;
+      var xMulti = event.deltaX * 0.03;
+      var yMulti = event.deltaY / 80;
+      var rotate = xMulti * yMulti;
+      event.target.style.transform =
+        "translate(" +
+        toX +
+        "px, " +
+        (toY + event.deltaY) +
+        "px) rotate(" +
+        rotate +
+        "deg)";
+    }
+  });
+});