Rookie question ,tailwind css
Answered
Tonkinese posted this in #help-forum
TonkineseOP
Hi, i have an off topic question.I am making donation website for a client, and i want to make it have background images that scroll down as i scroll down..There is a mountain video that dissapears as i scroll down and other div appears on top of it with different image. Same as in the homepage of this website.
https://cliffamilyfoundation.org/
Do you know perhaps how can i do this ? 🤣
https://cliffamilyfoundation.org/
Do you know perhaps how can i do this ? 🤣
Answered by Plott Hound
You could do it with js and css but personally I think this is a great implementation https://www.npmjs.com/package/react-scroll-parallax
19 Replies
Plott Hound
The effect is called parallax
Plott Hound
You could do it with js and css but personally I think this is a great implementation https://www.npmjs.com/package/react-scroll-parallax
Answer
TonkineseOP
@Plott Hound Ohh thank you brother aloot..You are a life saver, i will definetly check this today!
@Tonkinese <@578864362882727958> Ohh thank you brother aloot..You are a life saver, i will definetly check this today!
Plott Hound
Sure thing. Let me know if you get stuck, and don’t forget to mark the answer as the solution if you think I’ve answered your question. Thanks
TonkineseOP
I will sure ask you if thats ok with you, if i get stuck, i wont bother you , only if i get stuck!
Plott Hound
No worries. Just @ me if I don’t reply right away
TonkineseOP
I dont see solved button here hahahaha
Plott Hound
check the first reply to your op
right click -> apps -> mark as solution
TonkineseOP
I will look for it, i am on my phone, thank you !
TonkineseOP
@Plott Hound how did they make it so that when the div goes on top of the mountain video and as i keep acrolling the new background appears, in my case my top video is scrolling down as i scroll
And how can i make so that the text appear when page loads, and as i scroll down the text appears dynamically
Plott Hound
it looks like they just have large sections with the parralax images in and between each section they have an overlapping div to break each section up
@Tonkinese And how can i make so that the text appear when page loads, and as i scroll down the text appears dynamically
Plott Hound
this is scroll based animation. check out framer-motion
@Plott Hound it looks like they just have large sections with the parralax images in and between each section they have an overlapping div to break each section up
TonkineseOP
Aha i get it, so the video is also parallax ,the mountain video
@Plott Hound this is scroll based animation. check out framer-motion
TonkineseOP
Oh thanks ,i will use that!
@Tonkinese Aha i get it, so the video is also parallax ,the mountain video
Plott Hound
i think so! but hard to tell without seeing their source code
TonkineseOP
Yes i understand, i was exploring parallax with setting different speed,for example video was parallax 1 ,below it is a div wich is also a parallax 2, but when i lets say set speed to 30 , the gap between video and the div increases, they are not next to each other
Perhaps i am trying wrong things hahaha