Notions de couches en CSS

Pewel-OutOfNutella

Bonjour à tous,

depuis quelques semaines, je vois beaucoup de sites sur la toile adopter ou ayant fait une notion de couche en CSS. Je ne connait pas le terme exact, je vais donc vous expliquer le concept.

Au déroulement de la page (lorsqu'on descend avec le scroll), des élements "montent" plus vite dans la page que d'autres, se superposant etc.
Je ne comprends pas comment cela est fait, si ce n'est que du css ou si c'est une bibliothèque js, en tout cas, le rendu est très bien.

J'ai trouvé ce site, qui explique bien visuellement ce que je vous dis, je vous met le lien plus bas.
Dernièrement, pour ceux qui connaissent, il y avait une site spécial pour League of Legends pour Freljord qui adoptait ce système là.

Voilà le site en question :
http://www.boy-coy.com/

Pour ceux qui ont des informations là dessus, n'hésitez pas à me le dire, merci ! ^^

6 réponses

Nairolf
Réponse acceptée

Ce que tu cherches se nomme "Effet Parallax", voilà un peu de documentation: Alsacreations

Bien entendu il faut utiliser jQuery, ce n'est pas du CSS pur.

joxs
Réponse acceptée

Impossible tu dis ? :p

En effet avec un mouvement de la souris je pense que c'est impossible

Pewel-OutOfNutella
Auteur

Merci beaucoup ! J'aurais eu un peu de mal à chercher dans le vide sans savoir comment ça s'appelle ^^

joxs

C'est faisable juste en css aussi :
1 : header en position fixed; z-index 1;
2 : contenu en position absolute; top: 100% (ou la taille de ton header); z-index: 2;

Le problème c'est que tu peut le faire qu'une fois sur ton site mais sa permet de ne pas charger de librairie js :)

Si tu veut voir un exemple : http://joscelyngainie.fr/

Pewel-OutOfNutella
Auteur

Oui c'est une alternative mais ça ne permet pas de faire la même chose.

Regarde par exemple la 404 de github avec un mouvement de la souris.

Ou cet effet là, avec le scroll.

Avec du css pur, je ne pense pas que ce soit réalisable, comme le dit Nairolf.

Pewel-OutOfNutella
Auteur

Non non j'ai pas dit impossible ^^. J'ai dit "je ne pense pas que ce soit réalisable". Sous-entendu, ce n'est qu'un avis personnel, je ne connais pas toutes les possibilités qu'offre CSS3.

En tout cas, merci pour ton partage, je vais éplucher ça !