You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
1.3 KiB
67 lines
1.3 KiB
/// |
|
/// Eventually by HTML5 UP |
|
/// html5up.net | @ajlkn |
|
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) |
|
/// |
|
|
|
/* BG */ |
|
|
|
#bg { |
|
@include vendor('transition', 'opacity #{_duration(bg-fadein)} ease-in-out'); |
|
height: 100%; |
|
left: 0; |
|
opacity: 0.375; |
|
position: fixed; |
|
top: 0; |
|
width: 100%; |
|
z-index: 1; |
|
|
|
div { |
|
@include vendor('transition', ('opacity #{_duration(bg-transition)} ease')); |
|
background-size: cover; |
|
height: 100%; |
|
left: 0; |
|
opacity: 0; |
|
position: absolute; |
|
top: 0; |
|
visibility: hidden; |
|
width: 150%; |
|
|
|
&.visible { |
|
@include vendor('animation', 'bg #{_duration(bg-slide)} linear infinite'); |
|
opacity: 1; |
|
visibility: visible; |
|
z-index: 1; |
|
|
|
&.top { |
|
z-index: 2; |
|
} |
|
|
|
@include breakpoint('<=large') { |
|
@include vendor('animation', 'bg #{_duration(bg-slide) * 0.65} linear infinite'); |
|
} |
|
|
|
@include breakpoint('<=small') { |
|
@include vendor('animation', 'bg #{_duration(bg-slide) * 0.4} linear infinite'); |
|
} |
|
} |
|
|
|
&:only-child { |
|
@include vendor('animation-direction', 'alternate !important'); |
|
} |
|
} |
|
|
|
body.is-preload & { |
|
opacity: 0; |
|
} |
|
} |
|
|
|
@include keyframes(bg) { |
|
0% { |
|
@include vendor('transform', 'translateX(0)'); |
|
} |
|
|
|
100% { |
|
@include vendor('transform', 'translateX(-25%)'); |
|
} |
|
} |