×

Welcome to TagMyCode

Please login or create account to add a snippet.
 

visible on scroll

0
0
 
0
Language: Javascript
Posted by: Marosi Dóra
Added: Mar 9, 2018 9:17 AM
Modified: Mar 9, 2018 9:18 AM
Views: 2880
Tags: no tags
  1. (function($) {
  2.  
  3.   /**
  4.    * Copyright 2012, Digital Fusion
  5.    * Licensed under the MIT license.
  6.    * http://teamdf.com/jquery-plugins/license/
  7.    *
  8.    * @author Sam Sehnert
  9.    * @desc A small plugin that checks whether elements are within
  10.    *     the user visible viewport of a web browser.
  11.    *     only accounts for vertical position, not horizontal.
  12.    */
  13.  
  14.     $.fn.visible = function(partial) {    
  15.         var $t            = $(this),
  16.             $w            = $(window),
  17.             viewTop       = $w.scrollTop(),
  18.             viewBottom    = viewTop + $w.height(),
  19.             _top          = $t.offset().top,
  20.             _bottom       = _top + $t.height(),
  21.             compareTop    = partial === true ? _bottom : _top,
  22.             compareBottom = partial === true ? _top : _bottom;
  23.  
  24.         return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
  25.     };
  26.  
  27.     $(window).scroll(function(event) {  
  28.         $(".module").each(function(i, el) {
  29.           var el = $(el);
  30.           if (el.visible(true)) {
  31.             el.addClass("come-in");
  32.           }
  33.         });  
  34.     });  
  35.    
  36. })(jQuery);
  37.  
  38. CSS:
  39. .come-in {
  40.     transition: 2s;
  41.     left: 0px;
  42. }

Write a comment

To post comments, please log in or register.