Parallax Animation and Fade for Web

Question

I’ve made all the moves of this URL in Adobe’s Muse and Edge Animate, but I want to do it in my fingernail by coding. Some hint of Parallax or similar animations in Codepen or Github?

I want to realize the Stop Scrolling effect.

I need to animate my scroll up to a point, getting to that point, I need this div to stop rolling. I need my DIVs stand still after a certain X scroll. No scrolld plugin the animation of the scroll is by clicking, which will not have.

How do I do?

Answer 1

A good option is to use the Scrolld.js plugin for Jquery. It allows you to scroll with extreme precision.

http://scrolldjs.com/

Note that demo2 handles functions that will interest you, such as scrollDistance.

It allows a series of animations with scroll and is a small library to be loaded on the page.

In practice, what should be done is to monitor the scroll position on the page and start the javascript animations when a certain point is reached.

You need to define a series of Event Listeners and when Trigger is triggered, ask javascript to change the CSS dynamically.

For example, the first effect of overwriting items is easily achieved by changing the z-index of the lower div, in CSS, to a more positive number than the previous div, changing its absolute position in x pixels to each scroll down.

The last effect is also simple, it is two Divs also with more positive z-index than the other elements, which are animated from off-page positions to positions within the page. For example, the left div is left: -200px to left: 200px - hypothetical values - (from outside the screen to inside the screen in 200px).

Animating with Jquery is easy, just select the div and change the property:

$("mydiv").css("z-index","2")

The above code changes the mydiv z-index to +2 (placing it in planes above the Divs with z-index less than 2).

It also follows a function to create the scroll down Event Listener. It tells you whether the given scroll is up or down. Just create a Scrolls counter (down adds 1, up decreases 1) and attach the other animations to the count of that counter.

Remember that in the counter you need to create a constraint where it cannot be negative (since the user cannot scroll up the top of the page) and cannot be more positive than the number of Scrolls to get to the bottom of the page (since the user can give several Crolls at the bottom of the page and we don’t want this to affect the count).

$(window).bind('mousewheel', function(event) {
    if (event.originalEvent.wheelDelta >= 0) {
        console.log('Scroll up');
    }
    else {
        console.log('Scroll down');
    }
});

Thanks to cilphex for the function that monitors the scroll down: https://stackoverflow.com/users/1201159/cilphex

Good Luck.

Answer 2

I recommend this Parallax 1 To begin with, it’s simpler and gives you a central idea of how it works. Only move to the next one when you’re 101% sure what’s going on in the code.

Parallax 2 this one has a bigger explanation.

• Update link Parallax 2

Answer 3

To make the div stop "walking" just capture the distance from it in relation to the top and put a limit, if you reach that limit it to, in case can be placed a position: Fixed.

You can capture its distance with the . offset() function of jQuery, then use $(window). bind('scroll') with an if to compare.