For anyone looking to make this responsive: Width: 100%; Height: 120vh (or whatever you like); Max-width: 100%; Object-fit: Cover; Set all layers to these values
Oh, *that* is parallax?! I keep seeing mention of it, but nobody ever puts it up front 😆. And it turns out that's exactly what I needed, and just didn't know the world for 😂. Thank you!
I can see that you likely started from a cloneable like client first or something else or did you create it yourself? I am trying to be a better webflow developer but im not sure about what i should use when i start a new project.
This is great content! Thank you for putting this up. Question though, I am trying to work this effect on my hero section as well, but since the hero is only 100vh I am really not getting the benefit of the scroll and unable to see the effect. What do you recommend?
Is it possible for you to take a look at my Webflow link and tell me what I am doing wrong? I cant tell why I cant get a close effect even though all settings are the same. On my is quite jumpy
Good question! There are 3 options: 1) Disable it on mobile 2) Build the animation with relative units (%, vw, vh) 3) Set up a second animation which is for mobile only, and disable it on all other screens.
Seriously great job explaining things. You explain things in ways Im always annoyed other TH-camrs dont. My site is turning out great, but only problem is the background is still showing under the top image even after I scroll all the way down. Any advice?
Thanks Mike. For many years even before home pcs were a thing, I have had it in my mind to create a particular scene with this type of method. Every few years I think about it but never do anything about it. This is very well explained though my method will not be as automated as I am still using PhotoImpact. I haven't done any image related projects for three or four years nor researched this and yet there you were, recommended by TH-cam (with 111 views !). Strangely, I have researched how to find videos with few or no views. I've been pretty much been watching "Ren - Hi Ren" for three days solid. The question is will I do anything now ? Back to Ren - Hi Ren.
Hi Chris, that's really cool, never heard of PhotoImpact before. This Parallax effect actually used to be a lot more popualr a few years ago, I think it is a really nice effect. Mike :)
Great content! How do you prepare your photoshop layers? I tried something similar but my layers don't stack up nicely on top of the background... Any suggestiosns?
Firstly, I want to express my appreciation for all the valuable knowledge and skills that you have shared. I would like to kindly ask for your guidance on preparing assets in Photoshop. Based on your exceptional assets, it appears that they all have the same width and varying heights. When setting the width to 100% in webflow, they should not be stretched. However, I have a query regarding smaller image elements that do not occupy the entire width in Photoshop. In such cases, how would you suggest I set these image elements in webflow without having them scaled up and stretched when their width is set to 100%? I would greatly appreciate your expert advice on how to solve this problem. Once again, thank you for your time and guidance.
The easiest way will be to export each layer with the same dimensions (width and height). You can also do it when the images have different dimensions, but it is more difficult to get the positioning right.
✅ Build Multi-step forms in Webflow:
inputflow.com
For anyone looking to make this responsive:
Width: 100%;
Height: 120vh (or whatever you like);
Max-width: 100%;
Object-fit: Cover;
Set all layers to these values
Bless you brother
This is the best Parallax Tutorial I've seen so far! Thank you very much! I'll go and watch all your content now!🤗
Great video! You do such a good job at explaining and giving useful examples for better understanding. Thank you!!
Oh, *that* is parallax?! I keep seeing mention of it, but nobody ever puts it up front 😆. And it turns out that's exactly what I needed, and just didn't know the world for 😂. Thank you!
Yes this is parallax. Well, that's what I call great timing 😉
Holy smokes this is so good. Did you come up with this yourself? Genius man 👏🏻 👏🏻 big fan
great video.much appreciate the video within the video examples for a better visual understanding.thank you
Oh nice !! this will definitely comes in handy for my next project !
Happy to hear that, Nabil :)
this is so great! Any advice on making this work on mobile?
Hi, great, only with a resolution less than, for example, 1300, but still on the desktop on top it gets an ugly white field? How can this be solved?
Im very interested into these animation techniques. Thank u. U got a new subscriber 😊
Welcome to the channel :)
i would love to see the mobile version of this
I am so glad for subscribing your channel thank you so much and keep it up🎉
Thanks for your support, Farid 😎
Would you be able to give an example of the values & units you would use to make this responsive?
I would just experiment with VH and VW units. The new DVH is also quite interesting for responsiveness.
Hei there, all nice but how to adjust it for other devices like mobile phone etc?
With responsive settings
I can see that you likely started from a cloneable like client first or something else or did you create it yourself? I am trying to be a better webflow developer but im not sure about what i should use when i start a new project.
I start all Webflow projects with the Client first cloneable
@@mikepecha thanks for your reply.
This is great content! Thank you for putting this up.
Question though,
I am trying to work this effect on my hero section as well, but since the hero is only 100vh I am really not getting the benefit of the scroll and unable to see the effect.
What do you recommend?
Is it possible for you to take a look at my Webflow link and tell me what I am doing wrong? I cant tell why I cant get a close effect even though all settings are the same. On my is quite jumpy
Sorry for the late reply, did you figure it out?
Thanks, great explanation
I love this!
Great Video! But how would you adjust the effect for smaller devices? Especially on mobile?
Good question! There are 3 options:
1) Disable it on mobile
2) Build the animation with relative units (%, vw, vh)
3) Set up a second animation which is for mobile only, and disable it on all other screens.
Seriously great job explaining things. You explain things in ways Im always annoyed other TH-camrs dont. My site is turning out great, but only problem is the background is still showing under the top image even after I scroll all the way down. Any advice?
can you post the link?
Is this only for Chrome? Did not work on Safari
Thanks Mike.
For many years even before home pcs were a thing, I have had it in my mind to create a particular scene with this type of method. Every few years I think about it but never do anything about it. This is very well explained though my method will not be as automated as I am still using PhotoImpact. I haven't done any image related projects for three or four years nor researched this and yet there you were, recommended by TH-cam (with 111 views !). Strangely, I have researched how to find videos with few or no views.
I've been pretty much been watching "Ren - Hi Ren" for three days solid.
The question is will I do anything now ? Back to Ren - Hi Ren.
Hi Chris, that's really cool, never heard of PhotoImpact before. This Parallax effect actually used to be a lot more popualr a few years ago, I think it is a really nice effect.
Mike :)
When optimizing it for mobile what would you recommend? We need to remove this effect and keep it simple?
Whatever creates the best user experience
all these images have same size frame right?
@@gugasamukashvili4947 yes
Great content! How do you prepare your photoshop layers? I tried something similar but my layers don't stack up nicely on top of the background... Any suggestiosns?
I just copied the image three times, and each image is a layer
Firstly, I want to express my appreciation for all the valuable knowledge and skills that you have shared.
I would like to kindly ask for your guidance on preparing assets in Photoshop. Based on your exceptional assets, it appears that they all have the same width and varying heights. When setting the width to 100% in webflow, they should not be stretched. However, I have a query regarding smaller image elements that do not occupy the entire width in Photoshop. In such cases, how would you suggest I set these image elements in webflow without having them scaled up and stretched when their width is set to 100%?
I would greatly appreciate your expert advice on how to solve this problem. Once again, thank you for your time and guidance.
The easiest way will be to export each layer with the same dimensions (width and height). You can also do it when the images have different dimensions, but it is more difficult to get the positioning right.
does this fall apart in mobile view?
You have to adjust it a little bit
Why did you use REM and now VW?
VW works as well, Laleesh. Probably even a little bit better in this case.
You explain easily without any complexity
Thank you :)
Bro can you please upload regular videos
♥
❤️
Anyone has this weird chunky behavior of the images when scrolling?
It is good but you didn't explain responsiveness!
Thanks