Les webdesigns utilisant une seule page scrollable pour afficher leur contenu sont assez rares mais sont souvent très originaux. Souvent utilisés par des agences ou des artistes cherchant à se démarquer par la façon de présenter leur contenu ce type de disposition reste inadapté lorsque le contenu devient conséquent. Je vous propose tout de suite de découvrir une sélection de 10 site qui utilise un défilement vertical ou horizontal pour leur navigation.
Morphyx Studio
Le site de morphyx studio est l'exemple parfait de navigation verticale, avec ses dessins vectoriels coloré et son interface en 3 plans il reste une référence en terme d'ergonomie et de design.
Volll
Encore une navigation verticale se démarquant par l'ajout de petites animations rendant le design plus vivant et encore plus original.
Atomic Cartoons
Avec son design cartoons et son univers souterrain utilise aussi une navigation verticale bien pensée qui met assez bien le côté créatif de cet agence...
Danny Blackman
Encore une navigation verticale pour le site personnel de Danny Blackman qui permet d'afficher ses travaux dans des dimensions plus grande qu'à l’accoutumée.
WeBleedDesign
Le portfolio de Bryan Katzel se démarquent des autres portfolio par un fond fixe et un fond travaillé qui donne l'impression d'une cascade qui traverse plusieurs environnement. Une expérience visuelle à essayer.
Peter Pearson
Peter Pearson utilise une navigation horizontale pour son portfolio et utilise aussi un fond fixe. Ces 2 spécificités en font un portfolio très agréable à consulter avec un aspect graphique originale se rapprochant de ce qui peut se faire en flash...
Carrot Creative
Encore une navigation horizontale pour le studio Carrot Creative avec un aspect graphique propre et efficace. On appréciera aussi la touche d'humour dans le contenu et les visuels utilisés.
Tyler Finck
Un design très simpliste mélangé à une navigation horizontale, c'est la recette du portfolio de Tyler Finck. Le fil conducteur de la visite étant une bande noire qui se transforme au fur et à mesure de la navigation. L'idée est originale et la réalisation est efficace, l'effet de déformation de la bande noire est vraiment réussi.
Lucuma
Lucuma propose une navigation horizontale proposant de découvrir une longue illustration panoramique. Assurément un bon moyen de mettre en avant ses talents artistiques.
Eric Johansson
Eric Johansson dispose avec son portfolio une ergonomie aussi intéressante que déroutante. Tout se passe par des glissé déposé qui permette de dévoiler des contenus. Discutable en terme d'ergonomie, ce portfolio est une très bonne façon de prouver son originalité.
greg (19 janvier 2010 à 19 h 59 min)
Quand tu dis :
"Un tuto existe déjà sur le sujet : http://www.grafikart.fr/tutoriels/video/scrolling-anime-44"
il est adapté pour un seul lien "top" là c'est carrément un menu entier.
Lovev'cade (30 décembre 2009 à 13 h 47 min)
Merci bien. Un peu compliqué pour moi xD. A vrai dire le code c'est pas, mais pas du tout mon TRUC lOL, mais merci quand même
WAIPdesign (17 décembre 2009 à 15 h 32 min)
Bonjour à tous...
@Grafikart : je ne sais pas si c'est l'endroit approprié pour ma réponse, sinon désolé...
@lovev'cade : désolé pour le retard de réponse !
En fait, c'est plusieurs petites choses :
1. les images de fond (il y en a 3 - accueil, portfolio, contact) sont déclarées dans le html à width:100% () et positionnées en css ;
2. le script (appelé dans init-min.js) est là pour centrer verticalement la page au chargement et lors du redimensionnement de la page (je joue avec la taille du header en fonction de la largeur de la page). Il sert aussi au positionnement du logo, du menu et du formulaire de contact) et à la taille du post-it sur l'accueil. Il est disponible à cette adresse : http://www.waipdesign.fr/fichiers/js/height.js ;
3. pour le scrolling, je me sers de thw.js.
Pour plus d'infos (ou pour un devis
), n'hésitez pas à m'envoyer un mail par mon formulaire de contact.
greg (15 décembre 2009 à 13 h 34 min)
Trés tendance
swecha (13 décembre 2009 à 16 h 42 min)
vraiment super ce post! ça aide à l'inspiration ! j'irai de ce pas jeter un oeil aux tutos!
Ps : UP!UP!UP! pour ton site WAIPdesign! j'ai vraiment aimé!
tchao!
HeB (12 décembre 2009 à 20 h 08 min)
merci ça marche maintenant
HeB (12 décembre 2009 à 15 h 57 min)
génial !
arf je tombe sur une erreur sql
Grafikart (12 décembre 2009 à 1 h 25 min)
Un tuto existe déjà sur le sujet : http://www.grafikart.fr/tutoriels/video/scrolling-anime-44
HeB (11 décembre 2009 à 18 h 51 min)
Super! j'aimerais fire un site avec la meme méthode. le rendu est fait avec l'utilisation d'ancres seulement?
un tutos dessus ?
cordialement
lovev'cade (4 décembre 2009 à 17 h 30 min)
@ WAIPdesign. NICE NICE NICE
Mais il se trouve où ce script?
WAIPdesign (4 décembre 2009 à 11 h 45 min)
Bonjour à tous,
c'est vrai que c'est "vachement" beau les sites du genre... c'est pourquoi j'ai utilisé le principe pour mon site ! Et en plus j'ai rajouté un script de redimensionnement à la taille de la fenêtre. L'adresse ? http://www.waipdesign.fr
lovev'cade (2 décembre 2009 à 15 h 47 min)
+1 http://www.ormanclark.com/
Specialiste-immo.com (2 décembre 2009 à 15 h 39 min)
voici un autre
http://www.anooki.com/
Baptiste (2 décembre 2009 à 12 h 36 min)
Wahou! on en prend plein les yeux! c'est très bien fait, intuitif et plein de bonnes idées d'astuces et de trouvailles! merci
@+
je propose ça aussi! http://www.richardarran.com/
@+
lovev'cade (2 décembre 2009 à 10 h 54 min)
A quand un tuto sur cette effet super cool? :p
Jodu12 (1 décembre 2009 à 21 h 46 min)
Moi je propose http://www.deadpx.fr/ je trouve ce site sublime
Harry (1 décembre 2009 à 21 h 16 min)
C'est très sympa ce genre de site. J'ai particulièrement aimé celui avec la cascade de couleur et la bande noire.
protanq (1 décembre 2009 à 21 h 13 min)
C'est sur ces sites qu'on est content d'avoir une molette sur la souris
Fraize (1 décembre 2009 à 21 h 06 min)
inspiration inspiration
lovev'cade (1 décembre 2009 à 20 h 55 min)
ATOMIC CARTOONS & WEBLEED DESIGN sont tout simplement extraordinairement beau !!!
+1 pour ce superbe post. I LIKE.
Nejyn (1 décembre 2009 à 20 h 46 min)
Pareil que joska !!! Que de bonnes idées
joska (1 décembre 2009 à 20 h 26 min)
Merci pour les liens. Je bookmark tout ca dans la categorie "inspiration".