proudyyyy
Explore posts from serversKPCKevin Powell - Community
•Created by proudyyyy on 12/22/2023 in #front-end
Can animation-timeline be used on multiple selectors?
So what I am trying to achieve is applying multiple animations with an animation-timeline property being set on "scroll();". I was refering to Kevin Powell's video for the parallax for this (https://www.youtube.com/watch?v=Qj0Qx8HpNUo&). The issue I am facing right now though is that as soon as I hit the animation-timeline property on more than 1 selector inside my CSS that it's not working on scroll. The animation itself is correctly defined (no spelling mistakes) and set properly with the animation-property and works in case I remove the animation-timeline property provisionally and set an animation-duration of e.g. 1s. So I wonder if it's possible at all to have multiple scroll driven animations or that I have to rely on a grid stack?
11 replies
KPCKevin Powell - Community
•Created by proudyyyy on 12/15/2023 in #front-end
Table of contents wrapper though sticky and top hiding
2 replies
KPCKevin Powell - Community
•Created by proudyyyy on 1/6/2023 in #front-end
Vignette (inset shadow) on a video
I am struggeling with putting up a vignette (shadow being inset) to a video-tag in html5.
Things I was trying to do:
- Put a box-shadow on the video-tag itself
- Put the video tag inside a div and give that div the box-shadow
- Put a div after the video tag and give it the box-shadow (I was referring to a stackoverflow thread: https://stackoverflow.com/questions/26786940/can-you-have-css-box-shadow-inset-show-on-video-element)
Nothing of those seem to work or just work kind of, but not as expected. I'd like the vignette to be only visible at the bottom, and blur out like 20% of the height.
A codepen I was trying to mess with (I put up a box-shadow on any element, cuz why not):
https://codepen.io/Proudyy/pen/eYjBewO
8 replies