In this constellation, the text moves down when you scroll down and it scrolls up when you scroll up. The parallax effect is directly applied to image tags, there is no need to use background images. Where it may be laborious to get results through other plugins, simpleParallax.js stands out for its ease and its visual rendering. You don't really need the -50 and -50% I only needed it for my website, so the text gets centered. simpleParallax.js is a very simple and tiny Vanilla JS library that adds parallax animations on any images. So you just call this function from the onscroll-Event () and see the magic happen. I also did it like this, because if I use variables for example "document.getElementById('ID')" it doesn't work. Let pos = (window.pageYOffset / speed) // Calculate new positionĭocument.getElementById("parallax-effekt").ansform = "translate(-50%, " + (-50 + pos) + "%)" // just set new positionįirst of all: I know that the 6th line I too long, but it doesn't matter for this example.
PARALLAX JS CODE
Here is my JS code (I will explain it later): function parallax()Ĭonst speed = 6 // Increase this value so the text scrolls slower (I know it's weird, but it doesn't matter) When I scroll down the text also does and the code only is 7 lines long.
So I played around and found something that worked fine. On these two websites\posts, I saw some solutions, but no solution worked for what I wanted to do and I thought it must get easier than that. I used code from these two websites (they are also listed in the question itself):
0 kommentar(er)
