Last active
April 28, 2016 23:49
-
-
Save ryarwood/39dec7f79756e8fc3927 to your computer and use it in GitHub Desktop.
Scroll reveal example. For more information visit: https://github.com/jlmakes/scrollreveal.js
This file contains 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
| var fooReveal = { | |
| origin : 'bottom', | |
| distance : '20px', | |
| duration : 500, | |
| delay : 0, | |
| rotate : { x : 0, y : 0, z : 0 }, | |
| opacity : 0, | |
| scale : 0.9, | |
| easing : 'cubic-bezier( 0.6, 0.2, 0.1, 1 )', | |
| container : null, | |
| mobile : true, | |
| reset : false, | |
| useDelay : 'always', | |
| viewFactor : 0.2, | |
| viewOffset : { top : 0, right : 0, bottom : 0, left : 0 }, | |
| afterReveal : function( domEl ){}, | |
| afterReset : function( domEl ){} | |
| }; | |
| window.sr = ScrollReveal(); | |
| sr.reveal( '.foo', fooReveal ); | |
| sr.reveal( '#chocolate', { delay: 500, scale: 0.9 } ); |
This file contains 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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
| <title>Scroll Reveal Example</title> | |
| </head> | |
| <body> | |
| <div class="foo"> Foo </div> | |
| <div class="foo" id="chocolate"> Chip </div> | |
| <script src="https://cdn.jsdelivr.net/scrollreveal.js/3.0.9/scrollreveal.min.js"></script> | |
| </body> | |
| </html> |
This file contains 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
| var revealHeader = { | |
| origin : 'top', | |
| distance : '0px', | |
| duration : 1000, | |
| delay : 200, | |
| rotate : { x : 0, y : 0, z : 0 }, | |
| opacity : 0, | |
| scale : 1, | |
| easing : 'cubic-bezier( 0.6, 0.2, 0.1, 1 )', | |
| container : null, | |
| mobile : true, | |
| reset : true, | |
| useDelay : 'once', | |
| viewFactor : 0.2, | |
| viewOffset : { top : 50, right : 0, bottom : 0, left : 0 }, | |
| afterReveal : function(){ $('#side-carousel-title').addClass('vis'); }, | |
| afterReset : function(){ $('#side-carousel-title').removeClass('vis'); } | |
| }; | |
| var revealHome1 = { | |
| origin : 'top', | |
| distance : '0px', | |
| duration : 1000, | |
| delay : 200, | |
| rotate : { x : 0, y : 0, z : 0 }, | |
| opacity : 0, | |
| scale : 1, | |
| easing : 'cubic-bezier( 0.6, 0.2, 0.1, 1 )', | |
| container : null, | |
| mobile : true, | |
| reset : true, | |
| useDelay : 'once', | |
| viewFactor : 0.2, | |
| viewOffset : { top : 50, right : 0, bottom : 0, left : 0 }, | |
| afterReveal : function(){ $('#homeTitle1').addClass('vis'); }, | |
| afterReset : function(){ $('#side-carousel-title').removeClass('vis'); } | |
| }; | |
| var revealHome2 = { | |
| origin : 'top', | |
| distance : '0px', | |
| duration : 1000, | |
| delay : 200, | |
| rotate : { x : 0, y : 0, z : 0 }, | |
| opacity : 0, | |
| scale : 1, | |
| easing : 'cubic-bezier( 0.6, 0.2, 0.1, 1 )', | |
| container : null, | |
| mobile : true, | |
| reset : true, | |
| useDelay : 'once', | |
| viewFactor : 0.2, | |
| viewOffset : { top : 50, right : 0, bottom : 0, left : 0 }, | |
| afterReveal : function(){ $('#homeTitle2').addClass('vis'); }, | |
| afterReset : function(){ $('#side-carousel-title').removeClass('vis'); } | |
| }; | |
| var revealHome3 = { | |
| origin : 'top', | |
| distance : '0px', | |
| duration : 1000, | |
| delay : 200, | |
| rotate : { x : 0, y : 0, z : 0 }, | |
| opacity : 0, | |
| scale : 1, | |
| easing : 'cubic-bezier( 0.6, 0.2, 0.1, 1 )', | |
| container : null, | |
| mobile : true, | |
| reset : true, | |
| useDelay : 'once', | |
| viewFactor : 0.2, | |
| viewOffset : { top : 50, right : 0, bottom : 0, left : 0 }, | |
| afterReveal : function(){ $('#homeTitle3').addClass('vis'); }, | |
| afterReset : function(){ $('#side-carousel-title').removeClass('vis'); } | |
| }; | |
| var revealHome4 = { | |
| origin : 'top', | |
| distance : '0px', | |
| duration : 1000, | |
| delay : 200, | |
| rotate : { x : 0, y : 0, z : 0 }, | |
| opacity : 0, | |
| scale : 1, | |
| easing : 'cubic-bezier( 0.6, 0.2, 0.1, 1 )', | |
| container : null, | |
| mobile : true, | |
| reset : true, | |
| useDelay : 'once', | |
| viewFactor : 0.2, | |
| viewOffset : { top : 50, right : 0, bottom : 0, left : 0 }, | |
| afterReveal : function(){ $('#homeTitle4').addClass('vis'); }, | |
| afterReset : function(){ $('#side-carousel-title').removeClass('vis'); } | |
| }; | |
| var revealTop = { | |
| origin : 'top', | |
| distance : '25px', | |
| duration : 1000, | |
| delay : 200, | |
| rotate : { x : 0, y : 0, z : 0 }, | |
| opacity : 0, | |
| scale : 1, | |
| easing : 'cubic-bezier( 0.6, 0.2, 0.1, 1 )', | |
| container : null, | |
| mobile : true, | |
| reset : true, | |
| useDelay : 'once', | |
| viewFactor : 0.2, | |
| viewOffset : { top : 50, right : 0, bottom : 0, left : 0 }, | |
| afterReveal : function( domEl ){}, | |
| afterReset : function( domEl ){} | |
| }; | |
| var revealBottom = { | |
| origin : 'bottom', | |
| distance : '25px', | |
| duration : 1000, | |
| delay : 200, | |
| rotate : { x : 0, y : 0, z : 0 }, | |
| opacity : 0, | |
| scale : 1, | |
| easing : 'cubic-bezier( 0.6, 0.2, 0.1, 1 )', | |
| container : null, | |
| mobile : true, | |
| reset : true, | |
| useDelay : 'once', | |
| viewFactor : 0.2, | |
| viewOffset : { top : 50, right : 0, bottom : 0, left : 0 }, | |
| afterReveal : function( domEl ){}, | |
| afterReset : function( domEl ){} | |
| }; | |
| var revealLeft = { | |
| origin : 'left', | |
| distance : '75px', | |
| duration : 1000, | |
| delay : 200, | |
| rotate : { x : 0, y : 0, z : 0 }, | |
| opacity : 0, | |
| scale : 1, | |
| easing : 'cubic-bezier( 0.6, 0.2, 0.1, 1 )', | |
| container : null, | |
| mobile : true, | |
| reset : true, | |
| useDelay : 'once', | |
| viewFactor : 0.2, | |
| viewOffset : { top : 50, right : 0, bottom : 0, left : 0 }, | |
| afterReveal : function( domEl ){}, | |
| afterReset : function( domEl ){} | |
| }; | |
| var revealRight = { | |
| origin : 'right', | |
| distance : '75px', | |
| duration : 1000, | |
| delay : 200, | |
| rotate : { x : 0, y : 0, z : 0 }, | |
| opacity : 0, | |
| scale : 1, | |
| easing : 'cubic-bezier( 0.6, 0.2, 0.1, 1 )', | |
| container : null, | |
| mobile : true, | |
| reset : true, | |
| useDelay : 'once', | |
| viewFactor : 0.2, | |
| viewOffset : { top : 50, right : 0, bottom : 0, left : 0 }, | |
| afterReveal : function( domEl ){}, | |
| afterReset : function( domEl ){} | |
| }; | |
| var revealFade = { | |
| origin : 'top', | |
| distance : '0px', | |
| duration : 1000, | |
| delay : 200, | |
| rotate : { x : 0, y : 0, z : 0 }, | |
| opacity : 0, | |
| scale : 1, | |
| easing : 'cubic-bezier( 0.6, 0.2, 0.1, 1 )', | |
| container : null, | |
| mobile : true, | |
| reset : true, | |
| useDelay : 'once', | |
| viewFactor : 0.2, | |
| viewOffset : { top : 50, right : 0, bottom : 0, left : 0 }, | |
| afterReveal : function( domEl ){}, | |
| afterReset : function( domEl ){} | |
| }; | |
| window.sr = ScrollReveal(); | |
| sr.reveal( '.reveal-header', revealHeader ); | |
| sr.reveal( '.reveal-home1', revealHome1 ); | |
| sr.reveal( '.reveal-home2', revealHome2 ); | |
| sr.reveal( '.reveal-home3', revealHome3 ); | |
| sr.reveal( '.reveal-home4', revealHome4 ); | |
| sr.reveal( '.reveal-top', revealTop ); | |
| sr.reveal( '.reveal-bottom', revealBottom ); | |
| sr.reveal( '.reveal-left', revealLeft ); | |
| sr.reveal( '.reveal-right', revealRight ); | |
| sr.reveal( '.reveal-fade', revealFade ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment