67 lines
1.9 KiB
SCSS
67 lines
1.9 KiB
SCSS
// smoke effect
|
|
@if $icedream-fog-bg {
|
|
#main {
|
|
position: relative;
|
|
min-width: 100%;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
overflow-x: hidden;
|
|
|
|
&::before {
|
|
opacity: $icedream-fog-base-opacity;
|
|
background-image: url('../images/whitefog.png');
|
|
background-attachment: fixed;
|
|
content: ' '; // sass-lint:disable-line variable-for-property
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
min-width: 100%;
|
|
|
|
@if $icedream-fog-bg-blur {
|
|
filter: blur(16px);
|
|
}
|
|
|
|
@if not($icedream-fog-bg-animated) {
|
|
background-size: 200% 100%;
|
|
}
|
|
|
|
// animate it so it moves right to left slowly?
|
|
@if $icedream-fog-bg-animated {
|
|
background-repeat: repeat-x;
|
|
background-size: 100% 100%;
|
|
@if $icedream-fog-bg-pulse {
|
|
animation: icedream-bg-slide linear $icedream-fog-bg-slide-animation-length infinite,
|
|
icedream-bg-pulse ease-in-out $icedream-fog-bg-pulse-animation-length infinite;
|
|
} @else {
|
|
animation: icedream-bg-slide linear $icedream-fog-bg-slide-animation-length infinite;
|
|
}
|
|
transform: scale(2, 1) translateX(0);
|
|
transform-origin: left;
|
|
@keyframes icedream-bg-pulse {
|
|
0% {
|
|
opacity: $icedream-fog-base-opacity - ($icedream-fog-base-opacity * .05);
|
|
}
|
|
22% {
|
|
opacity: $icedream-fog-base-opacity - ($icedream-fog-base-opacity * .12);
|
|
}
|
|
54% {
|
|
opacity: $icedream-fog-base-opacity + ($icedream-fog-base-opacity * .15);
|
|
}
|
|
77% {
|
|
opacity: $icedream-fog-base-opacity + ($icedream-fog-base-opacity * .5);
|
|
}
|
|
100% {
|
|
opacity: $icedream-fog-base-opacity - ($icedream-fog-base-opacity * .05);
|
|
}
|
|
}
|
|
@keyframes icedream-bg-slide {
|
|
to {
|
|
transform: scale(2, 1) translateX(-50%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|