scroll - jQuery - Treat multiple instances of the same class separately? -

scroll - jQuery - Treat multiple instances of the same class separately? -

goal:

i'm trying create parallax scrolling effect.

the parallax-container implemented so: < div class="parallax slide-1" > < /div >

i need parallax effect start, when container is scrolled view.

once has left view, effect needs stop. the problem:

the jquery works fine far.

but: since can have multiple parallax-container on 1 page (e.g. 1 @ top + 1 @ bottom) need them treated independently jquery.

at moment effect is...

1.) triggered every parallax-container 1 time first 1 scrolled view and 2.) stops every parallax-container 1 time has left view.

so not quite solution yet.

thoughts

i think should work jquerys .each(), couldn't work far.

i think i'm getting confused nested functions somewhere, when seek implement it.

code

here's current code:

$(document).ready(function(){ $.fn.is_on_screen = function(){ var win = $(window); var viewport = { top : win.scrolltop(), left : win.scrollleft() }; viewport.right = viewport.left + win.width(); viewport.bottom = viewport.top + win.height(); var bounds = this.offset(); bounds.right = bounds.left + this.outerwidth(); bounds.bottom = bounds.top + this.outerheight(); homecoming (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); }; $(window).scroll(function(){ // bind window scroll event if( $('.parallax').length > 0 ) { // check if target element exists in dom if( $('.parallax').is_on_screen() ) { // check if target element visible on screen after dom loaded // animate parallax effect // if parallax element scrolled view do... // variables var speed = 2.5; var calc = (-window.pagexoffset / speed) + "px " + (-window.pageyoffset / speed) + "px"; var container = $(".parallax"); // function container.css({backgroundposition: calc}); } else { // ...otherwise nil } } }); })

assuming scrolling want identical (using same parallax methods,etc), utilize .each on class. example:

$(window).scroll(function(){ // bind window scroll event $( ".parallax" ).each(function() { if( $( ).is_on_screen() ) { // check if target element visible on screen after dom loaded // animate parallax effect // if parallax element scrolled view do... // remember replace ('.paralax') (this) // variables var speed = 2.5; var calc = (-window.pagexoffset / speed) + "px " + (-window.pageyoffset / speed) + "px"; var container = $( ); // function container.css({backgroundposition: calc}); } else { // ...otherwise nil } }); });

jquery scroll window parallax