diff options
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/website/package.json | 3 | ||||
| -rw-r--r-- | apps/website/src/components/base/Slider.astro | 31 |
2 files changed, 22 insertions, 12 deletions
diff --git a/apps/website/package.json b/apps/website/package.json index 87d5b95..e3fb319 100644 --- a/apps/website/package.json +++ b/apps/website/package.json @@ -14,7 +14,8 @@ "@astrojs/rss": "^3.0.0", "@astrojs/sitemap": "^3.0.3", "@astrojs/tailwind": "^5.0.2", - "astro": "^3.6.0", + "astro": "^4.0.6", + "sass": "^1.69.5", "tailwindcss": "^3.3.5", "vitest": "^0.34.6" }, diff --git a/apps/website/src/components/base/Slider.astro b/apps/website/src/components/base/Slider.astro index f40b747..8814f63 100644 --- a/apps/website/src/components/base/Slider.astro +++ b/apps/website/src/components/base/Slider.astro @@ -20,19 +20,28 @@ const { </div> <!-- might be cheating a bit using global styles here but at least it lets you use slots --> -<style is:global> - .slider > * { - animation: 5s linear infinite slide; +<style is:global lang="scss"> + $sliderNum: 8; + @for $i from 1 through $sliderNum { + .slider > *:nth-child(#{$i}) { + animation: #{"slide" + $i} 10s linear infinite; + } + @keyframes #{"slide" + $i} { + 0% { + transform: translateX(0); + } + #{calc(100% / $sliderNum * $i)} { + transform: translateX(calc((-100% - 10px) * $i)); + } + #{calc((100% / $sliderNum * $i) + 0.001%)} { + transform: translateX(calc((100% + 10px) * ($sliderNum - $i))); + } + 100% { + transform: translateX(0); + } + } } .slider.reverse > * { animation-direction: reverse; } - @keyframes slide { - from { - transform: translateX(0); - } - to { - transform: translateX(calc(-100% - 10px)); - } - } </style> |