Bonjour, je suis débutant, j'ai un problème avec deux éléments qui rentrent en conflit lorsque je place l'un des deux en premier plan. Pour expliquer rapidement, j'ai un menu avec un slider qui défile au survol de chaque élément du menu (<div class="preview"> <div class="preview-img"></div> </div>), comme on peut le voir sur mon codepen. Mais j'ai aussi une séquence d'image png que je souhaiterai avoir en premier plan (<div class="canvas-container"> <div id="canvas"> <canvas id="image-sequence"></canvas> </div>), celle-ci utilise scrolltrigger pour s'animer au défilement de la page.
VOICI LE CODE ENTIER : https://codepen.io/sirtuttle/pen/ZEwjyap
Ce que je veux
J'aimerai que cette animation (qui est partiellement transparente) prenne toute la page et soit au premier plan, de manière à partiellement masquer la page, mais que mon slider au survol du menu puisse quand meme être actif. Je veux que les deux fonctionnent simultanément, l'un au premier plan, l'un au second plan.
Ce que j'obtiens
-Lorsque je définit l'élément de slider (.preview) au premier plan, z-index : 1, cela semble fonctionner mais on ne voit pas du tout la séquence d'image qui est active puisqu'elle est en arrière plan.
-Lorsque je définit la séquence d'image au premier plan (je lui asssigne un z-index:2), celle-ci est bien fonctionnelle mais le slider est alors totalement incatif (il s'affiche mais ne suit pas du tout les fonctions que je lui ai attribuées, ne suit pas la souris, etc.).
Comme mes connaissances en javascript ne sont pas assez avancées pour parvenir à déceler l'origine du probleme (si c'est un problème d'arborescence? un conflit entre les mouse control?) je me tourne vers vous.
Merrci beaucoup ! Bonne soirée :)
cnvstud