Parallax scroll, animation WITH scroll instead of activate on scroll

Question

I am diving into 'Parallax scroll' styled web pages, I can style all my main sections correctly with background image animations however when I break it down further into individual div animations I am getting stuck.

Example: Once the browser scroll hits 900px it activates a div to animate in from the left. It slides all the way into place. What I am trying to accomplish is that the animation is controlled by the user scroll completely (only animates on scroll). Hope this makes sense

Fiddle: http://jsfiddle.net/WW8xF/

HTML

<section id="one"></section>
<section id="two">

    <div class="contentBox">I am a box</div>

</section>

jQuery

$(window).scroll(function(){
    if($(window).scrollTop()<500) {
        $('.contentBox').stop().animate({ left: -500 }, { duration: 500 });
    } else {            
        $('.contentBox').stop().animate({ left: 100 }, { duration: 500 });  
    }
});

James Montagne · Accepted Answer · 2014-04-14 19:41:13Z

2

In this case you don't want to use animate, you want to control the position of your element yourself based on the scroll position of the window. Something like this:

http://jsfiddle.net/WW8xF/1/

$(window).scroll(function(){
    var position = Math.min($(window).scrollTop()-700, 100)
    $('.contentBox').css({ left: position });
});

You can adjust the logic of position here to affect when it moves, where it stops, etc.

answered Apr 14, 2014 at 19:41

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user934902 Over a year ago

you got a trick for altering opacity? I kinda used your technique for position but it doesnt fade in clean it just goes on and off jsfiddle.net/WW8xF/2

James Montagne Over a year ago

Opacity should be between 0 and 1. You need a different formula to make the value decimal. Something like this: jsfiddle.net/WW8xF/3 though I just made that up with no real reason why it is this. You can tweak it and probably change it and make it way more understandable.

Collectives™ on Stack Overflow

Parallax scroll, animation WITH scroll instead of activate on scroll

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related