jquery - When a DIV comes into view add class -

jquery - When a DIV comes into view add class -

i'd add together class element, div on img, h1, etc. when comes viewport when user scrolls.

how calculate whether or not element in viewport or not?

in pseudo: if #swing has entered viewport add together classes 'animated bounceoutleft' (play animation using css3). when animation finish remove classes 'animated bounceoutleft'.

i don't know start other know code add together class want:

$('#star').addclass('animated bounceoutleft');

progress edit

thanks @bibhas i'm trying implement onscreen plugin, think i've done because dev tools says classnames there these classnames css3 transitions aren't playing, problem??

$(function() { setinterval(function() { $("#star") // <h2>s .filter(":onscreen") // <h2>s on screen .addclass('animated bounceoutleft'); }, 1000) // repeat every sec })

apparently wrote little jquery plugin that. code -

function isonscreena(elem) { var $window = $(window) var viewport_top = $window.scrolltop() var viewport_height = $window.height() var viewport_bottom = viewport_top + viewport_height var $elem = $(elem) var top = $elem.offset().top var height = $elem.height() var bottom = top + height homecoming (top >= viewport_top && top < viewport_bottom) || (bottom > viewport_top && bottom <= viewport_bottom) || (height > viewport_height && top <= viewport_top && bottom >= viewport_bottom) }

the source code hardly 20 lines. can read , learn. - https://github.com/benpickles/onscreen

jquery css viewport addclass