roberto/cv-roberto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add background pattern and smooth scrolling effect to welcome page

Browse Source
This commit is contained in:
Roberto Guagliardo
2025-11-15 14:09:32 +01:00
parent 0336484f34
commit d83fce834a
3 changed files with 61 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
resources/views/welcome.blade.php
View File

@@ -23,6 +23,9 @@
</head>
<body class="text-zinc-950 antialiased lg:bg-zinc-100 dark:bg-zinc-900 dark:text-white dark:lg:bg-zinc-950">
<div class="bg-pattern"></div>
<div class="max-w-5xl mx-auto p-6 space-y-8">
<header
@@ -135,16 +138,35 @@
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
const cursor = document.getElementById('custom-cursor');
document.addEventListener('mousemove', (e) => {
gsap.to(cursor, {
duration: 0.2,
x: e.clientX + 20,
y: e.clientY - 15,
ease: 'power2.out'
});
<script>
let bgPosX = 0;
let bgPosY = 0;
let targetPosX = 0;
let targetPosY = 0;
const scrollSpeed = 2; // hoe snel hij versnelt tijdens scroll
const bgElement = document.querySelector('.bg-pattern');
// Update loop (smooth afremmen)
gsap.ticker.add(() => {
bgPosX += (targetPosX - bgPosX) * 0.1;
bgPosY += (targetPosY - bgPosY) * 0.1;
bgElement.style.setProperty('--bg-x', `${bgPosX}px`);
bgElement.style.setProperty('--bg-y', `${bgPosY}px`);
bgElement.style.backgroundPosition = `${bgPosX}px ${bgPosY}px`;
});
// Scroll detectie
window.addEventListener('scroll', () => {
const scrollTop = window.scrollY;
const scrollLeft = window.scrollX;
// beweeg diagonaal voor extra effect
targetPosX = -scrollLeft * scrollSpeed;
targetPosY = -scrollTop * scrollSpeed;
});
</script>