We Keep Coding

Make css transform STOP at a certain translateY position while using parallax effect

I am creating a section on which several items are moving on the screem and getting in place after scrolling to a certain position. How do I make them stop at a certain translateY position? I am using elementor and crocoblock parallax effect feature. If anyone can help me with a js function that can do so it will be extremely helpful, thanks

Slow down/stop/pause scrolling at a specific pixel

I'm looking for a way to slow down scrolling between two specific pixels, for example 1 to 100 from the top. Would that be possible in any way?
Here's a link to a website that have that feature I'm looking for.
http://goo.gl/isH5o0
When you start scrolling the dark blue overlay div disappears using CSS3 Translate3d, but then the scroll seems to stop or go really slow, which makes the underlying div not scroll to far at the same time the overlay div slides up.
Can someone please give me a hint of what technique to use to accomplish this or maybe help me with some code.

I think that there's nothing special with the scroll on that page, just the divs moving using 3d transforms. But if you want to achieve special effects with scroll, you can use the jQuery animate function:
$('html').animate({scrollTop: position-to-scroll}, 300, 'ease-in');
More about animate.

It may be using disable scrolling. I noticed that if i drag the scroller on the right hand side of the window it is uneffected by the "slowing" however the mouse scroll is. This is similar to the effect of the demo described here How to disable scrolling temporarily? .. at a point you can temporarily disable the scroll and then re enable it to stop them going too far down

Vertical Parallax scrolling in hotdot

I am working on this parallax from git hub https://github.com/htdt/parallax.
The parallax effect is awesome here .I am trying to modify the code.Here the scroll is from right to left.I want a top /down scrolling.I have tried changing the positions(right to top ,left to bottom overflow-Y to overflow -x) ,but its not working .Any idea on how to to that?I would love to learn this one as the effect after the scroll to the element(box/image) is awesome.(It shows a little stirring kind of effect)I dint find it in any other project.Is there any other version (showing top down parallax of htdt)available. Please redirect in that case.

For Vertical Parallax scrolling you can use these other jQuery Plugins:-
http://darsa.in/
https://github.com/IanLunn/jQuery-Parallax
https://github.com/Prinzhorn/skrollr
and my Personal Favorite
http://johnpolacek.github.io/superscrollorama/

Appending a Vertical Scroll to a Horizontal Scroll Bar

I've been trying to do something like this for quite a bit, and have tried a variety of methods from fake scroll bars and DOM-tricking code. Nothing seems to quite be as clean / functioning as I need it to be.
What I'm trying to do is have a horizontally scrolling div (with scrollbar), with a vertically scrolling div nested within it. Ideally the single horizontal scrollbar would scroll, and after a certain point--vertically scroll the "go-up" div next to it.
Here's an example diagram for those who need to visualize:
I think I have a solution that could work:
Basically I'm thinking that the horizontal "scene" could have overflow that equals the height of the "go-up" div. And after the horizontal width of the "scene" passes...you can, onScroll, shift the "go-up" container right using (ScrollLeft) and up using (ScrollTop).
Basically giving you the illusion of controlling it's vertical scroll with a horizontal scrollbar.
Check out the code here: http://jsfiddle.net/jPzqj/1/
I know how to pass a function at the end of the "scene"...currently I'm using:
$('#main').scroll(function(e)
{
if($(this).scrollLeft()>1430)
{
}
});
My only issue is I'm not quite sure how to approach the math that would allow me to shift the go-up container. How do I pass in the "scene" divs scroll value into the ScrollLeft and ScrollTop values of "go-up"...
Could anyone give me any advice on this at all?
Thanks.

You are totally off the right path, no vertical scrollbars are involved.
That is a good site (not the one that you make in 30 minute obviously), and the javascript is obfuscated, but if you are interested, you could watch the source with Firebug to understand what's going on.
It works by mixing a javascript library, some cool CSS3 Transform3D effects, and a nicely studied HTML to give you the effect of the screen scrolling up (actually, only the images are moving - and not scrolling - while the screen is always in the same Y position).
The same effect is used to create the percetion of depth, by moving the houses in background slower than the ones in front.
This effect is called PARALLAX SCROLLING .
A good javascript library you could start looking at for Parallax effects is Stellar.js
You can take a look at some great sites made with Stellar.js, especially Nike and Saucony.
Hope this answer saved you some time,
good luck on your studies ;)
EDIT
this is what you want: Jquery Parallax Scrolling effect - Multi directional
open the fiddle from the bounty-awarded answer and keep the right arrow key down.

diagonal parallax with scrollto nav

I'm trying to create a site that has a parallax type effect with scrollTo navigation control.
Similar to http://www.nike.com/jumpman23/aj2012/ however I only need to scroll on left and right (up & down). I can do horizontal and vertical parallax, and scrollTo I just cant get the diagonal parallax working (with mouse scroll)
I've currently got it working using scrollTo however this disables the user being able to scroll with the mouse. I'm creating a dynamic one page site so some times a pages content may be longer then other areas so the user will need to scroll down, once they reach the end of this content the parallax effect kicks in.
Can anyone suggest a way to do this? Or point me in the right direction.