How to Implement Stacking Cards Scrolling Effect in CSS
HTML-код
- Опубликовано: 3 янв 2023
- 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.
Наука
![MURDER DRONES Series Finale [TRAILER]](http://i.ytimg.com/vi/p6mhC5Iatns/mqdefault.jpg)
I was finding the video and it's the only video i got after 30 min search. Thanks man
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!
Thank you! You make this so much simple than any videos i have researched!
Thanks a lot! 🙏
Much love from Jamaica! Keep up the good work!
Thanks! You made my day ❤
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 👑
Thanks for being so straight forward.
Thank you! 🙏
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 :)
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 this example, never thought about this usage if sticky position
Thanks! Yeah, sticky position is a great feature in CSS.
Bro you're doing great work. Keep it up!
Thanks a lot ❤
This was soooo Informative!! Definitely gonna use this :)
I'm really happy that you liked it. Thanks!
Bro you should make more videos on different tricks
Absolutely brilliant
straight to the point, thanks
Thank you! 🙏
Bro.. it was that simple? Great video man!
Thank you!
Amazing. Merci 🙏
will try this! thank you!❤
Thank you ❤
Amazing video, man
Thanks a lot :)
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.
@@user-ip1cj4ox6z It might be easier to show in a video, maybe @tahazsh will do one? If not I'll try :)
Wow this was actually easy
thank you so much man
Thank you! I'm really glad that you liked it.
Thank You
Bro you are genius
superb !
Thank you so uch u made my day I came to the solution
Such a great video😊
Thank you 😄
Thanks bro it was very helpful
@@cristianscoop7487 Thank you! 🙏
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/
Thanks bro really helpful
Thank you!
Will anchor links work with these cards?
love from Bangladesh
Thank you for the kind words. You just made my day ❤
Thanks for the content! You voice actually reminds me of Kevin Powell
Thank you! Your comment actually made me happy because Kevin is awesome!
This video is very usefull ! Thanks Dear !
I’m really glad you liked it. Thanks!
Thank you for the video its an amazing one. Where can I get the code?
Hey bro that's amazing you got a new subscribe
Thank you! That means a lot to me!
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
ty for this video , but u can use sticky position that will help u better
nice, very interesting
Glad you liked it! Thanks!
Very useful
Thanks :)
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
nice
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.
good
Do cards will slide down, when we scroll up again?
Yeah, it will work the same if you scroll up and down again.
روعة شكرا لك، هالحركة ببالي أطبقها لكني ما عرفت اسمها او وصفها
فعلاً، تسمية الاشياء بتكون صعبة في بعض الاحيان. شكراً لك😄.
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
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.
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
Can you share the code for effect to use for NOn-Coders please
Sure, here it is: gist.github.com/TahaSh/5cc4328222b77631ba034e204d228b33
Code sample ?
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.
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.
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 ruclips.net/video/TGh2NpCIDlc/видео.html step by step video
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
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
i want your coding font please
Share your extensions
Source Code??
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
*clicks* Noice...
make card scroll like slider
Please use a constant image instead of an always-changing random one. It’s hard to understand the effect of the img’s style
"background-attachment: fixed" does the same thing in less verbose way
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!
Using classes to define a header and footer in the age of HTML 5... *shudder*
I mean it still works 😂😂😂.