L'aspect bidimensionnel limitant des écrans d'ordinateur contraint aujourd'hui la conception des sites Web. Lors de la conception de présentations de sites Web parallaxe, celles-ci peuvent apporter des effets et des graphismes d'une beauté tridimensionnelle sous vos yeux! Souvent créé avec les bibliothèques Adobe Flash ou JavaScript, cet effet n'est pas souvent utilisé mais offre un sentiment très unique.
Vous trouverez ci-dessous des exemples très créatifs que j'ai rassemblés pour vous inspirer du numérique. Les concepteurs de sites Web du monde entier peuvent rassembler des idées pour des sites Web de style parallaxe. Ce n'est pas un sujet très déroutant, et une fois que vous avez défini un style de conception, il est facile de décomposer des graphiques et de coder le tout.
Rastape
Ici, tout le design d'arrière-plan est représentatif d'une chaîne de restaurants. La navigation supérieure est facile à trouver et les animations sont très épurées.
Lors du premier atterrissage sur la page, la musique saccadée commence automatiquement. Ce n'est peut-être pas la meilleure capacité de présentation, mais elle affiche des caractères. Heureusement, le lecteur audio situé en haut de l'écran peut être facilement modifié. Vous trouverez également les coordonnées vers le bas.
Dîner au centre-ville de Billy
Billy's Diner offre un sens élégant de la classe au thème rétro. Afficher une belle page avec des polices et des couleurs créatives, le site Web est facile à naviguer.
Les points forts incluent une navigation bien placée et une typographie brillante. Une grande partie de la sensation de dîner est appliquée à l'animation en-tête. Cet exemple de défilement de parallaxe touche les tons nostalgiques du restaurant classique des années 1950.
Atlantis World's Fair
C'est personnellement l'un de mes sites préférés. Les animations de conception sont très fluides et le développeur Web a utilisé pour la plupart toutes les techniques CSS. Les débutants et les professionnels doivent s’émerveiller devant cette œuvre d’art.
En descendant dans les niveaux inférieurs du site Web, vous pouvez trouver des informations de contact et un espace publicitaire vierge. Vous remarquerez peut-être que l'effet est de suivre une personne dans un ascenseur dans les profondeurs les plus profondes de l'océan vers Atlantis. L'illustration vectorielle est magnifique pour les concepteurs visuels du monde entier.
B5 Designs
Avec B5 Design Studio, leur défilement parallaxe se déplace horizontalement dans la navigation. La page d'accueil initiale contient quelques liens vers des sources externes sans barre de défilement latérale. Il n’ya rien de trop déroutant dans l’interface utilisateur, qui se démarque vraiment bien.
Vous remarquerez que tout le texte de la page est écrit en HTML et stylé avec CSS. Aucun flash n'a été appliqué, même avec des images, et après un examen approfondi, les auteurs sont alimentés par jQuery. Ceci peut également être vu dans leur formulaire de contact qui propose des info-bulles utiles.
Snoggle Media
Ce site a également été créé avec jQuery. Vous remarquerez peut-être qu'ils utilisent une navigation latérale opposée à B5, à savoir verticalement vers le haut et le bas de la page. Leur utilisation de couleurs de fond vives se marie bien avec les tons minimalistes.
Le site gère un blog sous un thème similaire. La société utilise probablement WordPress 3.x avec une division jQuery au format HTML. Ils ont également capitalisé sur le SEO de manière phénoménale en proposant des URL uniques et alternatives à explorer par Google.
Webdesign Karlsruhe
Bien que rédigé exclusivement en allemand, le concepteur du site Web a soigneusement pris en compte le défilement de la parallaxe. L'ensemble du site apparaît comme une vue à la première personne vers un support en bois.
Les notes sont placées en tant que navigation et le concepteur inclut des exemples de son travail passé. Le style de portefeuille qu'il rend apparaît beaucoup plus dynamique que beaucoup. C'est peut-être une autre bonne utilisation de la bibliothèque jQuery au travail. En cliquant sur une image, vous obtenez un aperçu et des informations supplémentaires sur le projet.
FillStudio
Fill Studio est un exemple élégant de pensée très minimaliste. Vous pouvez trouver des exemples de couleurs douces tout au long de leur site Web. La page principale manque beaucoup, mais la navigation est simple et garde le visiteur concentré sur quelques tâches seulement.
La page de leur portfolio est très impressionnante et montre de belles œuvres artistiques. Chacun est désigné un jeu de couleurs unique qui s'affiche lors du survol de la souris. Ils affichent également plus d'informations sur le projet et des liens de contact.
Kalendiar
Quand je pense à l’unique, Kalendiar se démarque des autres. Leur site se concentre sur une vue similaire à la première personne d'un paysage apparemment encombré. La typographie et les images graphiques sont dispersées et prêtent à confusion.
Je respecte vraiment beaucoup leur style d'art unique. Il est très difficile de concevoir des sites Web, surtout si complexes. Je trouve que leur titre a beaucoup de pouvoir, en plus du fait que leur langue maternelle n'est pas l'anglais et manque un large public.
Titre créatif
Une belle agence de création qui propose des couleurs riches et profondes pour bon nombre de ses composants d’interface utilisateur. Encore une fois, vous trouverez leurs liens principaux et leurs sentiers de navigation vers le haut du site.
Le composant de parallaxe est capable de démontrer des coordonnées uniques pour contenir des informations. Ce style de conception comporte un tableau de bord ou un paramètre de bureau. Les utilisateurs sont guidés avec les liens vers les zones où ils peuvent trouver des informations sur la société, leurs coordonnées et des exemples de travaux.
Tennessee Trails & Byways
J'adore le site Web de voyage du Tennessee. Ils proposent de superbes animations de parallaxe et proposent même un bref tutoriel juste avant le chargement du site. Certes, il n’est pas difficile de travailler sur leur site, mais cela aide les personnes malvoyantes.
Il y a une quantité énorme d'informations placées sur le site. La plupart des attractions répertoriées contiennent des pages Facebook qui sont directement liées au site. Tous les popups contiennent du texte réel et sont développés sous jQuery. La page comporte en fait de nombreux menus, qui utilisent tous de puissantes techniques de déplacement et d’animation de sous-page.
Jeu de mush
J'aime les illustrations vectorielles numériques attribuées à Mush.Leur image de marque est adorable et se démarque vraiment parmi les nombreux autres sites Web. En vedette bien en arrière-plan de parallaxe, vous pouvez voir le mouvement des arbres et des branches suspendues dans la forêt.
Vous remarquerez que Mush a inclus une brève vidéo de démonstration pour son application. En vedette sur Windows Phone 7 et utilise beaucoup de moteurs graphiques cool! Comme toujours, vous trouverez de brèves informations de contact et des liens vers la section de bas de page.
Fouettez votre site web
Whip Your Website est une application soignée avec quelques fonctionnalités intéressantes. Vous pouvez entrer une URL dans la barre d’adresse pour modifier leur disposition. Tout est basé sur HTML5 et comporte quelques effets jQuery personnalisés. C'est un endroit agréable pour jouer avec si vous avez 15 minutes!
Diego Ch? Vez
Dhype n'est pas la quintessence des conceptions de parallaxe, bien qu'il dispose d'une interface dynamique. Personnellement, j'aime les effets de fond. C'est génial, et ajoute vraiment à la personnalité de l'entreprise.
La plupart des liens de sites affichent des fenêtres contextuelles ou des pages de diapositives. Cela inclut les coordonnées et les travaux du portefeuille. Comme le site est bas sur les pages, la navigation devient un jeu d'enfant! Il est difficile de se perdre, ce qui est une bonne chose car toutes les informations dont vous avez besoin sont concentrées au premier plan.
Netlash
Les énergies créatrices placées dans le design de Netlash sont extraordinaires. J'adore leur utilisation de la navigation de type tableau de bord car elle donne vie à beaucoup d'images d'arrière-plan.
Vous pouvez faire défiler verticalement les différentes pages. Cela permet une navigation sans liens ni curseurs jQuery et montre également comment tout peut être exploré sur une seule page. Vous remarquerez également les informations de contact et les informations sur les sociétés qui changent, ce qui montre que vous avez visité une nouvelle page.
Nicosia Longhi
Le portefeuille ci-dessous comprend de nombreuses modifications d’interface utilisateur fascinantes. La musique de fond est agréable et n'interfère pas avec la navigation dans la mise en page. En fait, je dirais que c'est un bel accent pour le thème général du site.
Ceci est accompagné d'une discographie d'œuvres musicales et d'autres informations sur les contacts. Toutes leurs informations sont également affichées dans les fenêtres jQuery sans recharger la page. Cela économise beaucoup d'énergie à long terme et laisse les utilisateurs inspirés.
GaBL?
Il apparaît que Gable est exécuté via un moteur jQuery avec des popups blackbox. Celles-ci sont couramment utilisées pour stocker des galeries d'images et de petits morceaux d'informations de page. Le menu de navigation se trouve dans la galerie de parallaxe d’œuvres d’art, bien que ce soit un peu déroutant.
Une grande partie de l'information du site est bien présentée et offre des ressources assez solides. J'aime la mise en page, et bien qu'il n'y ait pas d'étiquettes sur chaque article, vous pouvez survoler pour savoir où elles mènent. Et ce n’est pas si mal d’explorer, puisque chaque page s’ouvre dans la même fenêtre sans aucune actualisation.
Head2Heart
La galerie de vecteurs nuage semble tracer un chemin parmi le ciel. Lorsque vous suivez les numéros de navigation au bas, il est très simple de trouver des informations et des chemins menant à ce que vous recherchez.
Je suis vraiment émerveillé par la palette de couleurs et la mise en page uniques de ce site. Il y a tellement d'animations fantastiques qui semblent toutes si fluides en comparaison. Leur forme de contact affiche un travail vectoriel faible et des composants d'interface utilisateur dynamiques. Si vous aimez les sites Web de parallaxe, c'est une source d'inspiration.
Esteban Mu? Oz
Le portefeuille d'Esteban offre un large éventail d'exemples. Son travail est phénoménal et affiché proportionnellement dans la partie supérieure de son site Web. C'est ici que vous pouvez également trouver des liens de navigation qui incluent tous du contenu sur la même page.
Les effets de défilement de parallaxe sont fortement appliqués dans son pied de page avec un nuage dessiné à la main. Il propose des liens externes uniques vers des sources extérieures qui parrainent son site Web dans des galeries de design. C’est un moyen puissant d’établir la confiance entre vos clients et d’obtenir plus de travail sur des projets.
Prix de la ferme
Une autre disposition de parallaxe à défilement horizontal qui s’intègre parfaitement dans notre ensemble! Le tarif de la ferme conserve une configuration de la vieille cuisine campagnarde dans l’arrière-plan de chaque section. Toutes les informations supplémentaires sont incluses dans une fenêtre contextuelle avec du texte réel.
L'ensemble du site semble être exécuté sur HTML et jQuery qui alimente les animations. Vous trouverez des liens de navigation standard vers le haut, qui représentent les coordonnées et les récompenses tarifaires. Ils créent de délicieux pudding et autres desserts et ont transmis l'entreprise depuis des années.
BeerCamp au SXSW 2011
Beer Camp utilise une typographie très vibrante pour démontrer son travail. Une grande partie des titres de sous-titres et de titres sont difficiles à lire, même pour ceux qui ont une grande vue. En faisant défiler notre souris avec la molette de la souris, vous pouvez zoomer sur le texte, ce qui peut sembler petit au début.
De plus, lorsque vous naviguez entre les liens de titre, les effets d’animation de zoom sont affichés. Cela peut être vu à partir de l'une de leurs pages et démontre un effet fantastique. Le site semble avoir été écrit en HTML, lequel peut utiliser les bibliothèques de polices jQuery.
Ben le garde du corps
Je suis un grand fan du travail de Ben. Au sein de son site Web, il a créé un monde numérique qui vous permet de naviguer dans les ruelles sombres de sa ville. Vous ne trouverez aucun lien de navigation physique car la seule information est dirigée vers le haut et le bas de la page.
Ben définit également toute sa galerie sur une page. Cela ne signifie pas de rafraîchissement, comme c'est le cas avec toutes les galeries de parallaxe que nous avons vues jusqu'à présent. La véritable inspiration réside ici dans les graphiques d'arrière-plan et le style complexe d'animation jQuery. Je suis fan de la mise en page de ben et j'aimerais voir d'autres concepteurs créer des ambiances similaires sur leurs sites Web.
TEDxPortland
TED est un événement merveilleux avec certains des orateurs les plus compétents. Leur site Web contient des vidéos étonnantes et, pour leur événement à Portland, je ne pourrais être plus heureux de leurs choix de conception.L'ensemble du site Web est basé sur le défilement de la parallaxe tout en gardant le cap intact.
Vous pouvez parcourir chaque page facilement et sans aucune actualisation. Le fond noir fournit une toile de fond parfaite pour que les lettres d'un blanc éclatant sortent de la page. Vous pouvez choisir de faire défiler avec la barre de défilement latérale au lieu d'utiliser des liens de navigation. Cependant, cette méthode est beaucoup plus lente et il faut un peu de savoir-faire pour naviguer manuellement.
Résolutionisme
Cette entreprise de conception de sites Web a fait beaucoup de choses dans leur mise en page. Ils appliquent de nombreux effets jQuery tout au long de leurs pages pour faire beaucoup briller les choses. Vous pouvez trouver leurs liens de portfolio rapidement accessibles et avec un rebond brusque d’énergie d’animation.
Chaque étude de cas offre un lien direct vers le projet ainsi qu'une vidéo complémentaire pour tous les clients potentiels. Vous trouverez les informations de contact ainsi que les indications de Google Maps vers le bas de la page. Vous pouvez trier leurs messages individuels dans le coin supérieur droit de chaque panneau.
David Beckham
Le site Web de David est très minimaliste, ce qui montre à quel point le transfert d'informations peut être simple. Chaque panneau coulissant est accessible via le système de navigation de droite. Une série de points blancs sont disponibles et peuvent être cliqués comme sections de navigation.
Les panneaux comportent un arrière-plan différent de David et contiennent également des lettres blanches sur un fond noir. Vers le bas, vous trouverez des ressources pour les contacts et les crédits. Également un compteur de pixels fantaisie qui affiche le nombre de pixels individuels que vous avez fait défiler
Ap-o
Apo gère un site Web fantastique avec de superbes animations coulissantes avec parallaxe. Dans le coin inférieur droit, vous trouverez une flèche qui vous mènera d'une section à l'autre de la page. Son site Web fonctionne dans une atmosphère verticale, ce qui facilite grandement le défilement sans aucun effet jQuery.
Un inconvénient que j'ai constaté est qu'il n'y avait pas beaucoup de système de navigation au départ. Vous trouverez peut-être difficile de parcourir chaque page et d'extraire distinctement les informations dont vous avez besoin. Ses antécédents sont également un peu durs pour les yeux, ce qui pourrait être adouci ou guéri un peu plus.
Victime de vampire
Maintenant, c'est un site terrifiant. Le concepteur a inclus de nombreuses illustrations réalistes de vampires, de monstres et d'allées sombres pour effrayer même les fantômes les plus sombres. Le défilement de la parallaxe fonctionne parfaitement! C'est un ajout fantastique au thème effrayant.
Les informations sont disposées verticalement, ce qui peut être attendu de n'importe quelle présentation de style de site Web classique. Les liens et le texte de la page sont un peu difficiles à lire car l’image de fond saccadée vous saute aux yeux. Mais je dois applaudir les concepteurs dans un effort créatif incroyable, comme je ne l’ai jamais fait auparavant.
Manufacture d'Essai
L'un des aspects de leur conception que j'aime beaucoup est l'inclusion de la traduction dans les langues. Vous pouvez choisir de faire la transition entre l'italien ou l'anglais dans le coin droit. Le menu du site Web est également masqué par défaut, ce qui est un peu déroutant.
Leurs animations de page sont brillantes et comportent vraiment des effets de parallaxe étonnants. Les images d'arrière-plan se répètent souvent et porteront tout au long de leur catalogue et de leurs pages de contact. Vous trouverez également une section portefeuille brillante qui présente également des œuvres au format galerie jQuery.
Elect-LO-nica
Ce site Web basé au Japon fonctionne également sur les effets de distorsion de parallaxe et le défilement vertical. Lorsque vous faites défiler l'écran, vous pouvez trouver des effets d'animation soignés qui mettent en valeur de superbes graphiques vectoriels.
Tout le texte est écrit en japonais. Cependant, vous n'avez pas besoin de comprendre le contenu du site Web pour suivre son style. Vers le bas, vous trouverez une liste de pistes et d'autres détails de contact. J'apprécie leur adaptation de la mise en page car cela représente un état d'esprit très simple.
Rohto Japon
Rohto Japan est une entreprise beaucoup plus déplacée. Leur mise en page est à nouveau présentée défilant horizontalement et offrant des liens de déplacement. Tout au long de la couche inférieure, vous trouverez des liens de réseaux sociaux et des contacts externes.
Au-dessus de ceux-ci sont les liens de navigation principaux. Ils ne ressortent pas beaucoup et peuvent même mieux figurer dans la partie supérieure de la page, qui est généralement vide. Les détails de la page sont très nets. Je suis également un grand fan de leur style d'animation, qui est rapide et fluide pour la transition.
