mousemove events added for transform card

relumeza · Aug 25, 2019 · b05bf0d · b05bf0d
1 parent 9dc4735
commit b05bf0d
Show file tree

Hide file tree

Showing 5 changed files with 142 additions and 9 deletions.
diff --git a/css/main.css.map b/css/main.css.map
diff --git a/css/main.scss b/css/main.scss
@@ -23,7 +23,7 @@ body {
   align-items: center;
   justify-content: center;
   min-height: 100vh;
-  background: url(../img/bg.png) no-repeat center;
+  // background: url(../img/bg.png) no-repeat center;
   background-size: cover;
 }
 
@@ -32,13 +32,18 @@ body {
   width: 410px;
   min-height: 480px;
   // box-shadow: 0px 55px 75px -10px rgba(76, 70, 124, 0.5);
-  box-shadow: 0px 55px 105px 10px rgba(76, 70, 124, 0.35);
+  // box-shadow: 0px 55px 105px 10px rgba(76, 70, 124, 0.35);
+  box-shadow: 0px 15px 35px -5px rgba(50, 88, 130, 0.32);
   border-radius: 15px;
   padding: 30px;
+  transform: perspective(512px) translate3d(0, 0, 0);
+  transition: all .4s cubic-bezier(.125, .625, .125, .875);
 
   &__top {
     display: flex;
     align-items: flex-start;
+    position: relative;
+    z-index: 4;
   }
 
   &-cover {
@@ -49,6 +54,9 @@ body {
     position: relative;
     z-index: 2;
     border-radius: 15px;
+    transform: perspective(512px) translate3d(0, 0, 0);
+    transition: all .4s cubic-bezier(.125, .625, .125, .875);
+    z-index: 1;
 
     &__item {
       background-repeat: no-repeat;

diff --git a/img/background.svg b/img/background.svg
diff --git a/img/icons.svg b/img/icons.svg
diff --git a/scripts/script.js b/scripts/script.js
@@ -1,8 +1,5 @@
 new Vue({
   el: "#app",
-  // components: {
-  //     player
-  // }
   data() {
     return {
       testData: "asda",
@@ -89,7 +86,9 @@ new Vue({
       ],
       currentTrack: null,
       currentTrackIndex: 0,
-      transitionName: null
+      transitionName: null,
+      cardStyle: null,
+      coverStyle: null
     };
   },
   methods: {
@@ -185,6 +184,20 @@ new Vue({
       this.tracks[this.currentTrackIndex].favorited = !this.tracks[
         this.currentTrackIndex
       ].favorited;
+    },
+    playerMouseMove (event) {
+      var halfWidth = (this.$refs.player.clientWidth / 2);
+      var halfHeight = (this.$refs.player.clientHeight / 2);
+      var mouseX = (halfWidth - (event.pageX - this.$refs.player.offsetLeft));
+      var mouseY = (halfHeight - (event.pageY - this.$refs.player.offsetTop));
+      var degX  = ((mouseY / halfHeight) * 15) + 'deg'; //max degree = 15
+      var degY  = ((mouseX / halfWidth) * -15) + 'deg'; //max degree = 15
+      this.cardStyle = 'perspective(512px) translate3d(-2px, -2px, 0) rotateX('+ degX +') rotateY('+ degY +')';
+      // this.coverStyle = 'perspective(512px) translate3d(4px, 4px, 0) rotateX('+ degX +') rotateY('+ degY +')';
+    },
+    playerMouseOut () {
+      this.cardStyle = null;
+      this.coverStyle = null
     }
   },
   created() {