karkinge/summer-cms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Do you want moooooooooore ?

Browse Source 
I can't hear youuuuu !

Ok, more stuph.
This commit is contained in:
Matthieu Carquigny
2026-01-21 15:50:22 +01:00
parent d332744f5f
commit 5e90213d61
8 changed files with 1805 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
public/assets/js/main.js
View File

@ -1,69 +1,72 @@
document.addEventListener('DOMContentLoaded', () => {
// Video fixed BG
const reelEl = document.getElementById('reel');
if (!reelEl) return;
const video = reelEl.tagName.toLowerCase() === 'video' ? reelEl : reelEl.querySelector('video');
if (!video) return;
const FPS = 60; // Target frames per second for cursor tracking
function tryPlay() {
const playPromise = video.play();
if (playPromise !== undefined) {
playPromise.catch(() => {
// Autoplay bloqué : passer en muet et retenter
video.muted = true;
video.play().catch(() => {});
});
// -------- Video fixed BG ------------------------------
const reelEl = document.getElementById('reel');
if (!reelEl) return;
const video = reelEl.tagName.toLowerCase() === 'video' ? reelEl : reelEl.querySelector('video');
if (!video) return;
function tryPlay() {
const playPromise = video.play();
if (playPromise !== undefined) {
playPromise.catch(() => {
// Autoplay bloqué : passer en muet et retenter
video.muted = true;
video.play().catch(() => {
});
});
}
}
}
function handleVisibility(visible) {
console.log('Visibility changed, playing:', visible);
if (visible) {
// make visible the video element
video.style.visibility = 'visible';
tryPlay();
function handleVisibility(visible) {
console.log('Visibility changed, playing:', visible);
if (visible) {
// make visible the video element
video.style.visibility = 'visible';
tryPlay();
} else {
video.style.visibility = 'hidden';
video.pause();
}
}
else {
video.style.visibility = 'hidden';
video.pause();
if ('IntersectionObserver' in window) {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
handleVisibility(entry.intersectionRatio >= 0.01);
});
}, {threshold: [0, 0.01, 1]});
observer.observe(reelEl);
} else {
// Fallback simple : vérification sur scroll/resize
let ticking = false;
const check = () => {
ticking = false;
const rect = reelEl.getBoundingClientRect();
const vh = window.innerHeight || document.documentElement.clientHeight;
// Visible si une partie quelconque est dans la fenêtre
const visible = rect.bottom > 0 && rect.top < vh;
handleVisibility(visible);
};
const onScroll = () => {
if (!ticking) {
ticking = true;
requestAnimationFrame(check);
}
};
onScroll();
window.addEventListener('scroll', onScroll, {passive: true});
window.addEventListener('resize', onScroll);
}
}
if ('IntersectionObserver' in window) {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
handleVisibility(entry.intersectionRatio >= 0.01);
});
}, { threshold: [0, 0.01, 1] });
observer.observe(reelEl);
} else {
// Fallback simple : vérification sur scroll/resize
let ticking = false;
const check = () => {
ticking = false;
const rect = reelEl.getBoundingClientRect();
const vh = window.innerHeight || document.documentElement.clientHeight;
// Visible si une partie quelconque est dans la fenêtre
const visible = rect.bottom > 0 && rect.top < vh;
handleVisibility(visible);
};
const onScroll = () => {
if (!ticking) {
ticking = true;
requestAnimationFrame(check);
}
};
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onScroll);
}
document.addEventListener('visibilitychange', () => {
if (document.hidden) video.pause();
});
document.addEventListener('visibilitychange', () => {
if (document.hidden) video.pause();
});
// Cursor tracking
// Cursor tracking
//track the cursor position and set CSS variables --cursor-x and --cursor-y on the body element
let x = 0;
let y = 0;
@ -73,7 +76,7 @@ document.addEventListener('DOMContentLoaded', () => {
});
let lastUpdate = 0;
const FRAME_INTERVAL = 1000 / 60;
const FRAME_INTERVAL = 1000 / FPS;
const updateTwist = (timestamp) => {
if (!timestamp) timestamp = performance.now();
if (timestamp - lastUpdate >= FRAME_INTERVAL) {
@ -85,4 +88,9 @@ document.addEventListener('DOMContentLoaded', () => {
}
updateTwist();
// --------- Init Lenis smooth scroll ------------------------
// Initialize Lenis
const lenis = new Lenis({
autoRaf: true,
});
});