Comment scroller dans une succession de divs ?

Bonjour !

Je me retrouve face à un problème que je n'arrive pas à surmonter : je souhaite créer un défilement d'images (par animation css au chargement de la page puis relayé par le scroll) du haut vers le bas de l'écran. Ces images se 'rangent' au fur et à mesure dans une sorte de menu accordéon (via z-index). Je suis parvenue à créer ce menu, mais il y a à présent des soucis avec mon défilé. Comme ces images sont insérées en position random dans une div 'scroller' (permet de scroller dans les images) et dans une div 'wrapper' (qui permet de masquer les scrollbars), il m'était impossible de les positionner en 'absolute' pour leur attribuer des valeurs z-index car elles sont, en toute logique, dépendantes de leurs 'parents'.
J'ai donc créer un wrapper + scroller par image, mais il n'est maintenant plus possible de scroller dans ces divs, puisque les wrappers sont tous superposés (à l'exception de celui au premier plan qui est scrollable).

J'ai créer deux JSFiddle qui illustrent les deux cas de figure, le premier qui autorise le scroll mais qui n'applique pas les propriétés z-index, et le second sans effet de scroll mais avec le z-index qui fonctionne. Je cherche donc à obtenir ces deux effets réunis dans ma page mais je ne vois pas comment y parvenir.

Vous trouverez également le lien de téléchargement du fichier sur lequel je travaille (il y a les 2 versions, index/style et index2/style2), cela permettra de voir précisément ce dont je parle (le défilement des images est perturbé par la dimension de la fenêtre 'aperçu' dans les JSFiddles).

J'ai aussi pensé à faire disparaître chaque div (image) après qu'elle ait été scrollée (cas n°2) via Js ou jQuery mais je ne sais pas si c'est la meilleure solution ni même si cela est possible.


Qu'en pensez-vous ? (tout sample de code pour démo est le bienvenu )

P.S.: Je suis prête à entendre que tout est à reprendre (ex: autre méthode pour réaliser le défilement) !

Mille mercis d'avance !

Bonjour,

Je ne comprend pas le comportement que tu recherches.

Quand tu dis "il n'est maintenant plus possible de scroller dans ces divs" tu parles de quelles divs ?

Autant pour moi, c'est ma faute je n'avais pas le bon rendu !

"mais il n'y a pas de possibilité pour attribuer différentes valeurs de z-index aux images"

Pour moi c'est tout à fait possible !

Voici un exemple : https://jsfiddle.net/ss6c24hu/

Je simule le même comportement que toi sans les animations.

Le <span> bulleText, qui aurait très bien pu être ta div d'une image, à pour parent MaDivScroll qui représente ta div scroller-wrapper

bullText se place bien au-dessus de la div DivMenus qui représente ta div dossiers-projets, alors que DivMenus à un z-index supérieur au parents de bullText (soit je rappel MaDivScroll)

Si à la place de faire :

#MaDivScroll{
  position:absolute ; 
  top : 0; 
  left: 0 ; 
  height:100% ; 
  background-color:#efefef ; 
  width:100% ;
  text-align:center ;
}

On aurait ajouté un z-index inférieur à celui de DivMenu c'est à dire :

#MaDivScroll{
  position:absolute ; 
  top : 0; 
  left: 0 ; 
  height:100% ; 
  background-color:#efefef ; 
  width:100% ;
  text-align:center ;
z-index:0 ; 
}

Dans ce cas là ça n'aurait pas fonctionné et ça m'aurait donné le même rendu que dans ton 1e fiddle.

Pour moi, ta logique de base est la bonne et que c'est tout à fait possible d'attribuer différentes valeurs de z-index aux images pour qu'elles survolent tes catégories sans en arriver aux bidouillages du 2eme fiddle qui n'est pas propre selon moi.

J'espère que cela t'auras aidé dans ta recherche de ton problème, il doit y avoir un appel ou une propriété qui fait que cela ne fonctionne pas correctement. Plus qu'à la trouver !

Bon courage

Alors, tu y es presque !

Alors pour commencer voici un petit soucis :

#cellule 1 {
  z-index:10;
}

#cellule 2 {
  z-index:20;
}

#cellule 3 {
  z-index:30;
}

#cellule 4 {
  z-index:40;
}

#cellule 5 {
  z-index:50;
}

Regarde tu les as mal écrit ! Il faut écrire #cellule1 tout attaché !

Enfait le z-index agit par niveau, donc les parents doivent se trouver au même niveau pour que leurs enfants puissent se positionner l'un sur l'autre.

Un très bon article qui traite du sujet :

https://la-cascade.io/comment-fonctionne-z-index/

Regarde mon JsFiddle, cela fonctionne bien : https://jsfiddle.net/ss6c24hu/8/

J'ai du également retiré la directive :

transform: scale(1, -1);

Dans tes div, c'est ce qui fait que cela ne fonctionne pas. Pourquoi ? Aucune idée, il semble qu'il y est un bug entre le z-index et le scale. Surement que le scale doit à la fin de la transformation associé un z-index de lui-même, où un comportement équivalent qui fait que cela ne fonctionne pas.

Il faudrait vérifier dans une vue en 3D du navigateur voir le comportement des empilements de chaque bloc.

En tout cas bon courage encore pour la suite !

Bonjour,

kevinlourenco a écrit :
Dans tes div, c'est ce qui fait que cela ne fonctionne pas. Pourquoi ? Aucune idée, il semble qu'il y est un bug entre le z-index et le scale. Surement que le scale doit à la fin de la transformation associé un z-index de lui-même, où un comportement équivalent qui fait que cela ne fonctionne pas.

C'est pas tant que scale() associe un z-index, mes observations m'amènent à la conclusion selon laquelle une transformation place l'élément en premier plan - j'avais observé ce phénomène avec une translation. Il devient alors très difficile de faire passer un élément devant.

Il me semble que j'avais contourné le problème en insérant un conteneur qui reçut mon z-index alors que la transformation était appliquée à son enfant. Mais ça complique énormément la maintenance.

Si la transformation n'est pas indispensable, je pense qu'il vaille mieux l'enlever.

Bonne journée.