dll_onFire February 2016

fade in and out divs in relation to window position

I'm trying to fadein the <div>s with class .cms and .seo when entering the section with id "services" and fadeout when passing that section or before.

I also want it to animate in relation to the scrolling position if its possible.

I give you the link so you can check the site for your self.

For the animations am using animate.css

The javascript code is inside js/agency.js

Site

This is the code that I've been trying with..

$(window).scroll(function() {
    var y=$(window).scrollTop();
    if (y < 1092){
    $('.cms,.seo').addClass('animated fadeOutRight');  
  }
  if (y > 1092 && y < 1300) {
    $('.cms,.seo').addClass('animated fadeInRight');
  }     
  if (y > 1300){
    $('.cms,.seo').addClass('animated fadeOutRight');  
  }
});

I also want to know if it will work on different window sizes or will I have to change the code ?

Thanks!!

Answers


Mathias W February 2016

It fades out because if (y < 1092) will be true as soon as you scroll.

You probably only want to fadeOutRight only if fadeInRight actually exists on the element, that way it won't hide right away, so:

if (y < 1092 && $('.cms,.seo').hasClass('fadeInRight'))

Furthermore, since your class animated only specifies how the element is animated, apply this right away to the element instead of appending it with javascript.

See working example on this fiddle: https://jsfiddle.net/pjh6gy7e/

It should work on most window sizes unless you change the height of elements responsively.

Post Status

Asked in February 2016
Viewed 1,165 times
Voted 6
Answered 1 times

Search




Leave an answer