blob: ae4bbaea9251e1d3c11436a591e66d3472743720 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
---
import type { HTMLAttributes } from 'astro/types';
interface Props extends HTMLAttributes<'div'> {
dir?: string
wrapperClass?: string
childrenNum: number
childrenSize?: string
speed?: string
}
const {
dir = 'left',
wrapperClass = '',
childrenNum,
childrenSize = '256px',
speed = '15s',
} = Astro.props;
---
<div class={
`w-full bg-blue-100 slider
${dir === 'right' ? 'reverse' : ''}
${wrapperClass}`
}>
<div class="wrapper flex flex-row gap-2.5">
<slot class="content" />
<slot class="content" />
</div>
</div>
<!--
credit to modrinth's implementation! here is their CSS code:
https://github.com/modrinth/knossos/blob/d6ba3f3adfd8f52b85f83e53660d3d87cd0bc9ea/pages/index.vue#L620-L675
oh and since theirs is in AGPL, please note that this codeblock is also AGPL
-->
<style lang="scss" define:vars={{ childrenNum, childrenSize, speed }}>
.slider {
.wrapper {
animation: var(--speed) linear infinite slide;
@media (prefers-reduced-motion) {
animation: none;
}
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(calc((var(--childrenSize) + 10px) * -1 * var(--childrenNum)));
}
}
}
&:hover > .wrapper, &.reverse:hover > .wrapper {
/* TODO: Possibly add fancy hover card anim? */
animation-play-state: paused;
}
&.reverse > .wrapper {
animation: var(--speed) linear infinite slide-reverse;
@keyframes slide-reverse {
from {
transform: translateX(calc((var(--childrenSize) + 10px) * -1 * var(--childrenNum)));
}
to {
transform: translateX(0);
}
}
}
}
</style>
|
