Tutoriel Vidéo HTML-CSS : Effet de parallaxe en CSS

Jules Il y a 2 mois Répondre

Merci pour le tuto, on peut faire vraiment beaucoup d'effets bien poussés, mais c'est pas forcément évident...

koulouf Il y a 7 mois Répondre

Ou trouver d'autre image du meme genre que les guirlandes ?
Merci enormement.

Farid63 Il y a 1 an Répondre

Super Tuto merci !!

KHILL@ Il y a 1 an Répondre

pouvez-vous m'envoyer les images .png sans arriere plan parce que quand je fais ces images ca s'affiche avec leurs arriere plan qui est en blanc c'est urgent merci davance

jeje Il y a 1 an Répondre

Bonjour,

trés bon tuto,MAIS je pense qu'il doit y avoir une erreur car je l'ai suivi à la lettre ça ne fonctionne pas.

fougere Il y a 1 an Répondre

http://demo.marcofolio.net/a_parallax_illusion_with_css/

Un autre exemple très laid mais bien foutu

Air. Il y a 1 an Répondre

Très bien :D

arnak34 Il y a 2 ans Répondre

@karotte son éditeur je ne vois pas ce que c'est mais avec notepad++ avec un thème de coloration syntaxique différent dde celui par défaut tu auras des couleurs semblables si c'est ce qui t'intéresse =)

cristof Il y a 2 ans Répondre

salut,
je souhaite savoir si l'on peut utiliser cette effet de façon vertical plutot qu'horizontal ??

Merci

Brahim Il y a 2 ans Répondre

vraiment bravo pour ce tuto bon courage

Cristof Il y a 2 ans Répondre

Super effet
Merci pour le tuto

gaia Il y a 2 ans Répondre

Coucou grafikart, merci pour ce tuto et tous tes tutos,
aurait tu la possibilité de faire un/des tutos sur xml ?

merci et à bientot !

Jerr Il y a 2 ans Répondre

Merci pour ce tuto
ça fait classe cet effet même si pas beaucoup de visiteurs le voit je pense.

karottes Il y a 2 ans Répondre

Très bon, comme toujours ; )
Je voudrais juste poser une question, je n'es pas réussi à identifier ton éditeur :
quel éditeur as-tu utilisé pour ce tutoriel-ci ?
Merci et
@+

M13 Il y a 2 ans Répondre

Salut !
Merci pour l'astuce, à la fin de la vidéo tu parles du site "avec le gorille" qui utilise cet effet en arrière plan. Justement, comment le mettre en arrière plan ?
Encore bravo pour ton site que je visite régulièrement maintenant =D

Arnaud Il y a 2 ans - Répondre

En arrière plan ? Tu veux dire derrière ton contenu ?
Utilise des z-index

bernyforce Il y a 2 ans Répondre

formidable, je suis pas encore à ce niveau mais je le trouve génial ton effet.
stp c'est quoi cet éditeur html que tu utilise?ça m'aiderai à débuter

medhane2 Il y a 2 ans Répondre

bonjour c'est un très beau tuto mais il ne marche pas avec internet explorer. il y a un fond au niveau des images merci de corriger cela.

Badbart Il y a 2 ans - Répondre

Internet Explorer 6 ne gère pas la transparence des png , donc c'est normal !
Ça marche correctement avec un navigateur à jour !

basketteur-33 Il y a 2 ans Répondre

Super jvais essayer de trouver une utilisation pour mon sitez

medhane2 Il y a 2 ans Répondre

il y a un bug sur ie6

medhane2 Il y a 2 ans Répondre

Bonjour je voudrais s'il te plait avoir les images png des guirlandes pour faire l'effet parallax. je voudrais avoir les 3 images à savoir guirlande1.png,guirlande2.png, guirlande3.png.
Je suis aller sur le site dont tu as fait référence dans ta vidéo je ne l'ai pas eu. C'est urgent.Merci

MBN86 Il y a 2 ans Répondre

Pffff Pourquoi le vidéo ne s'affiche pas , j'en ai marrrrrrrrrrrrrre !!!!
Aidez Moi Friends SVP

Flomito Il y a 2 ans Répondre

Très bien, je testerai plus tard.
Merci

Théo Il y a 2 ans Répondre

Je sais, je sais. Mais malgré ça les guirlandes s'arrêtent net. Comment dire...ce ne sont pas les guirlandes qui sont trop courtes. Mais bon, je vais voir...c'est peut-être le CSS.

Theo Il y a 2 ans Répondre

Cool, ça marche. Mais comment faire pour que les guirlandes ne s'arrêtent pas à mon body ? Car Là ça se coupe net et c'est pas très beau.

J'y pense, quand je parlerais de mon nouveau thème, je parlerais de toi avec cet effet.

Merci.

Grafikart Il y a 2 ans - Répondre

C'est à toi de travailler les images pour qu'elles se répètent.

Baptiste Il y a 2 ans Répondre

salut!
il y a aussi un truc sympa avec JQuery
http://webdev.stephband.info/parallax.html

@+

Theo Il y a 2 ans Répondre

Bon ça fait plusieurs heures que je cherche...et ça veut pas. La page index.html + le CSS marchent. Mais dès que je veux le mettre dans le header.php ça veut pas.

Je l'ai mis partout et non. Y rien :'(. Donc y a idées, je prend.

Grafikart Il y a 2 ans - Répondre

Regarde le tuto sur la création d'un thème wordpress pour voir comment se passe l'édition.

Théo Il y a 2 ans Répondre

Okay ! Merci, malgré l'ajout des div, ça ne veut pas. Mais bon, je vais voir et chercher.

Théo Il y a 2 ans Répondre

Chez moi tout marche super...mais en local.

Si je veux faire pareil sur mon thème WP, ou dois-je mettre les div ? Dans le header ?

J'ai un peu de mal pour l'intégration en ligne en fait

Grafikart Il y a 2 ans - Répondre

Oui ça se passe dans la partie header.php de ton thème wordpress

Aleks Il y a 2 ans Répondre

Toujours du bon boulot ! Merci de m'en faire découvrir tous les jours .
Bonne continuation .
Fan #1

leknoppix Il y a 2 ans Répondre

génial, symplement génial, en plus c'est vraiment pas con, mais fallait y penser.

leforezien Il y a 2 ans Répondre

Merci pour le tuto, toujours aussi sympa.

Bentrois Il y a 2 ans Répondre

Chapeau, bien vue.

Mais dommage pour moi! J'ai eu un petit espoir.
Car en fait je veux appliquer un design en png sur
(je dit bien "sur" et non pas autour. d'ailleur merci pour se tuto qui ma donner pas mal d'idées).
le lecteur DEEZER tout en pouvant utiliser les bouton play,volume...
Car j'ai deja trouver un astuce pour mettre des calques visible sur le lecteur flash de deezer!
Voici l'astuce: wmode="transparent" paramètre->wmode Valeur->transparent

Merci pour votre réponse rapide et efficace.

PS: Si quelqu'un connais un soluce à mon problème!

Bentrois Il y a 2 ans Répondre

Bonjour, dans votre (super tuto) vous avez dit que en installant un Effet de parallaxe en CSS, vous ne pourrez pas atteindre les lien qui se trouve en dessous.
Mais sur votre site les lien qui se trouve en dessous son joignable!
Si je ne me trompe pas, pourriez-vous me dire comment vous faite.

J'ai peut être un bonne astuce pour le nouveau lecteur Deezer.

Merci et un grand bravo pour se partage d'information.

Grafikart Il y a 2 ans - Répondre

en fait les liens en dessous ne sont pas joignable, j'ai mis par dessus la guirlande un menu avec une opacité très faible 0.1 qui devient clair dès que l'on passe dessus

Baptiste Il y a 2 ans Répondre

bien sympa ce petit plus! petit plus qui fait la différence! toujours bien Jonathan bravo
PS: je peux toujours pas mettre de commentaire avec mon compte...

Grafikart Il y a 2 ans - Répondre

Pour les commentaire édite ton profil pour changer l'url de ton site.

Sixte Il y a 2 ans Répondre

Sympa ce tuto.

Bon par contre l'intérêt est très limité si on laisse toujours la fenêtre en plein écran et que l'on utilise la technique du tuto, par contre si on l'associe à la position de la souris la c'est déjà plus sympa t plus utile.

Quelqu'un a essayé de l'utiliser avec une méthode du style show() jquery sur une div ?

Alcmene Il y a 2 ans Répondre

Bonjour,

Tutoriel assez intéressant, mais je pense quand même important de préciser que ce genre de choses, c'est mal… Les div n'ont aucune valeur sémantique, et ce genre de choses devrait être fait en utilisant les backgrounds multiples en CSS (dans la spec CSS3 : http://www.w3.org/TR/2005/WD-css3-background-20050216/ #layering ; en démo, plus court : http://www.css3.info/preview/multiple-backgrounds/ ).
Je sais, c'est pas compatible avec autant de navigateurs que cette méthode, mais franchement, pour un truc autant "gadget" (pas de mépris hein, mais c'est quand même franchement pas un élément vital du site ), c'est parfaitement dégradable, donc pourquoi ne pas le faire ?

Sinon, au moins, pour présenter ce genre de trucs, n'utilise pas une DTD XHTML…

PS : au fait, ton formchecker a un souci avec l'URL de mon site… Faut pas bloquer tous les caractères. Notamment, pas la tilde

dreadstock Il y a 2 ans Répondre

Pour info hammond68 : sur ton site, dans le menu "accueil" cela s'écrit accueil et pas acceuil bonne journée

hammond68 Il y a 2 ans - Répondre

merci j'étais complètement passé à coté !

dreadstock Il y a 2 ans Répondre

Pour info : voici quelques exemples supplémentaires assez sympa :
http://dezignus.com/
http://www.housamz.com/
http://www.kriesi.at/demos/?wptheme=Communizine
Et pour finir, utilisation super super extrême :
http://stephband.info/
et je crois que les précurseurs du parralaxe sont eux http://demo.rockettheme.com/?template=vertigo
Merci pour le tuto et bonne continuation

fantoche Il y a 2 ans Répondre

Coucou,
petite faute de frappe "Dans ce tutoriel vidéo vous apprendre comment créer..." :-)

hammond68 Il y a 2 ans Répondre

Super ce tutoriel !

je m'en suis servi sur mon blog, par contre je n"ai pas utilisé de guirlandes, mais j'ai essayé d'imiter une "pluie numérique".

Allez-voir http://www.swcollection.net/

J'espère avoir l'avis du grand manitou :-)

nicko Il y a 2 ans Répondre

Super sympa cet effet, ça va me donner des idées