Ingenious Position Sticky Layouts Inspired by Teamway.io - a Webflow Tutorial
HTML-код
- Опубликовано: 11 июл 2024
- - ABOUT -
Teamway (teamway.io/) uses this really cool expanding accordion layout to communicate benefits to the user. In this Webflow tutorial we'll recreate the accordion strategy inside of Webflow using position sticky.
- CHAPTERS -
Chapter 01 | Intro - 00:00
Chapter 02 | Setting up the accordion infrastructure - 1:00
Chapter 03 | Styling with position sticky - 05:20
Chapter 04 | Outro - 10:38
- LINKS -
Staging url: jocando-tutorials.webflow.io/...
Read only-link: 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
![Natanael Cano x Oscar Maydon - Giza [Official Video]](http://i.ytimg.com/vi/eXCS6-MSQ_Y/mqdefault.jpg)
Very helpful. Thanks for sharing.
I love the cool thing you bring in your video (we want more of this)
Jose, thank you for creating this very thorough and well-considered tutorial. Much obliged!
It's so cool, and so fun !!! Thank you very much for sharing that tuto with us...
Damn you covered everything, not just showing how do it. Loving it! Appreciate it! I'm so gna use this somewhere.
love your videos Jose,
super friendly.
Always amazing videos!! Thank you
Nice work, I like the clean approach!
Thank you, José! Awesome tutorial. Took me a bit to get it to work on my project, but once I dialed it in…it's so smoooooth!! Great tutorial…your pace and calm demeanor is just the best!
wow man! after a few videos of yours, I decided that you are awesome!
This is awesome! I was just about to research how to achieve something like this, thank you man!
That's a great video Jose. Keep up the great work!
You are genius! Thank you so much!
love your videos and love your voice, it's soo relaxing, thank you Jose!
Great video, you're the best!
Amazing - thank you, you totally fixed the page I was working on :)
Great video, thanks!
This is awesome! Just FYI to anyone looking, this design doesn't really work unless the content for every pane is about the same size. Each individual pane's height has a great effect on how this whole thing works. If they're all the same height, it works great. If they are of varying heights that's where it doesn't really work.
Great point! You could use a minimum vh style to match the sizing if the content is different.
Thank you Jose!
Thank you Jose!!
Thank you for the tutorial
Great video! watched it for the first time about a year ago and I keep coming back to it for how genius it is
Thank you so much!
Thank you Josea lot, i applied this for my portfolio website
This is cool ❤️
Nice!!
great video explanation ! i'll subs cause of it
Good job, thx 👏
so easy and nice
That's awesome! You just eanred a sub! Gonna try this tomorrow:)
your voice is so soothing
Welcome back!
Thanks Miguel! Trying to do videos once a week. We'll see if that happens :)
awesome
Great video! I just wish there was a recap at the end to remind me of the steps and which I could screenshot to refer back to!
Thank you so much for this tutorial and for thoroughly explaining every step! Has anyone else had a problem where it cuts off the top half of the accordion pane so you can't read all the content? I tried adding some pixels to the top of the sticky position but then the sliding behaviour doesn't work as it should
broooooooooooooooo i love you
I love the part where you admit that you have difficulty sticking to your schedule... Lol. It sounds alot like me! I've set similar goals; it's hard to "stick" to it. But I can blame Parkinson's! Blessings ~Dennel
Oh... Great demonstration, too!
Wow youre so underrated. Enjoying your content so far. I just have a question with the div “accordion-pane” cause you first set its position to relative and then you changed it to sticky, why does that not affect the accordion number?
Jose, gracias por tu trabajo es MUY valioso! Thanks guy for your great work. I tried the whole thing, playing around with the upper margin and positioning and after a while it worked out perfectly on desktop device. BUT when i opend the page on Safari or Chrome on my IPad (without Scroll-Function) the Scroll-Effect didnt work and my five panes stucked to the top and didnt open :-( Anybody out there with the same problem or any solutions? T
Hey Jose idk if it is to do with the new Webflow changes but your design no longer works for some reason, in staging it is also off. the top pane is too high above the other two? and when I follow your instructions I get the same issue?
Every time I watch one of Jose’s brilliant videos, I have to rush off and implement the technique somewhere…
Has anyone else encountered issues when moving to responsive design? for some reason, my cards are no longer sticky