diff options
1 files changed, 0 insertions, 129 deletions
| -rw-r--r-- | src/parallax.less | 129 |
diff --git a/src/parallax.less b/src/parallax.less deleted file mode 100644 index e353fd4..0000000 --- a/src/parallax.less +++ /dev/null @@ -1,129 +0,0 @@ -// Parallax -@parallax-deg: 3deg; -@parallax-offset: 6.5px; -@parallax-offset-z: 100px; -@parallax-perspective: 1000px; -@parallax-scale: 1 - unit(@parallax-offset-z / @parallax-perspective); - -.parallax { - display: block; - height: auto; - position: relative; - width: auto; - - .parallax-content { - height: auto; - .shadow-variant(1rem); - transform: perspective(@parallax-perspective); - transform-style: preserve-3d; - transition: all .4s ease; - width: 100%; - - &::before { - content: ""; - display: block; - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; - } - } - - .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 20px fade(@dark-color, 50%); - top: 0; - transform: translateZ(@parallax-offset-z) scale(@parallax-scale); - transition: all .4s ease; - width: 100%; - z-index: @zindex-0; - } - - .parallax-top-left { - .parallax-dir(); - left: 0; - top: 0; - - &:hover ~ .parallax-content { - transform: perspective(@parallax-perspective) 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) scale(@parallax-scale); - } - } - } - - .parallax-top-right { - .parallax-dir(); - right: 0; - top: 0; - - &:hover ~ .parallax-content { - transform: perspective(@parallax-perspective) 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) scale(@parallax-scale); - } - } - } - - .parallax-bottom-left { - .parallax-dir(); - bottom: 0; - left: 0; - - &:hover ~ .parallax-content { - transform: perspective(@parallax-perspective) 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) scale(@parallax-scale); - } - } - } - - .parallax-bottom-right { - .parallax-dir(); - bottom: 0; - right: 0; - - &:hover ~ .parallax-content { - transform: perspective(@parallax-perspective) 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) scale(@parallax-scale); - } - } - } -} - -// Mixin: Parallax direction -.parallax-dir() { - height: 50%; - position: absolute; - width: 50%; - z-index: @zindex-3; -} |