aboutsummaryrefslogtreecommitdiff
path: root/motto/script.js
diff options
context:
space:
mode:
authorMarvin Borner2020-09-01 17:43:23 +0200
committerMarvin Borner2020-09-01 17:43:23 +0200
commit26ba56205707935f59c413202c3f91010c182d36 (patch)
treeb8652925eccc8b6e1b6376fc37255913d3d05752 /motto/script.js
parent94a0f1acd5b708e59281040132e953a11b0a9d39 (diff)
Very much good
Diffstat (limited to 'motto/script.js')
-rw-r--r--motto/script.js56
1 files changed, 0 insertions, 56 deletions
diff --git a/motto/script.js b/motto/script.js
deleted file mode 100644
index 6afc20b..0000000
--- a/motto/script.js
+++ /dev/null
@@ -1,56 +0,0 @@
-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)";
- }
- });
-});