Motschen/midnightdust-eu
1
0
Fork 0
mirror of https://github.com/Motschen/midnightdust-eu.git synced 2025-12-15 10:05:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

clean: remove Rellax scroll animations

Browse Source 
- Unnecessary bloat and looked broken on certain screen sizes
This commit is contained in:
Martin Prokoph
2025-03-28 15:26:04 +01:00
parent 7d346c49f6
commit a72f0d4b19
6 changed files with 1674 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.astro/types.d.ts vendored
View File

@@ -1,2 +1 @@
/// <reference types="astro/client" /> /// <reference types="astro/client" />
/// <reference path="content.d.ts" />

1669
bun.lock Normal file
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@@ -37,9 +37,7 @@
"dependencies": { "dependencies": {
"@astrojs/alpinejs": "^0.4.4", "@astrojs/alpinejs": "^0.4.4",
"@types/alpinejs": "^3.13.10", "@types/alpinejs": "^3.13.10",
"@types/rellax": "^1.7.7",
"alpinejs": "^3.14.1", "alpinejs": "^3.14.1",
"rellax": "^1.12.1",
"vanilla-tilt": "^1.8.1" "vanilla-tilt": "^1.8.1"
} }
} }

4
src/components/ContentMedia.astro
View File

@@ -7,11 +7,11 @@ const { imgSrc, reverseImg = false } = Astro.props
<section class="my-32"> <section class="my-32">
<div class="container"> <div class="container">
<div class="grid grid-cols-1 gap-24 md:grid-cols-2"> <div class="grid grid-cols-1 gap-24 md:grid-cols-2">
{!reverseImg ? <Media class="rounded-lg rellax -z-10" data-rellax-desktop-speed="-1" data-rellax-speed="-0.5" src={imgSrc} /> : ''} {!reverseImg ? <Media class="rounded-lg" src={imgSrc} /> : ''}
<div class="space-content flex flex-col justify-center"> <div class="space-content flex flex-col justify-center">
<slot /> <slot />
</div> </div>
{reverseImg ? <Media class="rounded-lg rellax -z-10" data-rellax-desktop-speed="1" data-rellax-speed="0.5" src={imgSrc} /> : ''} {reverseImg ? <Media class="rounded-lg" src={imgSrc} /> : ''}
</div> </div>
</div> </div>
</section> </section>

4
src/components/Hero.astro
View File

@@ -7,7 +7,7 @@ const { src = '/motschensummer-cutout.png' } = Astro.props
<section class="hero my-12"> <section class="hero my-12">
<div class="container"> <div class="container">
<div class="grid grid-cols-1 items-center gap-24 lg:grid-cols-2"> <div class="grid grid-cols-1 items-center gap-24 lg:grid-cols-2">
<div class="flex flex-col items-center gap-8 md:items-start rellax" data-rellax-desktop-speed="-5" data-rellax-speed="-4" data-rellax-zindex="-10"> <div class="flex flex-col items-center gap-8 md:items-start">
<h1 class="text-center text-6xl md:text-left lg:text-8xl"> <h1 class="text-center text-6xl md:text-left lg:text-8xl">
<slot> <slot>
<span id="modding-text" class="text-gradient">Modding</span> <span id="modding-text" class="text-gradient">Modding</span>
@@ -25,7 +25,7 @@ const { src = '/motschensummer-cutout.png' } = Astro.props
</a> </a>
</div> </div>
</div> </div>
<div class="rellax -z-10" data-rellax-speed="-7"> <div>
<img class="hidden lg:block" src={src} alt="" decoding="async" data-tilt data-tilt-full-page-listening /> <img class="hidden lg:block" src={src} alt="" decoding="async" data-tilt data-tilt-full-page-listening />
</div> </div>
</div> </div>

16
src/layouts/DefaultLayout.astro
View File

@@ -108,18 +108,4 @@ const {
} }
</style> </style>
</body> </body>
</html> </html>
<script>
import Rellax from 'rellax';
function initRellax() {
var rellax = new Rellax('.rellax', {
center: true
});
}
initRellax();
document.addEventListener('astro:after-swap', () => {
initRellax();
})
</script>