How to Implement Stacking Cards Scrolling Effect in CSS
ฝัง
- เผยแพร่เมื่อ 29 ก.ย. 2024
- In this video, you will learn how to implement a cool scrolling effect using CSS. It will be useful when you want, for example, to tell a story using a bunch of stacking cards.
![[TH] FS vs BME - VCT Ascension Pacific - Lower Bracket Final](http://i.ytimg.com/vi/wnygqsR2Fig/mqdefault.jpg)
Amazing way to teach! Congratulations! Thank you very much for this example, and again, congratulations for your simple yet complete and precise way of showing us this effect! Greetings from Argentina! 🇦🇷👍🏻🖖🏻
Thank you for your kind words. You just made my day.
que pasa hermano, saludo!
Wow , that's a cool trick. Thanks for sharing. Waiting for more such contents.
Thank you! That means a lot to me.
Thank you for the video its an amazing one. Where can I get the code?
Thanks bro it was very helpful
@@cristianscoop7487 Thank you! 🙏
Bro you're doing great work. Keep it up!
Thanks a lot ❤
love from Bangladesh
Thank you for the kind words. You just made my day ❤
Thank you it was helpful
@@ahmedghallab5342 Thanks :)
Amazing video, man
Thanks a lot :)
روعة شكرا لك، هالحركة ببالي أطبقها لكني ما عرفت اسمها او وصفها
فعلاً، تسمية الاشياء بتكون صعبة في بعض الاحيان. شكراً لك😄.
Share your extensions
"background-attachment: fixed" does the same thing in less verbose way
What vscode theme do you use?
It's called Night Owl: marketplace.visualstudio.com/items?itemName=sdras.night-owl
@@tahazsh Thanks!
@@tahazsh bro , how to implement your font in vscode, font name or extension name ?
@@ZeshanMukhtar1 I'm using a font called Victor Mono (instructions included in the link): github.com/rubjo/victor-mono
@@tahazsh Thanks Bro , It worked , love from pakistan
If you get a horizontal scrollbar, simply add max-width: 100% to your .card class. This means the element will try to do 100vw, but clamp down to 100% of the actual available space. This is a browser bug that not all browsers have solved yet, and the vertical scrollbar is considered in the 100vw calculation in some of them
thank you very much
Great observation 🥂
thx 👑
Amazing video. Will definitely help out in my uni website project! Ty
I'm very happy to hear that it's helpful to you. Thank you :)
I was finding the video and it's the only video i got after 30 min search. Thanks man
Using classes to define a header and footer in the age of HTML 5... *shudder*
I mean it still works 😂😂😂.
Wow this was actually easy
cool, great video mate. But, how to scale down the previous card as we scroll to next card? but the scale animation delayed for about 50px or 100px before the next card showed up?
Thank you, Arie! It's actually more work than you expect. The answer to this requires a whole new video, but unfortunately I'm not planning to create it soon. But to give you a hint, you need to listen for the scroll event and based on how much of the next card is revealed apply some CSS changes to the current card. And also keep an eye on the new scroll-driven animation API, which allows you to apply animation based on scrolling using CSS only. Here's a good article explaining it: css-tricks.com/practical-use-cases-for-scroll-linked-animations-in-css-with-scroll-timelines/
Much love from Jamaica! Keep up the good work!
Thanks! You made my day ❤
i want your coding font please
Bro you should make more videos on different tricks
Absolutely brilliant
Thank you! You make this so much simple than any videos i have researched!
Thanks a lot! 🙏
Please use a constant image instead of an always-changing random one. It’s hard to understand the effect of the img’s style
Source Code??
thank you so much man
Thank you! I'm really glad that you liked it.
*clicks* Noice...
Code sample ?
Thank You
ty for this video , but u can use sticky position that will help u better
Thanks bro really helpful
Thank you!
Thank you so uch u made my day I came to the solution
Awesome tutorial, thank you! :)
What VS Code extension are you using that shows you your syntax errors? It looks very nice!
Thank you! Yeah, it's a pretty useful plugin called Error Lens. marketplace.visualstudio.com/items?itemName=usernamehw.errorlens
This was soooo Informative!! Definitely gonna use this :)
I'm really happy that you liked it. Thanks!
Will anchor links work with these cards?
what is rimage and how to set it up?
It's a code snippet in vscode. Here's an article showing you how to create one: code.visualstudio.com/docs/editor/userdefinedsnippets.
rimage stands for "random image". It expands to Unsplash's random image API. So you can use this link to get a random image (and replace w for width and h for height) source.unsplash.com/random/wxh
I hope this helps :)
@@tahazsh Thank you so much!!
@@tahazsh th-cam.com/video/TGh2NpCIDlc/w-d-xo.html step by step video
Bro.. it was that simple? Great video man!
Thank you!
Thanks for the content! You voice actually reminds me of Kevin Powell
Thank you! Your comment actually made me happy because Kevin is awesome!
Helllo, how did you made that glass effect? great video
Thanks! I think you mean reducing opacity for the background color using background: rgba(20, 50, 100, 0.8). The last value, 0.8, means that set the opacity (which is actually the alpha channel for the color) to 80%. If you set it to 0, then the background will be completely transparent, and if you set it to 1, then it will be completely opaque.
make card scroll like slider
Can you share the code for effect to use for NOn-Coders please
Sure, here it is: gist.github.com/TahaSh/5cc4328222b77631ba034e204d228b33
Bro you are genius
Do cards will slide down, when we scroll up again?
Yeah, it will work the same if you scroll up and down again.
Hey bro that's amazing you got a new subscribe
Thank you! That means a lot to me!
Sorry I hope I haven't gone to the well to many times. However the fixed code works perfectly but the last card slides up to the vert top. i set the top of the cards to stop below the header and again all but the last card stops where I would expect. It's just the last card slides up under the header. I have tried many things such ad giving the last card an id and giving it an exact position. nothing works. Thank you in advance
Just put a margin-top on the first card and margin-bottom on the last card of the size of the header / footer.
@@tiedsergosu7715 awesome thanks. You are very kind and helpful
@@hotshotrecordsadmin I’m glad I could help you out!
Thank you, @TIED Sergosu for answering the question.
@hotshotrecordsadmin Please don't hesitate to ask any other questions you have.
Great tutorial, thank you! At 4:23 one thing that's worth setting up is a keybind for wrapping with emmet. In VS Code you can set it up easily (I use a corded Ctrl + w then e, for 'wrap' and 'emmet' so it's easy to remember). Then when you need to wrap some section in a new element just highlight the text and press the shortcut key (or use the terminal and search wrap with emmet). I didn't explain that very well but I thought it might be useful to some.
Pls explain easily.
@@Gukie-u6p It might be easier to show in a video, maybe @tahazsh will do one? If not I'll try :)
Thank you for this example, never thought about this usage if sticky position
Thanks! Yeah, sticky position is a great feature in CSS.
Thanks for being so straight forward.
Thank you! 🙏
nice
good
Can I recreate this with Tailwind CSS?
You should be able to. Let me know if something didn't work, and I'll take a look.
This video is very usefull ! Thanks Dear !
I’m really glad you liked it. Thanks!
Can u plz send us your VS Code font?
I'm using Victor Mono: rubjo.github.io/victor-mono/
Note that to get the same italic style on some text, your editor theme should support that. In that video, I'm using the Night Owl theme: marketplace.visualstudio.com/items?itemName=sdras.night-owl
superb !
is there an easy way to keep the header and footer in place at the top and bottom?
Yes, you can set their position to fixed, and they will always be sticky regardless of the current scroll position.
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 10;
}
@@tahazsh Thank you
straight to the point, thanks
Thank you! 🙏
Can you please give me the images that use in the website that you shown first in the video
These images are randomly generated from Unsplash API. You can use this link source.unsplash.com/random/wxh and replace w with width and and h with height, and you will get a random image with that size every time you reload the page.
I hope this helps :)
@@tahazsh ok thanks
@@tahazsh if you have saved then please share Google drive link
He used an API, so the images were random, he doesn't have it
I've been wanting to do something like this for a while. How do you get the "perfect" images to use? All videos just look like they nail the selection, but where would I find this myself?
what do you mean by "perfect" img?
hes using a random image api, its basically a link that generates a new image everytime with the src of the image set to the image api
Amazing. Merci 🙏
will try this! thank you!❤
Thank you ❤
Wow! What plugins do you use?
Thanks! Do you mean plugins for VSCode?
He is using the built in Emmet in VSCode which allows you to define some short rules and press enter to output HTML according to the description. For example div.card*5 would create 5 div elements, with the class card
nice, very interesting
Glad you liked it! Thanks!
Such a great video😊
Thank you 😄
Very useful
Thanks :)
Nice vídeo ❤
Thanks ❤
please upload more stuff like this.....your work is nice
Thank you! My next video will be up very soon-and I'll get back to uploading new videos regularly.
pls use background : url(.... ); for background image.
Why?
Choosing between an image tag, and loading images from css should vary.
using the img tag is the best option, although it requires more styling.
Imagine your image file had to change. Will you prefer editing your css file, or just passing the image source to the tag (maybe in a react application)
@@coderoyalty Yeah I work like this too, I use background: url() for static images and supply to the src attribute in the image tag when things need to be dynamic
@@coderoyalty
background-image just gets the job done for me with simpler & less code.
obviously , its a matter of preference, when there are many ways to solve the problem at hand.
You can just apply inline-styles in your JS/React Component Files.
If you want you can also have a custom data-attribute to set the src.
Feel free to reply back!