Creating a Parallax Slider in Webflow
HTML-код
- Опубликовано: 3 авг 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
Oh man, glad you're back. Plz keep uploading videos, they're really helpful.
Awesome man I was trying to do this manually with swiper, and was difficult. This is even easier and nice.
I'm actually amazed that in 2023, there STILL isn't a baked-in solution for image parallax effects in webflow.
Thanks Jose! glad you're back!
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.
Came here for the tutorial but you also helped me fix that 2:00 'hidden styles' issue with other sliders. Thanks!
Awesome! You were easy to follow along with and I love the speed you were going.
Under-under-under-underrated channel!
Love your videos! 😁
Amazing! I have applied the same pattern to my project and working perfectly fine. Thank you for sharing your idea and knowledge.
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!
I was looking at that slider just last week! I’m going to love this video
this video is incredible 😭you have such a knack for instructing. learned so much 🙏
Man, you’re fast. Love watching you work.
Okay. I'm now in the Webflow geek club. Cool stuff
Jose, I just found your content and you are a great great teacher! I like how you work efficiently. Great great!
Thanks! I'll be using it today! YOU'RE THE BEST JOSE!
GREAT JOB! LOVE IT
Awesome and very helpful tutorial! Thank you!
This was really good tutorial Jose ! Loads of tips and tricks there. Cheers
YOUR VIDEOS ARE TOO GOOD MAN!!
Love your videos dude - thank you
Simple and effective! Good job !! 😉😉
my favourite youtuber is back!
Great walk through!
Welcome back, Jose!
loved it man, awesome
Thanks a lot for the tutorial. Love it
Good Job Jose! Thank you so much!
Thanks a lot! Your video was helpful.
Great tutorial, man! Thanks
Absolute gold!
Great Video, thanks for the tips, it'll gonna be really useful!
Love your stuff!
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!
Amazing work
love this tutorial
just amazing!
that was really helpful! thanks a lot
Very nice video, thanks for this :)
Thanks a lot for your tutorial
thannk you so much you saved me
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.
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
Increadible
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?
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?
7:20 Parallax movement setting
9:34 Slider Buttons
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?
Thanks @JoseOcandoVideos.
How do I remove the space at the end of the slides
Amazing!!If i want to bind this with cms collection for same structure how to do this??
missed your videos
Love everything about this... except whatever that background noise is 😆
Is there away to loop back to the first slide and also how would you make this responsive for mobile?
One question how can I set up the end? so they can repeat again like a loop or something
Could you move right and left on scroll?
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.
can you tell which javascript library can achieve?
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!
how do you activate this web flow "find anything" search bar?
is there a way to clone this project?
Can these sliders be link with cms
man you crazy hahaha
And what about mobile?
How can the issue be fixed?
All I hear is Chat Nigga Based...Lool
I love your tutorials, such huge time savers
Can't see any parallax in this animation, though. It's just a simple slider animation Is this clickbait?.
Go to fast :(