Add tvOS Parallax effect text layer

1 files changed, 42 insertions, 7 deletions

diff --git a/src/parallax.less b/src/parallax.less
index 7d70772..54335e7 100644
--- a/src/parallax.less
+++ b/src/parallax.less
@@ -1,5 +1,7 @@
 // Parallax
 @parallax-deg: 3deg;
+@parallax-offset: .4rem;
+@parallax-offset-z: 10rem;
 
 .parallax {
   display: block;
@@ -8,9 +10,9 @@
   width: auto;
 
   .parallax-content {
-    .shadow-variant(2rem);
     height: auto;
-    transform: perspective(50rem);
+    .shadow-variant(2rem);
+    transform: perspective(100rem);
     transform-style: preserve-3d;
     transition: all .4s ease;
     width: 100%;
@@ -26,17 +28,38 @@
     }
   }
 
+  .parallax-front {
+    align-items: center;
+    color: @light-color;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    left: 0;
+    position: absolute;
+    text-align: center;
+    text-shadow: 0 0 3rem fade(@dark-color, 95%);
+    top: 0;
+    transform: translateZ(@parallax-offset-z);
+    transition: all .4s ease;
+    width: 100%;
+    z-index: @zindex-0;
+  }
+
   .parallax-top-left {
     .parallax-dir();
     left: 0;
     top: 0;
 
     &:hover ~ .parallax-content {
-      transform: perspective(50rem) rotateX(@parallax-deg) rotateY(-@parallax-deg);
+      transform: perspective(100rem) rotateX(-@parallax-deg) rotateY(@parallax-deg);
 
       &::before {
         background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
       }
+
+      .parallax-front {
+        transform: translate3d(-@parallax-offset, -@parallax-offset, @parallax-offset-z);
+      }
     }
   }
 
@@ -46,11 +69,15 @@
     top: 0;
 
     &:hover ~ .parallax-content {
-      transform: perspective(50rem) rotateX(@parallax-deg) rotateY(@parallax-deg);
+      transform: perspective(100rem) rotateX(-@parallax-deg) rotateY(-@parallax-deg);
 
       &::before {
         background: linear-gradient(-135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
       }
+
+      .parallax-front {
+        transform: translate3d(@parallax-offset, -@parallax-offset, @parallax-offset-z);
+      }
     }
   }
 
@@ -60,11 +87,15 @@
     left: 0;
 
     &:hover ~ .parallax-content {
-      transform: perspective(50rem) rotateX(-@parallax-deg) rotateY(-@parallax-deg);
+      transform: perspective(100rem) rotateX(@parallax-deg) rotateY(@parallax-deg);
 
       &::before {
         background: linear-gradient(45deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
       }
+
+      .parallax-front {
+        transform: translate3d(-@parallax-offset, @parallax-offset, @parallax-offset-z);
+      }
     }
   }
 
@@ -74,11 +105,15 @@
     right: 0;
 
     &:hover ~ .parallax-content {
-      transform: perspective(50rem) rotateX(-@parallax-deg) rotateY(@parallax-deg);
+      transform: perspective(100rem) rotateX(@parallax-deg) rotateY(-@parallax-deg);
 
       &::before {
         background: linear-gradient(-45deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
       }
+
+      .parallax-front {
+        transform: translate3d(@parallax-offset, @parallax-offset, @parallax-offset-z);
+      }
     }
   }
 }
@@ -87,5 +122,5 @@
   height: 50%;
   position: absolute;
   width: 50%;
-  z-index: @zindex-0;
+  z-index: @zindex-3;
 }