Hey !
J’ai un bug uniquement sur mobile qui a mon avis est dû a axceptio
Je m’explique : le fonctionnement normal de la section c’est 5 (11 sur desktop) logos affichés et toutes les 2.5 secondes, un disparaît pour qu’un autre apparaisse.
Mais la ca bug . Parfois les logos vont bien, parfois ils clignotent, parfois c’est n’imp
Je vous ai fait une vidéo
Read only et lien du projet dans le fil. Je vous joint le code de l’anim aussi
le code de l'anim :
<script><br />document.addEventListener("DOMContentLoaded", function () {<br /> const logos = Array.from(document.querySelectorAll(".logos"));<br /> const visibleLogos = new Set();<br /><br /> function getVisibleCount() {<br /> return window.innerWidth < 767 ? 5 : 11;<br /> }<br /><br /> function isLogoVisible(logo) {<br /> return getComputedStyle(logo).display !== "none";<br /> }<br /><br /> function getRandomHiddenLogo() {<br /> const hiddenLogos = logos.filter(logo => !visibleLogos.has(logo) && isLogoVisible(logo));<br /> return hiddenLogos[Math.floor(Math.random() * hiddenLogos.length)];<br /> }<br /><br /> function getRandomVisibleLogo() {<br /> const visibleArray = Array.from(visibleLogos);<br /> return visibleArray[Math.floor(Math.random() * visibleArray.length)];<br /> }<br /><br /> function initializeLogos() {<br /> visibleLogos.clear();<br /> logos.forEach(logo => logo.classList.remove("active"));<br /><br /> while (visibleLogos.size < getVisibleCount()) {<br /> const randomLogo = getRandomHiddenLogo();<br /> if (randomLogo) {<br /> randomLogo.classList.add("active");<br /> visibleLogos.add(randomLogo);<br /> }<br /> }<br /> }<br /><br /> function updateLogos() {<br /> const logoToHide = getRandomVisibleLogo();<br /> const logoToShow = getRandomHiddenLogo();<br /><br /> if (logoToHide && logoToShow) {<br /> logoToHide.classList.remove("active");<br /> visibleLogos.delete(logoToHide);<br /><br /> logoToShow.classList.add("active");<br /> visibleLogos.add(logoToShow);<br /> }<br /> }<br /><br /> initializeLogos();<br /><br /> setInterval(updateLogos, 2500);<br /><br /> window.addEventListener("resize", initializeLogos);<br />});<br /></script>
le read only : https://preview.webflow.com/preview/kayro---preprod?utm_medium=preview_link&utm_source[…]d&preview=4d451c50120ba0eedb305e9b4493f97a&workflow=preview
Le lien du projet : https://www.kayro.ai/
Mon conseil : recommence ton code de 0 car c’est franchement incompréhensible. Tu ne vas jamais trouver ton bug dans ce sac de noeuds.
Demande simplement à chatgpt de te faire un bout de gsap qui shuffle l’affichage de tes logos, ça sera bcp + simple
Pinaise. C'est un dev qui m'a fait ce bout de code pourtant 🥲
Je vais teste avec gpt. Je vous redit ca
