Creating a Parallax Slider in Webflow
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
Пікірлер: 78
Oh man, glad you're back. Plz keep uploading videos, they're really helpful.
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.
Awesome! You were easy to follow along with and I love the speed you were going.
Under-under-under-underrated channel! Love your videos! 😁
Came here for the tutorial but you also helped me fix that 2:00 'hidden styles' issue with other sliders. Thanks!
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
Man, you’re fast. Love watching you work.
Welcome back, Jose!
Jose, I just found your content and you are a great great teacher! I like how you work efficiently. Great great!
this video is incredible 😭you have such a knack for instructing. learned so much 🙏
This was really good tutorial Jose ! Loads of tips and tricks there. Cheers
Thanks! I'll be using it today! YOU'RE THE BEST JOSE!
YOUR VIDEOS ARE TOO GOOD MAN!!
Awesome and very helpful tutorial! Thank you!
GREAT JOB! LOVE IT
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!
Awesome man I was trying to do this manually with swiper, and was difficult. This is even easier and nice.
my favourite youtuber is back!
Love your videos dude - thank you
Simple and effective! Good job !! 😉😉
Great walk through!
Great tutorial, man! Thanks
loved it man, awesome
Good Job Jose! Thank you so much!
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.
Great Video, thanks for the tips, it'll gonna be really useful!
Thanks a lot for the tutorial. Love it
I'm actually amazed that in 2023, there STILL isn't a baked-in solution for image parallax effects in webflow.
Absolute gold!
love this tutorial
Love your stuff!
Amazing work
Thanks a lot for your tutorial
Thanks a lot! Your video was helpful.
just amazing!
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.
@goldenant9450
Жыл бұрын
i dont understand perspective at all
that was really helpful! thanks a lot
Very nice video, thanks for this :)
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?
Okay. I'm now in the Webflow geek club. Cool stuff
thannk you so much you saved me
So good
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?
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
Increadible
Is there away to loop back to the first slide and also how would you make this responsive for mobile?
thanks a lot ur so adorable
Hi! New to webflow. Is there a way to make one of the slide wider? For example a landscape photo?
@shaheerrahman87
Жыл бұрын
You could add a combo class to that particular slide and change its width.
Could you move right and left on scroll?
can you tell which javascript library can achieve?
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?
@FatherMuldoon
2 жыл бұрын
I'm heaving the same issue, did you happen to find a solution?
@dkncd
2 жыл бұрын
@@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.
@FatherMuldoon
2 жыл бұрын
@@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?
missed your videos
Can these sliders be link with cms
7:20 Parallax movement setting 9:34 Slider Buttons
And what about mobile? How can the issue be fixed?
Love everything about this... except whatever that background noise is 😆
man you crazy hahaha
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 :(