/* Conteneur principal pour le texte défilant */ .scroll-text-container { width: 100%; /* Prend toute la largeur disponible */ overflow: hidden; /* Masque le contenu en dehors du conteneur */ } /* Wrapper pour le texte */ .scroll-text-wrapper { white-space: nowrap; /* Empêche le texte de passer à la ligne */ display: inline-block; /* Affiche le texte en ligne pour le faire défiler horizontalement */ }

logo - identité visuelle - palette de couleur - carte de visite - réseaux sociaux - logo - identité visuelle - palette de couleur - carte de visite - réseaux sociaux - logo - identité visuelle - palette de couleur - carte de visite - réseaux sociaux - logo - identité visuelle - palette de couleur - carte de visite - réseaux sociaux - logo - identité visuelle - palette de couleur - carte de visite - réseaux sociaux -

const container = document.querySelector('.scroll-text-container'); const wrapper = document.querySelector('.scroll-text-wrapper'); // Copie du contenu pour maintenir le défilement continu wrapper.innerHTML += wrapper.innerHTML; // Calcul de la largeur totale du texte pour définir la vitesse de défilement const width = wrapper.offsetWidth; // Animation du défilement du texte function scrollText() { wrapper.style.transform = `translateX(${-width}px)`; wrapper.style.transition = `transform ${width / 20}s linear`; setTimeout(() => { wrapper.style.transition = 'none'; wrapper.style.transform = 'translateX(0)'; requestAnimationFrame(scrollText); }, width * 20); // Délai avant de recommencer le défilement } scrollText(); // Lancement du défilement initial