CSS Scroll Snap

Подписаться 43 тыс.

Просмотров 47 тыс.

50% 1

Learn how to control scroll snapping for you web galleries with the CSS scroll-snap property. Scroll snap is relatively new and makes the animation and transition between slides much smoother for gallery or card like content transitions.
💖 SUBSCRIBE (Please) 💖
ru-vid.com?s...
Live Scrimba Code: scrimba.com/scrim/coe9643ac9e...
🙏 Become a Patron for support! 🙏
/ followandrew
📢 Social Media 📢
TWITTER (@followandrewedu) ➞ / followandrewedu
#css #webdev #tutorial

Опубликовано:

29 мар 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 34

@hasansolak23 2 года назад

For those who have struggled to make the code work... I realized that I forgot to set the container's height to its child height. For example, each of my child elements has a height of 100vh, I set the container's height to 100vh and it worked...

@nathanlove4449 Год назад

Thanks!

@alan_johnson_ 9 месяцев назад

you are the man, not even chatgpt can find whats wrong with it

@AleySoundz 3 месяца назад

Thank you! This works perfect for what I need.

@mendistudio 3 года назад

Very simple and effective tutorial thanks. So after scrolling the scroll-area through you can continue scrolling the other elements below right? I thought this was done with gsap or similar.

@FollowAndrew 3 года назад

Yep, that's correct. Super smooth animations too for the scrolling, as it's done in CSS and can be accelerated on the GPU.

@AnsolasDe Год назад

Is there a way tincrese the delay for teh snapping ? scoll snap time ? It feels ages when the snaps kicks in

@lerabykova1362 Год назад

How to actually make a different look af that scroll bar on the side, different thickness and colour, add/remove arrows? Thank you

@metron2590 2 года назад

this does not work for me for some reason, the scroll snap just doesnt work

@fadiajami5588 11 месяцев назад

add the overflow:auto; property and it works

@vm9010 3 года назад

Hi! Great tutorial. I have an issue - when the snap occurs it skips 1 section between (it jumps from section 1 to 3). Any idea why? Thank you in advance.

@joamarticorena9018 Год назад

I am having the same problem, how did you solve it?

@badcatdesign 3 года назад

@2:12 cannot see the properties dropdown in the YT vid - something's not playing nice with the scriba recording.

@FollowAndrew 3 года назад

Yeah, I noticed this in post as well. Not sure why the playback doesn't show that.. I've come across a time or two when the live preview doesn't show properly on playback as well..

@nilachol4 2 года назад

when I scroll(in google chrome), it jumps two slides at a time :(

@tuyu6404 7 месяцев назад

Why this is not work on my Case,😢 btw on my Case i use grid to the container. Please explain to me.

@danielluizpereira6403 Год назад

nice

@ralkey 3 года назад

my scroll snapping overshoots from the 1st to the 3rd and also the other way. (i only have 3 alement to snap to) why does this happen and how do i fix it?

@aryancoderc4142 3 года назад

same here, did you find any solution?

@ralkey 3 года назад

@@aryancoderc4142 nope. i saw on stack overflow that its probably a problem with my google chrome version. so i updated it but it didnt fix it.

@aryancoderc4142 3 года назад

@@ralkey mine is the last version too but it doesn't work, I tried on my laptop it works but not on pc with 28inch monitor, but it works perfectly on firefox

@dharnilm 6 месяцев назад

your screen recording has not captured the drop down list .

@tahirbalci Год назад

I tried to add this scroll-snap to elementor custom css. It works in editor. but it doesn't work in preview and active page. Why?

@WTPleo Год назад

Have you figured it out?

@tahirbalci Год назад

@@WTPleo i tried another way. if you want i can share it with you.

@WTPleo Год назад

@@tahirbalci yes please

@MajdYafi 3 года назад

Says I need permission to view the code in Scrimba

@FollowAndrew 3 года назад

Think I've got that link fixed, try again now?

@Dexter101x 3 года назад

The sound kept cutting out

@SomeRandomPiggo 2 года назад

didnt for me, think its a client side issue

@Ctrl_Alt_Elite Год назад

@@SomeRandomPiggo lol it's a video editing blunder, happened a couple times towards the end of the vid

@ivanazirojevic3544 Год назад

Not a really nice tutorial to be honest, it could have been a bit broader and a bit more creative... give us a nicer example so we can see how flexible the property actually is and what can be achieved with it... this gave me as much info as the first thing that pops up when you google 'scroll-snap-type'. also the sound switching off at some points is strange.