Background "déroulant"

Fermé
Nak1doigt - 20 sept. 2011 à 15:52
 Nak1doigt - 21 sept. 2011 à 12:49
Bonjour,

Ce l'a fait plusieurs fois que je vois des sites avec des background dont la position change, lors de la navigation, grâce à un javascript. Pour illustrer mes propos, rien de mieux qu'un exemple :

http://www.bowling-powerball.fr/

Connaissez vous des tutoriaux qui traitent de ce sujet ? Comment s'appelle cette fonction ?

Merci pour vos réponses !

A voir également:

4 réponses

avion-f16 Messages postés 19252 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 10 février 2025 4 505
Modifié par avion-f16 le 21/09/2011 à 13:09
Salut,

C'est un effet de parallax.
Le site de Nike en est un exemple très connu.
https://purpose.nike.com

@forkshovel: concernant les saccades, il faut voir avec la configuration matérielle de ton PC. Je pense qu'une carte graphique +/- récente et de gamme moyenne est quand même requise pour ce genre d'effet, ce que tout le monde n'a pas, et donc proposer une version "light" (simplement en changeant le CSS, inutile de créer une version séparée du code HTML) peut être intéressant. Pour le reste, c'est un avis que je ne partage pas (mais que je respecte).

https://www.smashingmagazine.com/2011/07/behind-the-scenes-of-nike-better-world/
La pensée mène le monde.
2
Merci avion-f16 !

Merci pour l'exemple cité et le nom de l'effet. Je vais maintenant pouvoir m'y mettre.

Voici un autre site avec cet effet, très poussé au niveau de la transparence des background (cliquez sur retour en haut à gauche) :

http://www.artisanat.info/jeunes#appli

@forkshovel: je ne partage pas non plus ton avis et ça ne fait pas avancé le shmilblick de la discussion.
1
Salut,
Beurk que c'est moche le site que vous montrez...surtout l'effet dont vous parlez. Ca ressemble plus à un bug qu'un effet voulu.
En général le but de toute mise en page c'est de faire passer une information, que celle ci soit claire et évidente à lire. Un fond qui bouges auras le double effet de perturber la lecture des informations et de donner mal au crâne à l'internaute, surtout cet effet saccadé que vous montrez.

Néanmoins, vous pouvez utiliser un gif ou png animé en fond pour avoir une animation d'arrière plan.
Vous pouvez aussi utiliser la propriété background-position du CSS(position de l'arrière plan) et éventuellement la décaler avec un script javascript qui va incrémenter le décalage de la position verticale à chaque déplacement de l'ascenseur de la page.
0
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
20 sept. 2011 à 22:33
Je suis pas convaincu non plus par l'effet dont tu parles.
Ça n'apporte rien à la lisibilité du contenu.
0