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,
});
});

43
public/css/site.css
View File

@ -107,6 +107,49 @@ video{
.tournament-block:hover{
transform: scale(0.9);
}
.custom-grid{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap:0;
border:1px solid hsla(0,0%,6%,0.1);
}
.custom-grid .custom-cell{
position: relative;
aspect-ratio: 1 / 1;
display: grid;
place-items: center;
/*border:1px solid var(--bulma-black);*/
}
.custom-grid .custom-cell+.custom-cell{
border-left:1px solid hsla(0,0%,6%,0.1);
}
.custom-cell .bg{
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
background-size: cover;
background-position: center;
mix-blend-mode: soft-light; /* overlay? */
transition: opacity 0.5s ease-out;
}
.custom-cell .bg.active {
opacity: 0;
mix-blend-mode: normal;
}
.custom-cell:hover .bg.active {
opacity: 0.6;
}
.custom-cell img{
position:relative;
transition: transform 0.5s ease-out;
transform: scale(1);
}
.custom-cell:hover img {
transform: scale(1.1);
}
/*------------------------------------------------------------------*/
/*Twist animation*/
.twist{