We Keep Coding

How to create a image slide show with scroll function?

I Want to create a slideshow of different images for a project with HTML, JS, and CSS. I want to create a scroll function that will move the image slides from left to right based on the movement of the mouse scroll.
If this sounds confusing this link shows exactly what I'm trying to do but due to my lack of experience, I have no idea how to accomplish this. Any ideas would help.
link: https://robbiecrenshaw.com/ about the halfway mark
thank you
(I'm a beginner in programming)

The animations used on this site are called scroll-based animations, where the animation progress is controlled directly by the scroll position.
They are implemented by listening to the scroll event that is fired when a user scrolls and updating the styles of certain elements dynamically based on the scroll position.
You can create scroll animations from scratch using JavaScript or implement them using a library like GSAP ScrollTrigger (which is what this specific site uses).
I created a demo similar to the effect you're looking for here: https://codepen.io/nickcil/pen/yLVEZPa
This example uses ScrollMagic to track the scroll position and update the transform property of an element to make the squares move left as you scroll down the page.

Combining vertical and horizontal parallax scrolling on the same webpage

Does anyone know how to combine vertical and horizontal parallax scrolling on a single webpage, like in this interactive resume?
http://www.rleonardi.com/interactive-resume/
He seems to transition seamlessly from vertical scrolling, to horizontal scrolling, back to vertical scrolling, all with parallax effects. Any help would be greatly appreciated!
Note: I did notice a potential hint: at certain parts of the webpage, if you scroll backwards, the transition becomes very jarring rather than smooth.

I haven't dealt with parallax in a while, but when I did I used scroll magic.
here is a link to an example with what your looking for
scrollmagic.io

page animation on scrolling it like movie

I found this page http://www.wanderworld.io/ when you scrolling its start animation on scrolling and scenes are changing. how to create something like this? Please help me, any example on jsffidle or codepen?

To point you in the right direction, this is called parallax scrolling and can be accomplished using CSS, but is most commonly done in Javascript / jQuery.
This library is great for parallax animation and would probably accomplish most, if not all, of what the example site does: http://prinzhorn.github.io/skrollr/
Basically the idea is to have a page scroll listener that tracks the window.scroll position. At certain ranges, elements move in and out of the screen. The concept behind it is relatively simple, but it can be difficult to implement and can be as complicated as you choose to make it.

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

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.