JAVASCRIPT   95

cbpScroller.js

Guest on 24th July 2021 06:08:40 AM

  1. /**
  2.  * cbpScroller.js v1.0.0
  3.  * http://www.codrops.com
  4.  *
  5.  * Licensed under the MIT license.
  6.  * http://www.opensource.org/licenses/mit-license.php
  7.  *
  8.  * Copyright , Codrops
  9.  * http://www.codrops.com
  10.  */
  11. ;( function( window ) {
  12.        
  13.         'use strict';
  14.  
  15.         var docElem = window.document.documentElement;
  16.  
  17.         function getViewportH() {
  18.                 var client = docElem['clientHeight'],
  19.                         inner = window['innerHeight'];
  20.                
  21.                 if( client < inner )
  22.                         return inner;
  23.                 else
  24.                         return client;
  25.         }
  26.  
  27.         function scrollY() {
  28.                 return window.pageYOffset || docElem.scrollTop;
  29.         }
  30.  
  31.         // http://stackoverflow.com/a/5598797/989439
  32.         function getOffset( el ) {
  33.                 var offsetTop = 0, offsetLeft = 0;
  34.                 do {
  35.                         if ( !isNaN( el.offsetTop ) ) {
  36.                                 offsetTop += el.offsetTop;
  37.                         }
  38.                         if ( !isNaN( el.offsetLeft ) ) {
  39.                                 offsetLeft += el.offsetLeft;
  40.                         }
  41.                 } while( el = el.offsetParent )
  42.  
  43.                 return {
  44.                         top : offsetTop,
  45.                         left : offsetLeft
  46.                 }
  47.         }
  48.  
  49.         function inViewport( el, h ) {
  50.                 var elH = el.offsetHeight,
  51.                         scrolled = scrollY(),
  52.                         viewed = scrolled + getViewportH(),
  53.                         elTop = getOffset(el).top,
  54.                         elBottom = elTop + elH,
  55.                         // if 0, the element is considered in the viewport as soon as it enters.
  56.                         // if 1, the element is considered in the viewport only when it's fully inside
  57.                         // value in percentage (1 >= h >= 0)
  58.                         h = h || 0;
  59.  
  60.                 return (elTop + elH * h) <= viewed && (elBottom) >= scrolled;
  61.         }
  62.  
  63.         function extend( a, b ) {
  64.                 for( var key in b ) {
  65.                         if( b.hasOwnProperty( key ) ) {
  66.                                 a[key] = b[key];
  67.                         }
  68.                 }
  69.                 return a;
  70.         }
  71.  
  72.         function cbpScroller( el, options ) {  
  73.                 this.el = el;
  74.                 this.options = extend( this.defaults, options );
  75.                 this._init();
  76.         }
  77.  
  78.         cbpScroller.prototype = {
  79.                 defaults : {
  80.                         // The viewportFactor defines how much of the appearing item has to be visible in order to trigger the animation
  81.                         // if we'd use a value of 0, this would mean that it would add the animation class as soon as the item is in the viewport.
  82.                         // If we were to use the value of 1, the animation would only be triggered when we see all of the item in the viewport (100% of it)
  83.                         viewportFactor : 0.2
  84.                 },
  85.                 _init : function() {
  86.                         if( Modernizr.touch ) return;
  87.                         this.sections = Array.prototype.slice.call( this.el.querySelectorAll( '.cbp-so-section' ) );
  88.                         this.didScroll = false;
  89.  
  90.                         var self = this;
  91.                         // the sections already shown...
  92.                         this.sections.forEach( function( el, i ) {
  93.                                 if( !inViewport( el ) ) {
  94.                                         classie.add( el, 'cbp-so-init' );
  95.                                 }
  96.                         } );
  97.  
  98.                         var scrollHandler = function() {
  99.                                         if( !self.didScroll ) {
  100.                                                 self.didScroll = true;
  101.                                                 setTimeout( function() { self._scrollPage(); }, 60 );
  102.                                         }
  103.                                 },
  104.                                 resizeHandler = function() {
  105.                                         function delayed() {
  106.                                                 self._scrollPage();
  107.                                                 self.resizeTimeout = null;
  108.                                         }
  109.                                         if ( self.resizeTimeout ) {
  110.                                                 clearTimeout( self.resizeTimeout );
  111.                                         }
  112.                                         self.resizeTimeout = setTimeout( delayed, 200 );
  113.                                 };
  114.  
  115.                         window.addEventListener( 'scroll', scrollHandler, false );
  116.                         window.addEventListener( 'resize', resizeHandler, false );
  117.                 },
  118.                 _scrollPage : function() {
  119.                         var self = this;
  120.  
  121.                         this.sections.forEach( function( el, i ) {
  122.                                 if( inViewport( el, self.options.viewportFactor ) ) {
  123.                                         classie.add( el, 'cbp-so-animate' );
  124.                                 }
  125.                                 else {
  126.                                         // this add class init if it doesn't have it. This will ensure that the items initially in the viewport will also animate on scroll
  127.                                         classie.add( el, 'cbp-so-init' );
  128.                                        
  129.                                         classie.remove( el, 'cbp-so-animate' );
  130.                                 }
  131.                         });
  132.                         this.didScroll = false;
  133.                 }
  134.         }
  135.  
  136.         // add to global namespace
  137.         window.cbpScroller = cbpScroller;
  138.  
  139. } )( window );

Raw Paste


Login or Register to edit or fork this paste. It's free.