I've done all movements movements in Adobe's Muse and Edge Animate, but I want to do it on the nail, coding. Any Parallax hints or similar animations on Codepen or Github?
I want to do the Stop Scrolling effect.
I need to animate my scroll to a certain point, reaching that point, I need this div to stop scrolling. I need my DIVs to stop after a certain scroll X. In the scrolld plugin the scroll animation is click-through, which I will not have.
How do I do it?
A good option is to use the Scrolld.js plugin for JQuery. It allows you to scroll with extreme precision.
See that demo2 deals with 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 position of the scroll on the page and start the javascript animations when a certain point is reached.
You need to set a series of Event Listeners and when the trigger is triggered, prompt javascript to change CSS dynamically.
For example, the first effect of overlapping items is easily achieved by changing the z-index of the lower div in CSS to a number more positive than that of the previous div by changing its absolute position by x pixels to each scroll down.
The last effect is also simple, these are two divs also with z-index more positive than the other elements, which are animated from off-page positions to positions within the page. For example, the left div is animated from left: -200px to left: 200px - hypothetical values - (from outside the screen into the screen at 200px).
Animating with JQuery is easy, just select the div and change the property:
$("mydiv").css("z-index","2")
The code above changes the z-index from mydiv to +2 (putting it in planes above the divs with z-index less than 2).
Also follows a function to create the scroll down Event Listener. It tells whether the given scroll is up or down. Simply create a scroller counter (down 1 adds, up 1 down) and link the other animations to the counting of that counter.
Remember that in the counter you need to create a constraint where it can not be negative (since the user can not scroll to the top of the page) and can not be more positive than the number of scrolls to we get to the bottom of the page (since the user can give several scrolls at the bottom of the page and we do not want this to affect counting).
$(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: link
Good Luck.
I recommend this parallax 1 to start it up simpler and give you a central idea of how it works. Just go to the next one when you're 101% sure of what's happening in the code.
Parallax 2 a bigger explanation.
To make the div stop "walking" is just to capture the distance from it to the top and put a limit, if it reaches that limit it stops, in case a position: fixed can be placed.
You can capture its distance from the jQuery .offset () function, then use $ (window) .bind ('scroll') with an if to compare.