Develop Reference

How would I create a horizontal parallax which scrolls naturally?

I have been looking into parallax effects and how to create them, but no where have I seen any information on how to create a parallax effect like on this webpage: https://www.fhoke.com
I have figured out regular vertical parallax, I've found information on horizontal parallax (which makes the entire webpage horizontal, not a section of it), but I can't find how to make something like in the above webpage where just a section moves horizontally while you scroll vertically.
How would I be able to do this with vanilla javascript css and html, or is this only possible with JQuery/Plugins?
Edit: Ive tried inspecting the code, but can't seem to find it either.

You mean Like this
Sample Website -Link
here is the post-mortem for the above website

Need an advice for a background effect

I am making a browser game.
The background is kind of big enough to just subtly scroll down as the user scrolls. It's a rather long scroll so having a fixed background is kind of boring, and if the background isn't fixed, it quickly turns to white space as it isn't big enough to cover the entire game content.
I want to make background scroll, in the opposite direction of the user scroll, but very subtly for a nice effect
How is this effect I explained above called? I know jquery can probably do that but I avoid using jquery. I'm pretty good with vanilla javascript, I just need a little help on where to start. Should I make the background and the game content 2 separate divs, and when user scrolls through the game content the background also scrolls a little? Can this be done with just CSS?
Thanks!

Try adding background-attachment: fixed; as CSS property or as understood by your question, you might need parallax-effect. Follow the link https://materializecss.com/parallax-demo.html

How to Semi static photos scrolling on one page website (example inside)

How I achieve an effect like Janne.me ?
When you scroll the page a background image come up, but then the image stop and just the content text continue scrolling, then, when the content text scoll up, another image starting coming up with her paragraph.
Any Idea on how i could "stop" the image for a certain "time"?
Thanks

This effect is called parallax. There are several good libraries that can help you do this:
ScrollMagic: https://github.com/janpaepke/ScrollMagic (requires jQuery I believe)
rellax: https://github.com/dixonandmoe/rellax (vanilla js)
react-parallax: https://github.com/RRutsche/react-parallax (if you're using React)
Alternatively this can be done with pure CSS, as the ever awesome David Walsh has outlined here: https://davidwalsh.name/parallax
Hope this helps!

flipping & rotating images on scroll

I'm trying to replicate this scrolling effect as seen here: http://prm.ooo.
In which the image elements flip and rotate continuously on a scroll as it enters and exits the page, I know this requires jquery/javascript and not just CSS alone.
So far I am able to rotate an image while scrolling.
Does anyone know how I can achieve this?

Here is the code: http://prm.ooo/wp-content/themes/prmo/main.js you can look at the source of any page and try and figure out how they did things. People also use plugins like scrollorama for this type of thing

Same image across multiple sections and slides fullpage.js

I am using Fullpage.js in my site and would like to use one image for the background for the whole site, where different parts of the image are displayed as different sections and slides are scrolled. So far I have managed to get different parts of the image showing for sections by adding:
<div class="fullpage">
at the top of the body with corresponding CSS:
.fullpage {
background-image: url(../images/background_image.jpg);
background-size: cover;
}
Is there any way to get the image to move sideways as slides are displayed.
Here's a jsfiddle of what I've got so far.

In the end I decided to go a different route and convert the image into tiles. The image tiles are then assigned to the correct slide or section. This allows the image to continue from each slide or section without having to load the whole image at once.

Yep! You'll need to hook into that slider gallery's events.
What plugin are you using? Or did you write it yourself?
Either way, most plugin slide galleries have events like "onSlideStart" or things like that, which you can then use to update your background.
I'd start by writing a script, and setting onSlideStart to a function that calculates what slide the slider is on. Then you simply set your background position (or rather, animate it) to the proper x-value based on what slide you're on (you can figure out the math yourself, yeah?)
Hope this helps! :)