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