, Tortues dans le temps. ou jeu original Patrouille de la lune . Dans ces jeux, la technique de Parallax est observée au moment où plusieurs couches de fond avec différentes textures se déplacent avec vitesse différenteQu'est-ce qui crée l'effet de l'espace en trois dimensions.
Pourquoi ai-je commencé à parler de jeux rétro dans l'article de développement Web? La réponse la plus simple pourrait être "parce qu'elles sont cool" mais non. Le défilement pararallax est un concept de conception de la salle de classe qui se fraye un chemin dans le monde de la conception Web. Nike était l'un des premiers qui ont utilisé cette technique avec grand succèsQuand ils ont embauché des géants marketing de Weiden et Kennedy pour développer leur site Web original Nike Meilleur Nike. Le site Nike Better World a été mis à jour à partir de ce moment-là et remplacé par une nouvelle, cependant, il existe un autre site, assez similaire au premier design de Parallaxe de Nike - Site sur les boissons sportives activées.
Probablement, vous avez remarqué que lors du défilement de la page du site, les quelques éléments différents de cette page se déplacer à différentes vitesses. Prenons la page affichée sur la photo ci-dessus. Lorsque la page est défilée, vous verrez que les points bleus à l'arrière-plan (celles qui sont un peu floues) se déplacent à la même vitesse que la barre de défilement. De plus, vous verrez qu'un groupe de points bleus, qui sont plus ciblés et qui se trouvent au premier plan, se déplacent avec une légère vitesse que ScrollBar. Plus vite, ces points déploient du texte "0 sucre | 0 calories | Naturellement adoucie "et le titre principal de la page" Products ". Et enfin, il y a des images du produit lui-même, à la fois petites et défocalisées à l'arrière-plan et au grand, ciblées et mentantes au premier plan. Les images de fond des produits se déplacent à la même vitesse que le texte, tandis que les images de produit au premier plan se déplacent plus rapidement que ce texte. C'est tout et est une démonstration idéale du défilement de parallaxe, lorsque différentes couches d'images sont superposées les unes sur les autres et que tout le monde se déplace à différentes vitesses lors du défilement de la page, créant un effet à trois dimensions.
Le défilement de la parallaxe ne se limite pas au rouleau vertical de la page ou du défilement en ligne droite. Nous donnerons le droit de Nintendo de démontrer un exemple idéal confirmant cette déclaration. Rappelez-vous les premiers jeux de Nintendo, où nos héros se déplacent généralement horizontalement de gauche à droite sur l'écran et non verticalement, comme nous l'avons vu sur le site Web activé ci-dessus. Rouler sur le Markiokart Wii et parlons de certaines choses cool que nous pouvons voir là-bas.
La première chose que vous remarquerez est la direction du défilement de la page - ce n'est pas vertical, mais comme il est dit ci-dessus, mais à l'origine horizontale. Bien sûr, c'est cool, mais ce n'est pas non plus un nouveau concept. De plus, vous remarquerez l'effet de parallaxe avec le dinosaure Yoshi et les coquilles à l'arrière-plan, Mario et Luigi au premier plan et le contenu principal qui sont déplacés à différentes vitesses lors du défilement. Mais dès que vous arrivez aux pages #Phighlights et #attack, la trajectoire du déplacement cessera d'être parfaitement horizontale. Il en va de même pour la transition entre #REDécover et pages #SNES. Les images conservent non seulement leur vitesse de déplacement différente, mais modifient également la direction générale de l'horizontale à la verticale.
Il convient également de noter que l'utilisation de l'effet de parallaxe sur votre site ne doit pas être limitée que par la possibilité de créer un effet 3D artificiel. Le site Web de l'allemand Web Design Studio Webseitenfactory est un exemple de la manière dont vous pouvez utiliser PararAllax pour ajouter des effets différents à la page Site, tels que le mouvement des icônes dans différentes trajectoires, leur augmentation et la diminution de la défilation du site.
Le défilement de la parallaxe peut également aider à faire revivre le site sur lequel il n'y a pas beaucoup de contenu. Que se passe-t-il si votre site entier consiste en une déclaration de mission, ou une section de la part de nous, plus des informations de contact? Très probablement, vous pouvez en faire une page et dans certaines conditions, vous auriez un bon site d'une page, mais sera-t-il rappelé par les visiteurs? Le plus probablement pas. Mais que si vous ajoutez un peu de parallaxe à lui, comment les gens du printemps / été ont-ils fait?
Ma première impression était "Oh, ce site a l'air jolie." Mais quand j'ai commencé à l'écarter, l'impression était immédiatement "WOW, ce site est cool!". L'ajout d'un effet de parallaxe simple fait de la différence entre non mauvais et mémorable.
Le défilement pararallax est une bonne astuce qui peut être conservée dans la manche. Et il peut toujours être appliqué, que vous établissez un site multistanique complexe, ou un simple site de carte de visite à une seule page.
Exemples de sites avec Parallaxe
Certains d'entre eux sont très cool, je vous recommande de familiariser:Essence effet pararallaxe Il se situe à différentes vitesses du mouvement des éléments individuels de l'image d'arrière-plan, tandis que l'arrière-plan lui-même lors du défilement de la page, se déplace plus lentement le reste, ce qui crée une sensation de profondeur et de trois dimensions.
Merci à la popularité effet pararallaxe, existe déjà des plugins prêts à l'emploi avec une implémentation simple parallaxe Animations sur le site. Notre tâche est d'utiliser efficacement solutions prêtes à l'emploi Et être capable de les appliquer sur leurs sites.
Comment ça marche effet pararallaxeVous pouvez voir sur la page officielle de ce plugin, où vous pouvez faire défiler la page et voir immédiatement un tel effet lorsque le bloc inférieur avec une image d'arrière-plan flotte au sommet.
Ce qui est nécessaire pour la mise en œuvre paraLlaks défilement Effet?
- Connectez-vous à notre HTML.- Bibliothèque de documents jquery. et téléchargé à partir du plugin de site - parallax.js..
- Descendre effet pararallaxe Sur la page en utilisant l'attribut - données.. Ajouter à l'élément HTML.-Fil vous voulez utiliser - data-Parallax \u003d "Scroll" Et spécifiez le chemin de la photo - data-Image-src \u003d "/ image.jpg"à laquelle vous voulez appliquer l'effet.
- Copiez l'ensemble des styles et ajoutez à notre fichier style.css.. .parallax-fenêtre (
Min-hauteur: 500px;
Contexte: transparent;
} - La chose la plus importante est de choisir une grande taille et photos de qualité. Si je n'ai pas les bonnes photos, alors je les prends hardiment avec Pixabay. Ils sont libres et peuvent être utilisés librement à des fins commerciales.
Avant de remplir le serveur, vous devez disposer d'un dossier avec des photos, un dossier avec des scripts téléchargés. (jquery.min.js et parallax.js), aussi bien que HTML. Fichier I. CSS. modes.
Plein Code HTML:
Nous publions la mise en œuvre d'un effet de parallaxe très simple lors du défilement de la page. Cet effet de parallaxe n'est pas seulement très facile à installer et à configurer, mais aussi en soi, le script de parallaxe est petit et n'a pas besoin paramètres additionnels. Ce script fonctionne lorsque la bibliothèque de jQuery est connectée.
Sources
rarlallax se connecte plus simple et fonctionne lorsque la bibliothèque de jQuery est connectée.
Dans la version d'archive JQuery - JQuery-1.11.3.min.js, mais cet effet de parallaxe fonctionne à la fois avec de nouvelles versions de la bibliothèque JQuery, et avec plus âgée. Vérifié!
Par conséquent, connectez K. Document HTML première jQuery, et après le script lui-même parallax.min.js
Cela ressemble à ceci:
Eh bien, maintenant HTML CSS Pararallax Connection
Prenez le bloc, il peut s'agir d'en-tête, de section, de div, de pied de page.
Div Block, en particulier, appelez n'importe quelle classe et assignez:
Largeur: 100%
Min-hauteur: 400px;
Bien que ce ne soit pas fondamentalement.
HTML.
sECTION CLASSE \u003d "Parallaxe"
CSS.
.parallax (min-hauteur: 400px; fond: transparent;)Attributs requis pararallax
data-Parallax \u003d "Scroll" - Nécessaire pour déclencher le script;
données-image-src \u003d "img / bg_4.jpg - l'image, ou plutôt le chemin de la photo;
Sur la page Développeur spécifiée liste complète Les attributs.
classe \u003d "Parallaxe" - Toute classe, c'est écrit ci-dessus.
sECTION CLASSE \u003d "Parallaxe"
- Inscription à l'intérieur du bloc avec effet de parallaxe, dans ce cas, le titre.C'est tout
Le matériau est pris d'outre-mer. Et présenté uniquement à des fins d'information.
Cet article montre comment utiliser CSS. Les transformations et les fraudes avec 3D font un effet de parallaxe sur le site de CSS propre.
Pararallax est presque toujours créé avec JavaScript et, le plus souvent, il s'avère être intensif en ressources, en raison de la suspension des feuilles sur l'événement du défilement, de la modification de DOM directement et de réagir à une redessinement et des permutations inutiles. Tout cela se produit de manière asynchrone avec le flux dans lequel le navigateur rend la page, car le défilement commence à être brasé et que l'image se précipite de la part. Plus la mise en œuvre est correcte de la piste de Parallaxe Scrolls et utilisez des mises à jour DOM différées à l'aide de demandanimationframe. Il s'avère un résultat qualitatif, mais pourquoi ne pas vous débarrasser de JavaScript?
Le transfert de l'effet de parallaxe dans CSS enregistre des problèmes de performances et de manipulations inutiles, permettant au navigateur d'être ajustée à tous en raison de l'accélération matérielle. En conséquence, presque tous les processus sensibles aux ressources sont traités directement par le moteur du navigateur. La fréquence de cadre (FPS) reste stable et la photo devient lisse. De plus, vous pouvez immédiatement combiner Parallax avec d'autres chips CSS - requêtes de média ou supports. Parallaxe réactive - Qu'est-ce que c'est?
Théorie
Avant de plonger dans la compréhension du travail de ce mécanisme, nous allons créer le balisage nécessaire:
Et styles de base:
Parallaxe (perspective: 1px; hauteur: 100vh; Overflow-x: caché; Overflow-y: auto;) .parallax__layer (position: absolu; haut: 0; bas: 0; gauche: 0; gauche: 0;). Base (Transform: Translatez (0);) .parallax__layer - Retour (Transform: Translatez (-1Px);)
Toute la magie se produit dans la classe de Parallaxe. Déterminer les propriétés de la hauteur et des styles de perspective définira la perspective de l'élément dans son centre en créant un 3D fixe ViPort. Overflow-y: Auto permettra au contenu de l'élément normalement rolish, tandis que les descendants de l'élément seront tirés par rapport au point de vue fixe. C'est la clé pour créer un effet de parallaxe.
Suivant, classe Parallax__layer. Comme suit du nom, il détermine la couche de contenu auquel l'effet pararallaxe sera appliqué. L'élément avec cette classe est dominé à partir du flux total de contenu et est positionné de manière à remplir son conteneur.
Enfin, nous avons des modificateurs de modificateur Parallax__layer - Base et Parallax__layer - Retour. Ils sont nécessaires pour ajuster la vitesse des éléments de parallaxe défilant, les déplacer le long de l'axe Z (suppression ou approche de la confiance). Pour la brièveté, je n'ai fait que deux vitesses du défilement - plus tard, nous en ajouterons quelques autres.
Correction de profondeur
Étant donné que l'effet de parallaxe est créé à la charge de transformations 3D, le déplacement de l'élément le long de l'axe Z a un effet secondaire - les dimensions de l'élément changent, selon que cela soit plus proche ou sur, il est plus proche. Pour le réparer, nous devons appliquer une transformation d'échelle () de sorte que l'élément soit dessiné dans sa taille d'origine:Parallax__layer - Retour (Transform: TRUCLEZEZ (-1PX) Échelle (2);)
Le coefficient de Skale peut être calculé selon la formule 1 + (translatez * -1) / perspective). Par exemple, si la perspective de la fenêtre de vue est donnée sous forme de 1px et que nous déplacons l'élément à -2px le long de l'axe Z, le coefficient sera l'échelle (3).
Parallax__layer - Deep (Transform: TRUCLEZEZ (-2PX) Échelle (3);)
Régulation de la vitesse de la couche
La vitesse de la couche est régie par une combinaison de valeurs de perspective et de déplacement de Z. Les éléments avec des valeurs Z négatives vont rouler plus lentement que les éléments présentant des valeurs positives. Plus la valeur de différence est grande de 0, plus l'effet de parallaxe apparente(C'est-à-dire TRUCLATEZ (-10PX) va rouler une plus lente que TRUCLATEZ (-1PX)).
Création de différentes sections d'effet de parallaxe
Des exemples précédents ont démontré la technique de base d'utiliser un contenu simple, mais la plupart des sites de parallaxe parallaxe partagent la page à différentes sections avec des effets différents. C'est ainsi que cela peut être réalisé dans notre méthode.Premièrement, nous avons besoin d'un élément de groupe de Parallax__ pour regrouper nos couches ensemble:
Pour lui, CSS ressemblera à ceci:
Parallax__group (position: relatif; hauteur: 100vh; style transformateur: conserve-3d;)
Dans cet exemple, je veux que chaque groupe a rempli la fenêtre, donc je définir la hauteur: 100vh, bien que si nécessaire, le nombre de chaque groupe peut être différent. Style de transformation: Conserve-3D ne donne pas à un navigateur pour créer des objets plats avec Parallax__layer et position: Relative permet de positionner les éléments par rapport à leur groupe.
Une règle importante à rappeler - lors de la regroupement des éléments, nous ne pouvons pas couper le contenu à l'intérieur du groupe, débordement TC: caché à l'élément de groupe de Parallax__ brise l'effet de parallaxe entier. Le contenu non circoncisé conduira au fait que les éléments de la fille dépasseront la portée. Par conséquent, vous devez percer la valeur de Z-index dans le groupe pour être sûr que le contenu sera correctement masqué et arrêté car l'utilisateur fera défiler le site.
Il n'y a pas de règles rigides ou rapides concernant le travail avec des couches et des méthodes différentes impliquant des implémentations différentes. Mais pour simplifier le positionnement du débogage de la couche, vous pouvez appliquer une simple transformation d'éléments de groupe:
Parallax__group (transformer: TRANSFATE3D (700PX, 0, -800PX) Rotation de la rotation (30DEG);)
Jetez un coup d'œil à l'exemple suivant et faites attention à la chèque de débogage!
Avec l'émergence et le HTML5 généralisé (nouvelle norme de structure et de représentation du contenu Internet) et CSS3 (version de description avancée de la description vue externe Objets) Il est devenu possible de créer des éléments plus intéressants et mémorables de la conception de tous, sans exception, des pages Internet, y compris, bien sûr, des prêts.
Pararallax-Scrolling (à partir de l'anglais. Parallax-Scrolling - Dans Web Design: Technique spéciale utilisée principalement dans un graphique en informatique lorsque des images de fond se déplacent plus lentement que de se déplacer au premier plan) - C'est l'une des technologies avancées. design Web moderne. Mais son utilisation excessive peut aggraver la convivialité du site et conduire à la chute du coefficient de conversion.
Aujourd'hui, nous avons préparé pour vous une sélection unique de sites pararallaxes et nous vous conseillons de vous familiariser avec les exemples des pages cibles les plus performantes à l'aide de cet effet. Certains d'entre eux sont similaires aux œuvres d'art, d'autres - surpris par un format extraordinaire, mais ils méritent tous votre attention. Nosternons Pararallax et ce que c'est sur les exemples.
1. Design plat vs réalisme
De quel côté vous?
Avec le dépôt de ces géants que Microsoft, Google et Apple, (design plat) en un clin d'œil de l'Oka devint le succès de la saison et le sujet de la discussion sur des centaines ceintures de nouvelles et des blogs. Il a été perçu comme une certaine avancée dans le domaine de la conception Web et, très probablement, était en fait. Un organisme interactif intact a décidé d'attirer l'attention de ses clients à cette étape plutôt inhabituelle dans le développement de la conception virtuelle et a préparé un voyage interactif en lui fournissant le titre " Conception plate contre le réalisme. " Tout cela est créé, bien sûr, non sans l'aide d'un effet neuf à la mode.
Le directeur de la création d'Alejandro Lazos (Alejandro Lazos) explique que le plus non-trivial consistait à combiner HTML5-Game et Pararallax défilement.
«Nous voulions que toutes les actions se produisent continuellement et que les utilisateurs pouvaient passer du début à la fin sans s'arrêter. Pour ce faire, nous avons utilisé la technologie Ajax, qui permettait de transmettre des données via l'URL et de mettre à jour les données dans mode de fond, fournissant à l'utilisateur la page correspondante sans délai. "
2. Sony
Ce que vous n'avez jamais vu nulle part!
Présentez votre produit lorsque Sony Corporation ne sait pas comment, probablement, personne n'est dans le monde. L'atterrissage présenté fait partie de la campagne Sony "être déplacé" (de l'anglais. Être déplacé - être en mouvement), qu'ils disent ce qui suit:
«Nous appelons en quelque sorte des lapins expérimentaux, car toutes ces innovations que nous présentons, prennent immédiatement des entreprises concurrentes en service. Nous voulions faire mal, mais nous étions perçus comme un compliment. Le travail conjoint d'artistes et d'ingénieurs est toujours une expérience, mais seulement dans ce cas, vous pouvez espérer que demain fera un pas en avant. "
3. Coffee Costa.
Le graphite numérique a choisi sur les illustrations représentant la plupart des produits de la société.
Cette seule voie impressionnante - l'encrégule du graphite de l'agence de Brighton Digital. Dans le passé récent, l'agence était chargée: lumineux et intéressant de soumettre le produit du café Costa.
Le résultat du travail mérite tout silence. L'atterrissage semble luxueux. Il est rempli de toutes sortes d'éléments interactifs et d'illustrations animées.
4. Autoroute une.
Un poids important des images s'est avéré être le principal problème des développeurs
Ce microsite superbe développé par la Newcastle Agency "Shout Digital" pour l'agence de voyages "ESSUS" (la société est spécialisée dans la route et l'organisation de mois de miel) est un autre exemple remarquable du sujet que nous sommes considérés. Leur multiplication réalisée dans le rétrostile capture instantanément votre attention et ne relâche plus aux titres finaux.
Derrière le volant du classique "Cadillac Eldorado" de 1959, vous visiterez tous les célèbres endroits de la côte californienne. À première vue, tous les effets semblent simples, mais dès que vous commencez à faire défiler, vous allez ouvrir la vraie magie.
5. Faites votre argent
Gérez vos finances car il conseille que le site Web rend votre argent
Le thème de l'argent et de la finance personnelle est intéressant pour beaucoup, de sorte que le «premier-né» numérique de New York à la préparation de la commande de la caisse syndicale a préféré le format innovant traditionnel.
Fixer l'objectif de sensibilisation au public cible sur les avantages de la caisse syndicale (et des lacunes des banques), les spécialistes du marketing ont créé une superbe prête, de manière abordable et intéressante expliquant comment la caisse syndicale travaille, où trouver des bureaux de bureau et beaucoup plus. En outre, il existe une calculatrice qui considère que les banques reçoivent de vos investissements.
6. CYCLEMON.
La page cible vous montrera tous espèces existantes Bicyclette
Les hommes sages chinois disent: "Vous êtes ce que vous mangez." Pour les designers et les grands amants de Romain Bourdieux et Thomas Pomasa (Thomas Pomarelle), cette célèbre sagesse sonne donc "qu'est-ce que tu vas ce que tu rouges." Leur site de co-authentification vous surprendra non seulement par défilement neuf à la mode, mais aussi un merveilleux sens des illustrations humour et de première classe.
Les développeurs semblent avoir manqué n'importe quel type de bicyclette et essayé de les présenter afin que chaque visiteur ait pris feu avec le désir de s'acquitter de lui-même et de rejoindre la sous-culture multi-millions.
7. Lexus.
Vous pouvez essayer la voiture, rester à la maison dans votre chaise confortable
Merci à ce site, vous pouvez essayer nouveau modèle De Lexus Line, sans quitter la maison. La vidéo interactive développée par l'agence Digital Consulting vous fournira une information intérieure complète et très visuelle et Lexus est une voiture extérieure. L'effet de la présence est fourni.
Pour atteindre un tel résultat, l'équipe de spécialistes du marketing est tenue de capturer la voiture dans le contexte de divers paysages et de scanner la vue environnante dans chacun des points clés. Grâce à la technologie HTML5, aux fonctions d'atterrissage sur les ordinateurs et sur les smartphones, faisant de la promotion de la voiture, comme toujours réussi.
Wendy Stonefield, Directeur commercial Amaze, Notes: «L'utilisation de HTML5 nous a permis d'atteindre plusieurs objectifs. Tout d'abord, il s'agit d'une démonstration visuelle de la voiture, de ses caractéristiques fonctionnelles. Deuxièmement, il s'agit d'une interactivité, sans projet moderne: dans ce cas, nous permettons aux utilisateurs de choisir la couleur de l'intérieur et du corps de la voiture. Création d'une vidéo, nous nous sommes concentrés sur la visionneuse sophistiquée - et avec ces technologies qui existent aujourd'hui, elle est devenue plus que possible. Nous avons montré que Lexus est comme c'est réellement. "
8. La vie dans mes chaussures
La vie dans mes chaussures (des yeux anglais d'une autre personne) est un projet ambitieux, dont la tâche principale est l'éradication de la peur et des préjugés contre le VIH et la sensibilisation à la jeune génération sur le VIH et le sida. Le trafic de l'agence de Londres était une tâche de concevoir un connaissement, capable d'attirer l'attention d'un jeune auditoire et de conquérir sa confiance, et ils ont parfaitement goûté avec lui.
La police de marque moyenne compliquée de Houshka a été mise en œuvre avec le soutien de la syntaxe Font-face, c'est pourquoi la page a commencé à avoir l'air de plus en plus intéressante. D'autres éléments décoratifs ainsi que l'utilisation de jaune ont fait une ressource esthétiquement attrayante.
9. La bête.
La nouvelle page cible des célèbres chanteurs folklorques lit les poèmes et accompagne leurs images incroyables.
Pour promouvoir le nouvel album des célèbres chanteurs folkloriques Laura Marling (Laura Marling) "Une créature Je ne sais pas" (de l'anglais - création inconnue) Le Studio Studio de Londres Digital-Agency a développé une page d'atterrissage incroyable, qui lit la poésie, Accompagner des illustrations sophistiquées et des animations expressives.
Pour créer un tel miracle, de nouveaux éléments sémantiques et attributs ont été utilisés, grâce auxquels les animations sont synchronisées avec la piste sonore et leur vitesse correspond à des paramètres précédemment spécifiés.
10. Le laboratoire.
Les recherches d'Alzheimer, la principale institution au Royaume-Uni, qui est engagée dans l'étude de la maladie d'Alzheimer, a mis l'objectif à raconter ses activités et ses résultats d'une forme passionnante et accessible. Pour cela, la ressource de laboratoire a été créée.
Sur la page, chaque utilisateur offre la possibilité de se familiariser avec des laboratoires et des cliniques de l'institution et des conseils contextuels sous forme concise explique l'affichage de l'écran. Si vous cliquez sur n'importe lequel d'entre eux, vous obtiendrez des informations plus détaillées. La démonstration de la manière dont les scientifiques incarnent leurs théories dans la vie et donnent espoir à des millions de personnes, mises en œuvre de la meilleure façon possible.
11. Pourquoi votre cerveau crave infographie
Infographie Infographics!
NEOMAM Studios a été marqué d'un magnifique cadre de défilement paralax, éclairant les principaux avantages de l'infographie en tant que méthode de soumission des informations.
"Le défilement de Paraludlax est la chose la plus difficile que je devais mettre en œuvre nos développeurs", Danny Ashton, directeur de la société partage l'expérience de Danny Ashton. "Toutes les bibliothèques disponibles, ils ont compté banal, elles ont donc créé leur propre."
12. 5megauche.
La principale caractéristique de cette ressource est que chacune de ses pages est dotée de son propre mécanisme de défilement. Chaque! C'est une approche très drôle et très réussie, qui prouve également que cette technologie vous permet d'inventer des formes brillantes de rapports.
13. Atlantis World's Fair
Défilement inhabituel ici ne fonctionne pas tant sur le divertissement, combien à la parcelle
Cette infographie en ligne a été développée par Frank Chimero, qui a été utilisée par Pararallax défilement non seulement afin de fournir des informations plus rentables, mais également pour l'animer et entrer dans le cadre d'une parcelle particulière. Acrobaties aériennes!
14. Chaque dernière goutte
En savoir plus sur le problème mondial d'une pénurie d'eau pure!
Studio d'animation agréable et sérieux a conçu cet atterrissage pour faire attention au public sur le problème du déficit pure de l'eau sur la planète. Où dépensons-nous de l'eau? Où pouvons-nous la sauver? Comment faire? Vous en apprendrez sur ce problème. Tout à la dernière goutte.
15. Word vivant.
Devant l'agence numérique, tribal a été chargée: mettre à jour l'agence de traduction sur Internet Living Word et le rendre informatif et intéressant. Vous pouvez admirer le résultat vous-même, mais disons immédiatement que les Britanniques ne sont pas venus de rien d'inhabituel, mais ils ont tout fait soigneusement et propre.
16. Madwell.
Le défilement de la parallaxe ajoute de la profondeur à l'atterrissage de Madwell
Madwell Entrepreneuriat Development Agency, situé à New York, utilise la page d'accueil pour la présentation de son propre portefeuille. Le défilement pararallax est une sorte de surbrillance de ceux organisés par ceux-ci: l'effet 3D résultant ajoute des profondeurs dans leur création.
17. La promenade d'art du centre-ville de Jacksonville
La promenade d'art du centre-ville de Jacksonville est une culture mensuelle et des vacances d'art traditionnelles à Jacksonville, en Floride. Le festival est étiré pendant 15 pâtés de maisons et se compose d'une douzaine de galeries, de musées et de bars. Tout cela accompagne les acteurs de la rue et les musiciens. Un beau site Web indiquant que cet événement est capable d'apporter une humeur joyeuse et chez vous.
18. von néerlandais.
La marque à la mode de Von Néerlandais des pages de son site raconte l'histoire étonnante de la vie de son fondateur. Sans aucun doute, afin d'être en tendance et une nouvelle espèce de rouleaux de défilement pour le site a été utilisée. Lorsque vous faites défiler la page, les images et les icônes flottent de haut en bas, c'est pourquoi le sentiment est créé que sur votre moniteur, jusqu'à ce que vous soyez proche, quelqu'un a versé de l'eau.
19. Fannabee.
Fanabee est un prêt, créé même tellement pour ceux qui sont intéressés par la musique, tant pour ceux qui la collectent. Avec ce service, vous pouvez faire du public une liste de ce que vous avez collectée (CD, affiches, t-shirts, etc.), et trouvez ce que vous avez manqué.
20. Peugeot hybride4.
Les nouvelles technologies doivent être présentées de manière nouvelle?
La bande dessinée en ligne créée par l'ordre du géant de la voiture Peugeot (Peugeot) permet à la société d'effectuer deux tâches à la fois: elle introduit d'abord le public cible un nouveau mécanisme Peugeot hybride4, et deuxièmement, il fonctionne sur l'image en tant que produit. Et la société elle-même: rejoindre Peugeot, expérimenté hardiment expérimenté avec des formats et sans oublier son individualité, deviendra maintenant plus prestigieuse.
21. Solutions culturelles
Les solutions culturelles sont une agence de conseil qui, comment deviner facilement du nom, traite des problèmes dans le domaine de l'art. Le logo de la société est des cercles multicolores imposés les uns sur les autres. C'est pourquoi sur page d'accueil Site Web Ces cercles sont joués avec effet de parallaxe. Les tasses se déplacent à différentes vitesses et ajoute de la profondeur et du volume. Il s'est avéré une déclaration laconique, mais très capacieuse et élégante.
22. Conférence JQuery
Les développeurs de site de conférence JQuery n'oublient pas de la principale chose: ils adhèrent au bon équilibre entre informatif et efficace
Le site créé spécifiquement pour la conférence de JQuery est rempli de fiction. Lorsque vous faites défiler la page, le défilement Parallax JQuery lance la chaîne de différentes animations: un vélo passant de gauche à droite ou un troupeau de chaps poursuivant le requin. En général, les effets sont à l'origine et non surchargés: après tout, l'essentiel est non seulement surpris, mais aussi à être entendu.
23. Forme.
L'agence de création forme sur son atterrissage sous une forme assez concise raconte les principales étapes de ses activités. Des effets visuels et des animations agréables ajoutent de la clarté.
24. Nintendo.
Pour introduire le public cible avec la nouvelle série du jeu Mario Kart, la célèbre société japonaise a développé une page d'atterrissage qui raconte le jeu dans un petit voyage dans son monde. La conception de l'atterrissage et sa palette de couleurs copient le style du jeu, et dans la façon dont vous rencontrerez des personnages familiers depuis l'enfance.
25. Activer les boissons.
Il suffit de dévisser le couvercle et l'action commencera
Activer les boissons est distribuée par des boissons vitaminées et promouvoir ses produits, il a développé la ressource pertinente à tous égards. Tout d'abord, vous dévissez la couverture de la bouteille (faites défiler la page, bien sûr), puis tombez dans le swift des bulles rapides. Trois niveaux de placement de bulles créent un effet 3D et sentir que les éclaboussures seront éliminées du moniteur.
26. La chronologie irakienne de Whitehouse
Le défilement inhabituel est utilisé non seulement pour renforcer le côté esthétique de la campagne, mais également, dans le cas du gouvernement américain, afin d'exprimer des accents sémantiques et émotionnels sur la page. Vous remarquerez peut-être que l'ensemble du contenu fait défiler beaucoup plus rapidement que l'image sous l'image. Cela se fait spécifiquement de garder l'attention du lecteur précisément sur ces illustrations qui affectent les émotions des visiteurs.
27. Histoires de couverture de Pitchfork
Le célèbre site musical Pitchfork s'est fortement déclaré, exécutant un projet ambitieux "Histoires de couverture". La ressource Internet a acquis certaines caractéristiques du magazine Glossy imprimé, mais l'utilisation d'un effet de parallaxe pour le site, une vidéo interactive, des entretiens et des photos uniques a permis de différer quoi que ce soit. Photos de portraites animées, texte léger et bande originale parfaitement sélectionnée - très éloquemment et exquis.
28. SOLEIL NOIR 2012 | Nous croyons en ...
Minimalisme contraignant des Français du Soleil Noir
C'est un atterrissage bizarre développé par les Français de l'agence Soleil Noir, en fait, est en fait carte postale du Nouvel An. Ici, vous ne trouverez rien de compliqué: ne pas causer de vertiges de défilement parallaxe, minimalisme dans les graphiques, les phrases laconiques - mais c'est la simplicité.
29. Oakley
Oakley unit superbes photos défilantes et expressives
Oakley est un fournisseur bien connu de lunettes de protection et de masques, et la ressource présentée est conçue spécifiquement pour la promotion d'un nouveau modèle de protection Airbrake MX. La page cible a rejoint les superbes photos défilantes de Pararallax et expressives que le produit est parfaitement présent.
30. Jason Kenny Obe
Atterrissant trois fois le champion olympique et deux fois sur le monde à Jason Kenny Cycling (Jason Kenny)
Plus tôt cette année, le Fiasco Design de l'agence de marketing de Bristol a développé ce merveilleux page d'atterrissage Pendant trois fois le champion olympique et deux fois sur le monde à Jason Kenny Cycling (Jason Kenny). Coordonnateur de l'agence Ben Stirs (Ben Steers) déclare: "S'appuyant sur tâche techniqueNous avons décidé de créer un site à une seule page avec un défilement vertical et Pararallax. "
31. La Moulade.
Le panneau de navigation vous permettra de vous déplacer rapidement et facilement dans la zone souhaitée.
Parmi le nombre croissant de pages d'atterrissage utilisant une barre de défilement pour lancer des animations et des effets sonores, la création de l'agence française La Moulade est mise en évidence par un indicateur très inhabituel de votre position sur la page. Il est situé sur le dessus et vous permet d'accéder à n'importe quelle partie du site.
32. Marcher mort.
La chose la plus difficile est de combiner ensemble les réalisations de toutes les technologies.
"Tout d'abord, nous sommes nous-mêmes les fans de ce spectacle", partageant ses impressions de travailler sur le projet de concepteur principal Gaivin Beck (Gavin Beck). - Dans nos plans, il était de créer un site correspondant au monde de "Marcher Dead", que les fans de la série apprécieraient et étudié. Pour atteindre ses objectifs, nous avons utilisé de nouveaux développements tels que HTML5, CSS3, JavaScript / jQuery, Web audio / HTML5 et, bien sûr, Pararallax défilement. La tâche la plus difficile était de forcer toutes ces technologies à travailler ensemble et à être accessibles à tous les types de plates-formes. "
33. New York Times: la tomate peut blues
C'est peut-être l'avenir du journalisme en ligne?
À une époque, lorsque les gens ne se chargent pas de journaux et de magazines en lecture, de nombreux journalistes se demandent comment attirer l'attention du public à un mot imprimé. Une des options pour surmonter la crise proposée un journal américain Le nouveau. York Times, qui a développé une nouvelle forme de présentation d'articles de journaux et d'histoires - site d'une page créé en utilisant le dernier développement dans le domaine de la conception Web et décoré avec des illustrations pour les auteurs d'Attila Futaki (Atililla Futaki).
Dès que vous commencez à faire défiler la page, les illustrations entreront en mouvement et vous brancheront dans l'action décrite.
34. Paiements sur les services de santé
Rien de compliqué apparemment, mais il a l'air assez divertissant
Indépendamment de la question de savoir si l'établissement de santé est budgétaire ou privé, les dirigeants de ces organisations sont de plus en plus préoccupés par le montant croissant des paiements de rémunération. Les infographies présentées révèlent ce problème particulier, mais attire l'attention sur la parallaxe.
Dès que vous commencez à faire défiler la page cible, un employé d'une institution médicale apparaîtra à l'écran, qui apparaît sur le couloir et poussant un reboncy. Il passe de la section à la section et chacun d'entre eux représente une certaine année dans l'histoire du système national de santé national britannique. Les fenêtres contextuelles contiennent des informations sur lesquelles des paiements de compensation maximale ont été effectués au cours de ces années. Rien difficile, il semblerait, mais il semble assez divertissant.
Un employé de l'agence qui a développé ces parts d'atterrissage l'impression de travail: «Pour créer ce site, nous avons appliqué de nouvelles technologies dans HTML5, CSS3 et JavaScript. Comme l'animation est Élément cléNous avons principalement utilisé les bibliothèques d'animation "Skrollrr". Chaque élément que nous avons tiré manuellement et que les traits finaux ont été ajoutés avec le support CSS3. "
35. Nous sommes déroulés
Le jeu parfait de différents types de défilement
Cette ressource a été créée par l'agence norvégienne se déroule et constitue un échantillon d'une combinaison de tels effets en tant que défilement sans fin et défilement de parallaxe. Le panneau de navigation se cache dans la droite coin supérieur, vous donnera toujours que vous comprendrez où vous êtes sur le site et permettra à la zone de passer rapidement à la zone d'intérêt, et si vous faites défiler jusqu'à la fin à la fin, remarquez que le curseur de bande de défilement se déplace automatiquement. UP, et vous continuerez à faire défiler le site à nouveau, du début.
36. Défi d'épargne.
Pour créer ce prêt, les développeurs ont utilisé le plugin Skrollr.js, au détriment de laquelle les visiteurs ont pu "faire défiler" des événements sur la page. Cela a permis d'atteindre une vitesse de modélisation élevée, offrant plus de temps à des transitions en douceur et à construire une efficacité. interface utilisateur. La technologie 3D CSS a été utilisée pour créer des animations.
Plugin Stellar.js.
Stellar.js est un plugin avec lequel vous pouvez appliquer l'effet de Parallax à n'importe quel objet de défilement. Bien que ce plugin ne soit plus pris en charge, il est utilisé par de nombreux développeurs en raison de sa stabilité et de sa compatibilité avec versions récentes jquery.
Une autre fonctionnalité utile est la capacité de travailler sans la bibliothèque de JQuery. Par conséquent, les prêts, créés sur sa base sont inférieurs à la pesée et sont chargés plus rapidement.
Conclusion
Le monde ne reste pas encore et chaque jour de nouvelles œuvres d'art dans le domaine de la conception Web apparaissent. Serez-vous parmi ces héros? Facile, si vous prenez en service ces merveilleuses technologies. Mais n'oubliez pas de la chose principale: tout effet incorporé devrait contribuer à une conversion améliorée! Sinon, vous n'avez tout simplement pas besoin de vous.
Plate-forme LPGenerator, plus précisément, notre Éditeur visuel, soutient les effets de parallaxe; Assurez-vous de vous-même sur l'exemple de modèles dans le magasin de pages cible de magasin LP Store
