Summary Files Commits Branches @commit @diff @stats
path: root / src / parallax.less
diff options
context:
space:
mode:
1 files changed, 0 insertions, 129 deletions
-rw-r--r--src/parallax.less129
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;
-}