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

  • @malindalakshan7490
    @malindalakshan74903 жыл бұрын

    Oh man, glad you're back. Plz keep uploading videos, they're really helpful.

  • @miguelmao1593
    @miguelmao15933 жыл бұрын

    Thanks Jose! glad you're back!

  • @paulperole
    @paulperole Жыл бұрын

    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.

  • @nakeyshiaS
    @nakeyshiaS2 жыл бұрын

    Awesome! You were easy to follow along with and I love the speed you were going.

  • @elmedin26
    @elmedin263 жыл бұрын

    Under-under-under-underrated channel! Love your videos! 😁

  • @prism6
    @prism62 жыл бұрын

    Came here for the tutorial but you also helped me fix that 2:00 'hidden styles' issue with other sliders. Thanks!

  • @harshadkumarpatel3341
    @harshadkumarpatel33412 жыл бұрын

    Amazing! I have applied the same pattern to my project and working perfectly fine. Thank you for sharing your idea and knowledge.

  • @zoegatti857
    @zoegatti8577 ай бұрын

    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!

  • @kudz
    @kudz3 жыл бұрын

    I was looking at that slider just last week! I’m going to love this video

  • @MartinAlejandro
    @MartinAlejandro2 жыл бұрын

    Man, you’re fast. Love watching you work.

  • @RocknRollCEO
    @RocknRollCEO3 жыл бұрын

    Welcome back, Jose!

  • @claudeball9163
    @claudeball9163 Жыл бұрын

    Jose, I just found your content and you are a great great teacher! I like how you work efficiently. Great great!

  • @ericcyxng
    @ericcyxng2 жыл бұрын

    this video is incredible 😭you have such a knack for instructing. learned so much 🙏

  • @dasgood
    @dasgood Жыл бұрын

    This was really good tutorial Jose ! Loads of tips and tricks there. Cheers

  • @bailey6759
    @bailey67592 жыл бұрын

    Thanks! I'll be using it today! YOU'RE THE BEST JOSE!

  • @tanishkmahajan
    @tanishkmahajan3 жыл бұрын

    YOUR VIDEOS ARE TOO GOOD MAN!!

  • @ALittleCrazy666
    @ALittleCrazy6662 жыл бұрын

    Awesome and very helpful tutorial! Thank you!

  • @webjoe4556
    @webjoe45563 ай бұрын

    GREAT JOB! LOVE IT

  • @jacindagarcia
    @jacindagarcia2 жыл бұрын

    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!

  • @jvvicr
    @jvvicrАй бұрын

    Awesome man I was trying to do this manually with swiper, and was difficult. This is even easier and nice.

  • @aonnoysengupta
    @aonnoysengupta3 жыл бұрын

    my favourite youtuber is back!

  • @wearestudiotonic
    @wearestudiotonic3 жыл бұрын

    Love your videos dude - thank you

  • @federicamanguso7443
    @federicamanguso74432 жыл бұрын

    Simple and effective! Good job !! 😉😉

  • @ldpuri
    @ldpuri2 жыл бұрын

    Great walk through!

  • @user-qj6wz9ei6t
    @user-qj6wz9ei6t Жыл бұрын

    Great tutorial, man! Thanks

  • @jeremiahbanda7534
    @jeremiahbanda75342 жыл бұрын

    loved it man, awesome

  • @mymusic1260
    @mymusic12602 жыл бұрын

    Good Job Jose! Thank you so much!

  • @kellvix6715
    @kellvix67152 жыл бұрын

    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.

  • @juancarvalho
    @juancarvalho Жыл бұрын

    Great Video, thanks for the tips, it'll gonna be really useful!

  • @vanessavolk4111
    @vanessavolk41112 жыл бұрын

    Thanks a lot for the tutorial. Love it

  • @crooker2
    @crooker2 Жыл бұрын

    I'm actually amazed that in 2023, there STILL isn't a baked-in solution for image parallax effects in webflow.

  • @Jochemms
    @Jochemms3 жыл бұрын

    Absolute gold!

  • @SebastianMorales-cy1li
    @SebastianMorales-cy1li2 ай бұрын

    love this tutorial

  • @simonsjodin2104
    @simonsjodin2104 Жыл бұрын

    Love your stuff!

  • @werewolf5
    @werewolf52 жыл бұрын

    Amazing work

  • @user-sf1pq4ee2e
    @user-sf1pq4ee2e5 ай бұрын

    Thanks a lot for your tutorial

  • @Svetlana-hk3mm
    @Svetlana-hk3mm5 ай бұрын

    Thanks a lot! Your video was helpful.

  • @gabrielcoelho2686
    @gabrielcoelho2686 Жыл бұрын

    just amazing!

  • @mariusjurtz
    @mariusjurtz3 жыл бұрын

    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

    @goldenant9450

    Жыл бұрын

    i dont understand perspective at all

  • @EmillianoRibeiro
    @EmillianoRibeiro Жыл бұрын

    that was really helpful! thanks a lot

  • @akashchoudhary5736
    @akashchoudhary57363 жыл бұрын

    Very nice video, thanks for this :)

  • @the-secrettutorials
    @the-secrettutorials2 жыл бұрын

    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?

  • @CirdeceSk8er
    @CirdeceSk8er2 жыл бұрын

    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?

  • @jessypage2172
    @jessypage21723 жыл бұрын

    👏Thank you for the video! 🤔How to mix that with a dynamic collection natively?

  • @jayreambonanza1991
    @jayreambonanza19917 ай бұрын

    Okay. I'm now in the Webflow geek club. Cool stuff

  • @layla-lz8pi
    @layla-lz8pi5 ай бұрын

    thannk you so much you saved me

  • @nickblackmon842
    @nickblackmon8423 жыл бұрын

    So good

  • @LearningandSharing0
    @LearningandSharing0 Жыл бұрын

    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?

  • @realmassimomuntoni
    @realmassimomuntoni2 жыл бұрын

    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?

  • @arpitabanik6240
    @arpitabanik6240Ай бұрын

    Amazing!!If i want to bind this with cms collection for same structure how to do this??

  • @empressdrelsie
    @empressdrelsie9 ай бұрын

    Thanks @JoseOcandoVideos. How do I remove the space at the end of the slides

  • @saddats999
    @saddats999 Жыл бұрын

    Increadible

  • @cordarro100
    @cordarro100 Жыл бұрын

    Is there away to loop back to the first slide and also how would you make this responsive for mobile?

  • @thrrlya
    @thrrlya6 ай бұрын

    thanks a lot ur so adorable

  • @marcellawinograd376
    @marcellawinograd376 Жыл бұрын

    Hi! New to webflow. Is there a way to make one of the slide wider? For example a landscape photo?

  • @shaheerrahman87

    @shaheerrahman87

    Жыл бұрын

    You could add a combo class to that particular slide and change its width.

  • @hellalocal
    @hellalocal7 ай бұрын

    Could you move right and left on scroll?

  • @reesgargi9978
    @reesgargi9978 Жыл бұрын

    can you tell which javascript library can achieve?

  • @jvvicr
    @jvvicrАй бұрын

    One question how can I set up the end? so they can repeat again like a loop or something

  • @dkncd
    @dkncd2 жыл бұрын

    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

    @FatherMuldoon

    2 жыл бұрын

    I'm heaving the same issue, did you happen to find a solution?

  • @dkncd

    @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

    @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!

  • @zardiax
    @zardiax4 ай бұрын

    how do you activate this web flow "find anything" search bar?

  • @NightBlade58
    @NightBlade582 жыл бұрын

    is there a way to clone this project?

  • @iamtommyok
    @iamtommyok2 жыл бұрын

    missed your videos

  • @emiolaodunayo440
    @emiolaodunayo4409 ай бұрын

    Can these sliders be link with cms

  • @lamouralice4533
    @lamouralice45336 ай бұрын

    7:20 Parallax movement setting 9:34 Slider Buttons

  • @hagaitsidon3958
    @hagaitsidon3958 Жыл бұрын

    And what about mobile? How can the issue be fixed?

  • @joelm1988
    @joelm19883 жыл бұрын

    Love everything about this... except whatever that background noise is 😆

  • @caiolopes4680
    @caiolopes46802 жыл бұрын

    man you crazy hahaha

  • @downtowndesign
    @downtowndesign Жыл бұрын

    Can't see any parallax in this animation, though. It's just a simple slider animation Is this clickbait?.

  • @mranye
    @mranye Жыл бұрын

    All I hear is Chat Nigga Based...Lool I love your tutorials, such huge time savers

  • @josmito
    @josmito2 жыл бұрын

    Go to fast :(