How to make a text-parallax

Question

So I wondered how I could make a parallax effect on a text without jquery because I don't want to have so many extra files in my project, from which I only use like 3 parts or something.

I only found answers that didn't meet my needs, so I thought I could ask my own question here.

How do I make text in a website that scrolls with the website itself, just like the background on some websites does? I don't want to use jquery or some other third party things, could anybody help me with this problem? I don't really have any code, the only reference I have are those two websites: Parallax Effect on Text
and
https://pxpx.co.uk/blog/article/two-simple-parallax-methods

The existing Stackoverflow post isn't what I looked for and as far as I know, it uses JQuery and as I said, I don't want to use things like this.

Delete this. SO not working like this. You either ask a question or answer the question in the post itself. — Smollet777, Nov 17 '18 at 11:16
I thought it would make it easier for people to find an answer, I didn't really know where to answer, so I thought it would be a good idea to post an Answer directly — DaniWipes, Nov 17 '18 at 11:19
I appreciate your effort but @Smollet777 is right (at least with the last part). You don't answer your question **inside** your question. There should be a checkbox somewhere in the form which offers you to answer your own question. From my point of view you could "rescue" this by editing this. Write a nice question and add an answer. — TimSch, Nov 17 '18 at 11:20
Okay, thank you, I thought this would be a good idea @TimSch I will add a Question and make this an answer. — DaniWipes, Nov 17 '18 at 11:22
Possible duplicate of [Parallax Effect on Text](https://stackoverflow.com/questions/41453849/parallax-effect-on-text) — , Nov 17 '18 at 11:33
Additionally I want to point you to this nice post: https://meta.stackoverflow.com/questions/314165/how-to-ask-and-self-answer-a-correct-high-quality-qa-pair-without-attracting-d and I'd like to encourage you to take the tour: https://stackoverflow.com/tour — TimSch, Nov 17 '18 at 12:03

DaniWipes · Accepted Answer · 2018-11-17T11:32:45.827

I used code from these two websites (they are also listed in the question itself): Parallax Effect on Text
AND
https://pxpx.co.uk/blog/article/two-simple-parallax-methods

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. So I played around and found something that worked fine. When I scroll down the text also does and the code only is 7 lines long.

Here is my JS code (I will explain it later):

function parallax()
{
    const speed = 6; // Increase this value so the text scrolls slower (I know it's weird, but it doesn't matter)
    let pos = (window.pageYOffset / speed); // Calculate new position

    document.getElementById("parallax-effekt").style.transform = "translate(-50%, " + (-50 + pos) + "%)"; // just set new position
}

First of all: I know that the 6th line I too long, but it doesn't matter for this example. I also did it like this, because if I use variables for example "document.getElementById('ID')" it doesn't work.

So you just call this function from the onscroll-Event () and see the magic happen. You don't really need the -50 and -50% I only needed it for my website, so the text gets centered. In this constellation, the text moves down when you scroll down and it scrolls up when you scroll up. Just play around with it to find your "settings"!

And the best thing about this, it doesn't need any extra thing like jquery, so it's perfect if you don't want to use many different frameworks, just like me.

How to make a text-parallax

1 Answers1