Creating a Parallax Slider in Webflow
ฝัง
- เผยแพร่เมื่อ 2 ส.ค. 2024
- A couple of days ago I came across this site: niarratravel.com. There's a lot of beautiful things about it, but I was really drawn to the parallax slider and promised myself to try recreating it in Webflow using just the slider component and interactions 2.0.
- CHAPTERS -
Chapter 01 | Starting the build 01:04
Chapter 02 | Developing the card 02:51
Chapter 03 | Developing the slider buttons 09:02
Chapter 04 | Animating the slider 10:48
- LINKS -
jocando-tutorials.webflow.io/...
preview.webflow.com/preview/j...
-- SKILLSHARE --
If you're a beginner or intermediate user, check out my Skillshare class: "Webflow for Beginners." Together, we create a simple one page portfolio website for a photographer, starting with the assumption you don't have any experience with HTML, CSS, or Webflow. Use the link below to get 2 months of Skillshare for free.
skl.sh/2PU9tML
All Tutorials:
jocando-tutorials.webflow.io/
- ABOUT ME -
Serve - My Creative Studio’s Site
www.madebyserve.com/
Dribbble
dribbble.com/Jose_Ocando
Twitter
/ jaocando
Instagram
/ jose.a.ocando
Thanks Jose! glad you're back!
Awesome! You were easy to follow along with and I love the speed you were going.
Oh man, glad you're back. Plz keep uploading videos, they're really helpful.
Amazing! I have applied the same pattern to my project and working perfectly fine. Thank you for sharing your idea and knowledge.
I was looking at that slider just last week! I’m going to love this video
Under-under-under-underrated channel!
Love your videos! 😁
I'm 2 mins into the vid and can already tell you're a good teacher. thanks for explaining your thought process as you go.
this video is incredible 😭you have such a knack for instructing. learned so much 🙏
Came here for the tutorial but you also helped me fix that 2:00 'hidden styles' issue with other sliders. Thanks!
Man, you’re fast. Love watching you work.
Thanks! I'll be using it today! YOU'RE THE BEST JOSE!
Awesome and very helpful tutorial! Thank you!
Jose, I just found your content and you are a great great teacher! I like how you work efficiently. Great great!
This was really good tutorial Jose ! Loads of tips and tricks there. Cheers
Thank you so much Jose! You're such a great instructor and this tutorial 100% worked for me. As someone new to Webflow, I have been struggling to find tutorials that I can easily follow, but your video was extremely straightforward and easy to follow and you do such a good job with explaining the how and why. Will continue to watch your tutorials and learn more from you!
GREAT JOB! LOVE IT
Welcome back, Jose!
I'm actually amazed that in 2023, there STILL isn't a baked-in solution for image parallax effects in webflow.
Love your videos dude - thank you
YOUR VIDEOS ARE TOO GOOD MAN!!
Simple and effective! Good job !! 😉😉
Great walk through!
Thanks a lot for the tutorial. Love it
Good Job Jose! Thank you so much!
loved it man, awesome
Awesome man I was trying to do this manually with swiper, and was difficult. This is even easier and nice.
Great tutorial, man! Thanks
Hi Jose,
My name's Jacinda I started learning Webflow recently and the slideshow function has been difficult for me to manipulate but your tutorial is helping alot so far. Thank you!
Great Video, thanks for the tips, it'll gonna be really useful!
Love your stuff!
my favourite youtuber is back!
Absolute gold!
just amazing!
love this tutorial
Amazing work
Thanks a lot for your tutorial
Thanks a lot! Your video was helpful.
that was really helpful! thanks a lot
Great tutorial! I'll be applying some things here to a project of mine. Maybe the parallax effect would be more pronounced if the images were wider so it had more overflow material to animate.
Very nice video, thanks for this :)
thannk you so much you saved me
Okay. I'm now in the Webflow geek club. Cool stuff
So good
Great tutorial. I like your calm and natural presence in front of the camera. I think you could also recreate the effect by affecting the z-position of the image and by giving the outer section a children-perspective of 1000. I’m on my phone right now but I will test this tomorrow.
i dont understand perspective at all
I love this tutorial - I've learned so much from that example
Btw. The slides keep scrolling until the last slider hits the left most point of the screen. Is there any way I can prevent that?
Increadible
Great tutorial!! How would you make it so that when you navigate, it doesn't overflow to the section on the left, but still overflows past the edge of the viewport on the right?
👏Thank you for the video!
🤔How to mix that with a dynamic collection natively?
thanks a lot ur so adorable
Hi, really thanks for this tutorial. I'm using this in a project that i'm working on.. I just had one doubt... when I reach the end of the slider it snaps back to first, how do i make the slider stop at the last bit?
Great tutorial but I have some problems though, it's like the body width changes and adapts to the width of all the content inside the carousel, instead i would like to keep the width of the main screen and in responsive mode (320 px) while swiping the cards it switches the one in the middle so it jumps from the 2nd to 4th and viceversa, how can I fix these problems?
missed your videos
7:20 Parallax movement setting
9:34 Slider Buttons
Is there away to loop back to the first slide and also how would you make this responsive for mobile?
Amazing!!If i want to bind this with cms collection for same structure how to do this??
Thanks @JoseOcandoVideos.
How do I remove the space at the end of the slides
Love everything about this... except whatever that background noise is 😆
Hi! New to webflow. Is there a way to make one of the slide wider? For example a landscape photo?
You could add a combo class to that particular slide and change its width.
is there a way to clone this project?
One question how can I set up the end? so they can repeat again like a loop or something
Thanks so much for the tutorial! The slider shows an empty slide at the end. At 13:24, right when you slide at the end it's like the slider is reading another slide that isn't there. How do I get rid of that?
I'm heaving the same issue, did you happen to find a solution?
@@FatherMuldoon Sort of. I just set the section to overflow auto, so that way I can just use the pad on my mac laptop top scroll right. It's not the best solution though because it's not very effective for pc users with a mouse to scroll.
@@dkncd Thanks for your reply, I decided to use a different method as I needed my sliders content to be dynamic. I used refokus slider generator which you can use directly on the collection list and create a slider of it. Works great!
Could you move right and left on scroll?
can you tell which javascript library can achieve?
how do you activate this web flow "find anything" search bar?
man you crazy hahaha
Can these sliders be link with cms
And what about mobile?
How can the issue be fixed?
Can't see any parallax in this animation, though. It's just a simple slider animation Is this clickbait?.
All I hear is Chat Nigga Based...Lool
I love your tutorials, such huge time savers
Go to fast :(