Add scroll reveal effect to news preview cards
This commit is contained in:
parent
288415d40c
commit
f2dc4ec647
1 changed files with 9 additions and 0 deletions
|
|
@ -253,6 +253,15 @@ function newsPreviewGetStyles(): string {
|
|||
scroll-snap-type: x mandatory;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding-bottom: .5rem;
|
||||
mask-image: linear-gradient(to right, black calc(100% - 3rem), transparent);
|
||||
mask-size: 200% 100%;
|
||||
mask-position: right;
|
||||
transition: mask-position .2s ease;
|
||||
}
|
||||
|
||||
.news-preview-scroll:hover,
|
||||
.news-preview-scroll:active {
|
||||
mask-position: left;
|
||||
}
|
||||
|
||||
.news-preview-card {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue