From 6f5c2f5177f4cc3ab2961a8d0cd5b2d6b7ec7759 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= Date: Mon, 18 May 2026 17:49:27 +0400 Subject: [PATCH] feat: smooth scroll animation and back-to-top button --- css/styles.css | 155 +++++++++++++++++++++++-------------------------- js/main.js | 63 ++++++++++++++++++++ 2 files changed, 135 insertions(+), 83 deletions(-) diff --git a/css/styles.css b/css/styles.css index 86e462d..1d69161 100644 --- a/css/styles.css +++ b/css/styles.css @@ -347,7 +347,7 @@ img { display: flex; justify-content: space-between; align-items: center; - padding: 20px 20px 25px 20px; + padding: 16px 40px; background-color: var(--main-bg); position: sticky; top: 0; @@ -357,72 +357,8 @@ img { max-width: calc(100vw - 250px); margin-bottom: 20px; margin-left: -20px; - padding-left: 40px; - padding-right: 40px; box-sizing: border-box; -} - -.search-container { - flex: 1; - max-width: 600px; - margin: 0 auto; -} - -.search-container form { - display: flex; - position: relative; -} - -.search-container input { - width: 100%; - padding: 12px 45px 12px 15px; - border: 1px solid #e0e0e0; - border-radius: 25px; - background-color: #f8f8f8; - font-size: 16px; - transition: all 0.3s ease; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); - color: var(--text-color); -} - -.search-container input:focus { - outline: none; - border-color: var(--primary-red); - background-color: white; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); -} - -.search-container input::placeholder { - color: #9e9e9e; - transition: opacity 0.3s ease; -} - -.search-container input:focus::placeholder { - opacity: 0.7; -} - -.search-container button { - position: absolute; - right: 5px; - top: 50%; - transform: translateY(-50%); - background-color: var(--primary-red); - color: white; - border: none; - border-radius: 50%; - width: 35px; - height: 35px; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - font-size: 16px; - transition: all 0.3s ease; -} - -.search-container button:hover { - background-color: #d40000; - transform: translateY(-50%) scale(1.05); + gap: 16px; } .social-icons, .action-icons { @@ -2054,19 +1990,18 @@ img { .sidebar { width: 70px; } - + .main-content, .footer { margin-left: 70px; width: calc(100% - 70px); } - - /* Ajuster le header pour le mode sidebar compact */ + .header { width: 100%; max-width: calc(100vw - 70px); margin-left: -20px; - padding-left: 40px; - padding-right: 40px; + padding-left: 24px; + padding-right: 24px; box-sizing: border-box; } @@ -2127,26 +2062,21 @@ img { width: 100%; } - /* Ajuster le header pour l'affichage mobile */ .header { width: 100vw; max-width: 100vw; margin-left: -20px; - padding-left: 20px; - padding-right: 20px; + padding-left: 16px; + padding-right: 16px; box-sizing: border-box; position: relative; left: 0; } - + .mobile-menu-toggle { display: block; } - - .search-container { - max-width: 60%; - } - + .social-icons { display: none; } @@ -2329,8 +2259,14 @@ i.icon-tiktok, } [data-theme="dark"] .header i.icon-tiktok, -[data-theme="dark"] .header .fab.fa-tiktok.icon-tiktok { - color: #ffffff !important; /* Blanc TikTok en mode sombre - header seulement */ +[data-theme="dark"] .header .fab.fa-tiktok.icon-tiktok, +[data-theme="dark"] .sidebar i.icon-tiktok, +[data-theme="dark"] .sidebar .fab.fa-tiktok.icon-tiktok, +[data-theme="dark"] .mobile-menu i.icon-tiktok, +[data-theme="dark"] .mobile-menu .fab.fa-tiktok.icon-tiktok, +[data-theme="dark"] .footer i.icon-tiktok, +[data-theme="dark"] .footer .fab.fa-tiktok.icon-tiktok { + color: #ffffff !important; } i.icon-tiktok-accent { @@ -3298,4 +3234,57 @@ i.icon-mastodon, } } - \ No newline at end of file + +/* ============================================================ + BACK TO TOP BUTTON + ============================================================ */ + +#back-to-top { + position: fixed; + bottom: 32px; + right: 32px; + z-index: 900; + width: 46px; + height: 46px; + border-radius: 50%; + border: none; + background: #FF0000; + color: white; + font-size: 18px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4px 16px rgba(255, 0, 0, 0.45); + opacity: 0; + visibility: hidden; + transform: translateY(12px); + transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background 0.2s ease; +} + +#back-to-top.visible { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +#back-to-top:hover { + background: #cc0000; + transform: translateY(-3px); + box-shadow: 0 8px 24px rgba(255, 0, 0, 0.5); +} + +#back-to-top:active { + transform: scale(0.9); + transition-duration: 0.08s; +} + +@media (max-width: 768px) { + #back-to-top { + bottom: 20px; + right: 16px; + width: 40px; + height: 40px; + font-size: 15px; + } +} diff --git a/js/main.js b/js/main.js index 52e376e..65cb93e 100644 --- a/js/main.js +++ b/js/main.js @@ -406,6 +406,50 @@ document.addEventListener('DOMContentLoaded', function() { }); }); + // Scroll animé vers les sections depuis les badges hero et les liens de navigation + document.querySelectorAll('a[href^="#"]').forEach(function(link) { + link.addEventListener('click', function(e) { + const targetId = this.getAttribute('href').slice(1); + const target = document.getElementById(targetId); + if (!target) return; + + e.preventDefault(); + + // Fermer le menu mobile si ouvert + if (mobileMenu && mobileMenu.classList.contains('active')) { + mobileMenu.classList.remove('active'); + document.body.style.overflow = ''; + } + + const offset = 24; + const top = target.getBoundingClientRect().top + window.scrollY - offset; + + window.scrollTo({ top: top, behavior: 'smooth' }); + + // Highlight de la section à l'arrivée + const duration = Math.min( + 600 + Math.abs(top - window.scrollY) / 4, + 1200 + ); + setTimeout(function() { + target.classList.add('section-arrive'); + setTimeout(function() { target.classList.remove('section-arrive'); }, 900); + }, duration); + }); + }); + + // Bouton retour en haut + const backToTop = document.getElementById('back-to-top'); + if (backToTop) { + window.addEventListener('scroll', function() { + backToTop.classList.toggle('visible', window.scrollY > 300); + }, { passive: true }); + + backToTop.addEventListener('click', function() { + window.scrollTo({ top: 0, behavior: 'smooth' }); + }); + } + // Scroll vers le haut avec effet moderne quand on clique sur le logo du footer const footerLogo = document.querySelector('.footer-logo'); if (footerLogo) { @@ -416,4 +460,23 @@ document.addEventListener('DOMContentLoaded', function() { }); }); } + + // Auto-resize des iframes de profil social (TikTok, Instagram) + // Ces plateformes envoient des postMessage avec leur hauteur réelle + window.addEventListener('message', function(e) { + if (!e.data || !e.origin) return; + try { + const data = typeof e.data === 'string' ? JSON.parse(e.data) : e.data; + const height = data.height ?? data.contentHeight ?? data['height']; + if (!height || typeof height !== 'number' || height < 100) return; + + document.querySelectorAll('.platform-profile-iframe').forEach(function(iframe) { + try { + if (new URL(iframe.src).origin === e.origin) { + iframe.style.height = Math.ceil(height) + 'px'; + } + } catch (_) {} + }); + } catch (_) {} + }); }); \ No newline at end of file