Last active
September 21, 2016 22:53
-
-
Save kangabell/57752066b871701ab90a023e510a06ba to your computer and use it in GitHub Desktop.
Mixins & Functions: Element Rises and Fades In – used on aeturnum.com
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*** Add or remove .rise class to an element ***/ | |
| /* | |
| EXAMPLES | |
| setTimeout( rise('.hero'), 1000); | |
| function openNav() { rise('.modal'); } | |
| function closeNav() { unRise('.modal'); } | |
| */ | |
| function rise(s) { | |
| $(s).addClass('risen'); | |
| } | |
| function unRise(s) { | |
| $(s).removeClass('risen'); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*** Element Rises and Fades in When Triggered by JS (e.g. after scrolling into view, or some other event) ***/ | |
| /* | |
| EXAMPLES | |
| @include rise(200,'.article'); | |
| @include rise(200,'main','.link'); | |
| @include rise(200,null,null,true); | |
| */ | |
| @mixin change($p) { | |
| @include transition($p 0.125s ease-in); | |
| } | |
| $curve: cubic-bezier(.55,.055,.675,.19); | |
| @mixin rise($speed,$e:null,$secondary:null,$self:null) { | |
| @if ($self) { // element that is rising is the same one being targeted by js | |
| opacity: 0; | |
| @include transform( translateY(3em) ); | |
| @include transition( | |
| opacity #{$speed*2}ms $curve #{$speed}ms, | |
| transform #{$speed*2}ms ease #{$speed}ms | |
| ); | |
| -webkit-transition: // need this to get the -webkit-transform property for ios | |
| opacity #{$speed*2}ms $curve #{$speed}ms, | |
| -webkit-transform #{$speed*2}ms ease #{$speed}ms; | |
| &.risen { | |
| opacity: 1; | |
| @include transform( translateY(0) ); | |
| } | |
| } @else { // element that is rising is different from the one being targeted by js | |
| #{$e} { | |
| opacity: 0; | |
| @include transform( translateY(3em) ); | |
| @include transition( | |
| opacity #{$speed*2}ms $curve #{$speed}ms, | |
| transform #{$speed*2}ms ease #{$speed}ms | |
| ); | |
| -webkit-transition: | |
| opacity #{$speed*2}ms $curve #{$speed}ms, | |
| -webkit-transform #{$speed*2}ms ease #{$speed}ms; | |
| } | |
| &.risen { | |
| #{$e} { | |
| opacity: 1; | |
| @include transform( translateY(0) ); | |
| } | |
| } | |
| } | |
| @if ($secondary) { // a secondary element will fade in after a 500ms delay | |
| #{$secondary} { | |
| opacity: 0; | |
| @include change(opacity); | |
| -webkit-transition-delay: 500ms; /* Safari */ | |
| transition-delay: 500ms; | |
| } | |
| &.risen { | |
| #{$e} { | |
| opacity: 1; | |
| @include transform( translateY(0) ); | |
| } | |
| #{$secondary} { | |
| opacity: 1; | |
| } | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment