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

18
resources/css/app.css
View File

@@ -22,3 +22,21 @@
width: auto; width: auto;
display: block; display: block;
} }
.bg-pattern {
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='0.5' fill='%23999'/%3E%3C/svg%3E");
opacity: 0.05;
z-index: -1;
pointer-events: none;
background-repeat: repeat;
background-position: 0 0;
transition: background-position 2s ease-out;
}
@keyframes moveBackground {
from { background-position: 0 0; }
to { background-position: 1000px 1000px; }
}

12
resources/js/app.js
View File

@@ -14,3 +14,15 @@ document.addEventListener('DOMContentLoaded', () => {
parent: '.grid' // dit moet de container zijn waarin sticky moet blijven parent: '.grid' // dit moet de container zijn waarin sticky moet blijven
}); });
}); });
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'
});
});

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

@@ -23,6 +23,9 @@
</head> </head>
<body class="text-zinc-950 antialiased lg:bg-zinc-100 dark:bg-zinc-900 dark:text-white dark:lg:bg-zinc-950"> <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"> <div class="max-w-5xl mx-auto p-6 space-y-8">
<header <header
@@ -135,16 +138,35 @@
</div> </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> <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) => { <script>
gsap.to(cursor, { let bgPosX = 0;
duration: 0.2, let bgPosY = 0;
x: e.clientX + 20, let targetPosX = 0;
y: e.clientY - 15, let targetPosY = 0;
ease: 'power2.out'
}); 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> </script>