34 lines
850 B
SCSS
34 lines
850 B
SCSS
/*
|
|
* Element Scroll Fader
|
|
* Simple fade in animation that's activated when a user scrolls down far
|
|
* enough to see the element.
|
|
*
|
|
* Dependencies:
|
|
* styles/settings/animation.scss
|
|
* styles/tools/_transform.scss
|
|
*
|
|
* Version:
|
|
* 1.0.0 - 2018/06/08
|
|
*/
|
|
@import '~@styles/global';
|
|
|
|
$o-element-scroll-fader--speed: 0.75s;
|
|
$o-element-scroll-fader--amount: 15%;
|
|
|
|
.o-element-scroll-fader {
|
|
opacity: 0;
|
|
transition: all $o-element-scroll-fader--speed $s-animation--ease-out;
|
|
will-change: transform;
|
|
|
|
$amt: $o-element-scroll-fader--amount;//Shorthand
|
|
&.from-top { @include t-translate-y(-$amt); }
|
|
&.from-bottom { @include t-translate-y( $amt); }
|
|
&.from-left { @include t-translate-x(-$amt); }
|
|
&.from-right { @include t-translate-x( $amt); }
|
|
|
|
&.is-visible {
|
|
opacity: 1;
|
|
@include t-translate(0, 0);
|
|
}
|
|
}
|