2

I have 3 pictures which automatically move to the right (with CSS transform) when the user scrolls to that certain part on the page.

The problem with my code is that its activating the "move to the right" too early, even though you cannot even see the images. If I reload the page and just stay on the images which should move, and scroll up or down it works fine.

I think that there is a problem with the activation of the scroll function... Would it be possible to say that the css class which moves the image gets activated at a certain height?

This is my current code:

$(window).scroll(function(event) {

    var y = $(this).scrollTop();

    if (y >= 600) {

        $('#number1').addClass('animate');
        $('#number2').addClass('animate');
        $('#number3').addClass('animate');
    }
});
Zong
  • 6,160
  • 5
  • 32
  • 46
Felix
  • 47
  • 4

1 Answers1

1

You can check to see whether an element is in the viewport like this: How to tell if a DOM element is visible in the current viewport?

You can run the check and scroll if it's true when the window loads or scrolls. Since the images are all at the same y co-ordinate, you can just check using the first element: #number1.

Community
  • 1
  • 1
Chad McGrath
  • 1,561
  • 1
  • 11
  • 17