Skip to content

Instantly share code, notes, and snippets.

@thierrypigot
Created June 8, 2018 15:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thierrypigot/0c5870942702b04420e31cd4c1023fbc to your computer and use it in GitHub Desktop.
Save thierrypigot/0c5870942702b04420e31cd4c1023fbc to your computer and use it in GitHub Desktop.
Détecte si un élément entre ou sort du viewport pour lui ajouter ou enlever une class CSS
(function($) {
/**
* Copyright 2012, Digital Fusion
* Licensed under the MIT license.
* http://teamdf.com/jquery-plugins/license/
*
* @author Sam Sehnert
* @desc A small plugin that checks whether elements are within
* the user visible viewport of a web browser.
* only accounts for vertical position, not horizontal.
*/
$.fn.visible = function(partial) {
var $t = $(this),
$w = $(window),
viewTop = $w.scrollTop(),
viewBottom = viewTop + $w.height(),
_top = $t.offset().top,
_bottom = _top + $t.height(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom;
return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
};
})(jQuery);
function onViewport( element, className ){
$( element ).each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass( className );
} else {
el.removeClass( className );
}
});
}
onViewport( ".svg-container", "animated" );
$(window).scroll(function(event) {
onViewport( ".svg-container", "animated" );
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment