Effets de tente céleste du blog de voyage Parallax. Une technique simple d'effet de parallaxe

| 29.09.2014

Bonjour, chers lecteurs ! Notre classement d'aujourd'hui, composé de 10 places, est dédié à des sites pas ordinaires. Les sites de cette liste TOP 10 ont une caractéristique commune : l'effet de parallaxe.

Surtout pour ceux qui ne savent pas encore de quoi il s'agit, nous parlerons brièvement de cet effet, qui a déjà commencé à prendre rapidement de l'ampleur et qui devient de plus en plus populaire dans le domaine de la conception Web.

Ainsi, l'effet de parallaxe, ou défilement de parallaxe, est une technique spéciale dans laquelle les objets en arrière-plan en perspective se déplacent plus lentement que les objets au premier plan. De ce fait, un effet 3D est créé, une sensation d'espace tridimensionnel apparaît. Le défilement parallaxe est un excellent moyen d'ajouter du style à un site Web d'une page, de donner vie à une infographie, de raconter une histoire ou de présenter un portfolio. Et certaines œuvres de designers modernes peuvent être qualifiées d'œuvres d'art en toute confiance... Cependant, il vaut mieux voir une fois qu'entendre cent fois - consultez nos sites TOP 10 et jetez un œil par vous-même !

Attention : certains sites avec défilement parallaxe peuvent être gourmands en ressources en raison de nombreux effets, donc un bégaiement peut survenir sur certains ordinateurs et appareils portables.

À emporter

La dixième place de notre classement est occupée par le site Grab & Go, où l'effet parallaxe est utilisé pour décorer et animer l'image. Lorsque vous déplacez le curseur, vous pouvez voir comment les maisons et les arbres en arrière-plan se déplacent simultanément. D'accord, grâce à ce zeste, il y a une chance que le visiteur se souvienne mieux du site.

Mains numériques

DigitalHands, classé 9e, utilise également l'effet de parallaxe pour se démarquer magnifiquement et être mémorable pour les visiteurs. Déplacez le curseur de votre souris et profitez de l'effet spécial.

Madwell

L'agence de création basée à New York Madwell présente son portfolio sur la page d'accueil du site Web, en utilisant intelligemment l'effet de parallaxe. La sensation 3D ne quitte pas l'utilisateur pendant tout le temps de défilement.

Oakley

Tout produit nécessite une présentation appropriée. Le site Web du magasin Oakley utilise le défilement parallaxe pour démontrer les avantages des lunettes Airbrake MX. Cela s'est avéré assez impressionnant et instructif, puisque les produits peuvent être visualisés et étudiés de tous les côtés, simplement en utilisant le parchemin.

Donnez de l'importance à votre argent

Peu de gens ne sont pas préoccupés par le sujet des finances personnelles. Le site Make Your Money Matter, qui a pris la 6ème place dans notre classement, révèle sous une forme accessible aux téléspectateurs les avantages d'une coopérative de crédit et parle des inconvénients des banques. Ici, vous pouvez utiliser une calculatrice qui montrera combien de bénéfices les banques tirent des investissements des clients, ainsi que trouver des succursales de coopératives de crédit par code postal.

Aiguille spatiale

Souhaitez-vous explorer Seattle à 184 mètres du sol ? Le site Web Space Needle vous fera faire une promenade virtuelle à travers le monument le plus reconnaissable de la ville : la Space Needle, qui signifie « aiguille de l'espace » en anglais. Cette tour mesure 184 m de haut, 42 m de large et pèse 9 550 tonnes. Elle résiste aux ouragans avec des vents allant jusqu'à 320 km/h et aux tremblements de terre jusqu'à une magnitude de 9,1. De plus, la tour dispose de 25 paratonnerres. Une caractéristique distinctive de la Space Needle est la plate-forme d'observation à une altitude de 159 mètres, le restaurant et la boutique de cadeaux SkyCity. De son sommet, vous pourrez voir le centre-ville de Seattle, le mont Rainier, les montagnes Cascade, Eliot Bay et les îles environnantes.

Peugeot Hybrid4 - Roman graphique

Le plus grand constructeur automobile français Peugeot a présenté le système de propulsion hybride Hybrid4 d'une manière plutôt inhabituelle. Une bande dessinée passionnante s'ouvre sous nos yeux (qui, d'ailleurs, peut être réglée en lecture automatique), où la tâche du personnage principal est d'obtenir des données secrètes et de partir sans avoir d'ennuis. Pour mener à bien l'opération, elle est obligée de basculer entre quatre modes de conduite différents qui imitent la technologie Peugeot Hybrid4 : performances et dynamisme maximum (Sport), transmission intégrale et mode de traction maximale (4WD), équilibre entre performances et économie (Auto). ), fonctionnement silencieux (ZEV ).

Les morts-vivants

Nous sommes donc arrivés à la troisième place dans notre liste des sites TOP, qui revient au projet The Walking Dead. Lors de la création du site, qui a principalement attiré l'attention de nombreux fans de la série Walking Dead, HTML5, CSS3, JavaScript et, bien sûr, l'effet parallaxe ont été utilisés. Les développeurs ont fait un excellent travail pour faire fonctionner toutes ces technologies ensemble et sur toutes les plateformes. En entrant sur le site et en commençant à le faire défiler, l'utilisateur voit une histoire de bande dessinée sur la façon dont les acteurs sont transformés en zombies.

Projet unique et inimitable, faisant partie de la campagne « Be Moved » de Sony, il impressionne par son volume, sa dynamique et sa réflexion jusque dans les moindres détails. Vous ne trouverez probablement pas de meilleure présentation de produit que celle de Sony. Aucun mot n'est nécessaire - faites simplement défiler vers le bas et profitez-en !

Plat contre Réalisme

Et finalement, nous avons atteint la première place de notre classement, qui a été remportée par le Flat vs. Le réalisme est le fruit de l'agence interactive inTacto. Ce projet du Nouvel An aux graphismes (et à la musique) spectaculaires est un mini-jeu du genre combat avec une histoire intéressante, où il y a une confrontation entre des représentants de deux types de design - réaliste et plat. Après s'être concentrés sur le principal holivar de fin 2013 - début 2014, les créateurs avaient raison : après sa sortie, cette œuvre impressionnante a immédiatement fait sensation et est devenue un sujet de discussion populaire dans les blogs et l'actualité.

Les développeurs du site ont réussi à combiner le défilement parallaxe et un jeu HTML5. « Nous voulions nous assurer que lorsque vous parcourez le site du début à la fin, tout se passe sans problème et sans délai. Pour ce faire, nous avons utilisé AJAX, qui nous a permis de mettre à jour les données en arrière-plan », explique le directeur créatif de l’agence, Alejandro Lazos. Le projet a été présenté au public fin 2013, avant le nouvel an. Préparez-vous à défiler, de nombreuses choses passionnantes vous attendent !

Remarque : Malheureusement, certains sites peuvent modifier leur conception au fil du temps.

Parallaxe (grec) changement, alternance) est un changement de la position apparente d'un objet par rapport à un arrière-plan lointain en fonction de la localisation de l'observateur. Ce terme était principalement utilisé pour désigner les phénomènes naturels, en astronomie et en géodésie. Par exemple, ce déplacement du soleil par rapport au pilier lorsqu'il est réfléchi dans l'eau est de nature parallaxe.

Dans la conception Web, l'effet de parallaxe ou défilement de parallaxe est une technique spéciale dans laquelle l'image d'arrière-plan en perspective se déplace plus lentement que les éléments de premier plan. Cette technologie est de plus en plus utilisée car elle semble vraiment impressionnante et cool.

Cet effet d'espace tridimensionnel est obtenu à l'aide de plusieurs couches qui se superposent et se déplacent à des vitesses différentes lors du défilement. Grâce à cette technologie, vous pouvez non seulement créer un effet tridimensionnel artificiel, mais vous pouvez également l'appliquer à des icônes, des images et d'autres éléments de page.

Inconvénients de l'effet parallaxe

Le principal inconvénient de la parallaxe réside dans les problèmes de performances du site. Tout est beau et élégant, mais l'utilisation de javascript / jQuery, à l'aide duquel l'effet de parallaxe est créé, alourdit considérablement la page et réduit considérablement sa vitesse de chargement. En effet, il repose sur des calculs complexes : javascript doit contrôler la position de chaque pixel sur l'écran. Dans certains cas, la situation est encore compliquée par des problèmes de compatibilité entre navigateurs et multiplateformes. De nombreux développeurs recommandent d'utiliser l'effet de parallaxe sur un maximum de deux éléments de page.

Solution alternative

Avec l'avènement de CSS 3, la tâche est devenue un peu plus facile. Avec son aide, vous pouvez créer un effet très similaire, qui sera beaucoup plus économique en termes de consommation de ressources. L'essentiel est que le contenu du site est placé sur une seule page et que le déplacement à travers les sous-pages s'effectue à l'aide de la méthode CSS 3-transition. C'est la même parallaxe, mais avec quelques différences : le fait est qu'il est impossible d'obtenir un mouvement à des vitesses différentes en utilisant uniquement CSS 3. De plus, cette norme n’est pas supportée par tous les navigateurs modernes. Il y a donc ici aussi des difficultés.

Conclusion

Bien que l'effet parallaxe soit populaire, tout le monde n'est pas pressé de l'utiliser lors de la création d'un site Web en raison des problèmes mentionnés ci-dessus. Apparemment, il faut juste du temps à la technologie pour surmonter les difficultés rencontrées. En attendant, cette option peut être utilisée sur les sites one-page : elle sera ainsi définitivement mémorisée et pourra fidéliser l'utilisateur.

Parallaxe en javascript

• jQuery parallax scrolling effect - un plugin qui lie l'effet de parallaxe au mouvement de la molette de la souris
• Scrolldeck - un plugin pour créer un effet de parallaxe
• jParallax - transforme les éléments de la page en calques absolument positionnés qui se déplacent en fonction de la souris

Salut tout le monde. Aujourd'hui, je vais vous parler d'un petit script permettant de créer un simple effet de parallaxe.

L'article sera court mais informatif, donc en 15 minutes environ, vous pourrez ajouter de la parallaxe à votre page de destination. Si vous souhaitez depuis longtemps ajouter cet effet intéressant à votre site Web, continuez à lire...

Quel est l’effet parallaxe sur le site ?

Disons d'abord ce que c'est. Ainsi, l'effet de parallaxe dans la conception Web est une technique dans laquelle l'image d'arrière-plan se déplace plus lentement que les éléments qui se trouvent au-dessus. Pour les plus expérimentés, je ferai une réserve sur le fait que nous ne « lierons » pas l’effet de parallaxe au curseur de la souris. Créons simplement un arrière-plan de parallaxe. Commençons.

Comment créer un effet parallaxe sur un site Web

Donc, tout d'abord, nous connectons la bibliothèque jquery. Comme d'habitude, entre les balises head :

Maintenant, vous devez télécharger et connecter le script Simple Parallax Scrolling. Je recommande d'utiliser la version compressée tout de suite, car il n'est pas nécessaire de définir des paramètres supplémentaires dans le script :

Voyons maintenant ce qui doit être écrit sur la page HTML pour que notre effet de parallaxe fonctionne.

Création de pages de destination Smartlanding

Data-parallax="défilement"

Data-image-src="chemin d'accès à l'image/bg.png"

Veuillez noter que l'image n'est pas placée dans l'en-tête à l'aide de la balise img, mais est définie directement comme attribut dans le conteneur dans lequel nous souhaitons implémenter la parallaxe.

En principe, nous pouvons terminer ici, mais encore quelques mots :

• S'il n'y a pas d'autres éléments dans la plongée dans lesquels nous souhaitons implémenter l'effet de parallaxe, alors vous devez définir sa hauteur, sinon vous ne verrez rien.
• Si vous utilisez un design non responsive, vous pouvez définir la largeur et la hauteur de l'image directement en HTML à l'aide des attributs naturalWidth et naturalHeight.
• Vous pouvez déplacer des images à l'aide de l'attribut data-position. Ceci est analogue à la position d'arrière-plan en CSS.

Vous pouvez trouver d’autres options sur la page officielle du projet, répertoriée ci-dessus.

Comme vous le savez probablement, la parallaxe est un effet visuel dans lequel les positions des objets semblent différentes lorsque nous les regardons depuis différentes positions. Le défilement parallaxe crée l’illusion que deux objets situés en ligne de mire mais éloignés l’un de l’autre se déplacent à des vitesses différentes. Nous constatons cet effet partout lorsque nous sommes en mouvement : lorsque nous marchons dans la rue, nous voyons que tous les objets proches se déplacent beaucoup plus vite que ceux qui sont éloignés ; lorsque nous conduisons, nous pouvons voir que les arbres et les buissons près de la route passent très rapidement ; . vite, mais le paysage en arrière-plan, comme les montagnes, se déplace très lentement. Cet effet est appelé parallaxe de mouvement.

Cet effet peut être appliqué aux pages Web : nous pouvons utiliser l'effet de parallaxe sur les blocs qui contiennent des images d'arrière-plan et du contenu interne. Lorsque l'on fait défiler la page, le contenu défile, mais l'arrière-plan doit rester en place. CSS nous aidera à créer cet effet.

Étape 1 – Section HTML 1 Titre simple 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus id nunc ut gravida. Vestibule ac...

Section 2 Titre simple 2

Nam imperdiet posuere bibendum. Aliquam nec consectetur metus. Aliquam egestas une élite à malesuada...

Section 3 Titre simple 3

Proin tempor urna vitae tortor porttitor, ac malesuada elit lacinia. Nulla ac tellus nulla. N'oubliez pas...

Comme vous pouvez le constater, le balisage HTML n'est pas compliqué, il comprend 6 sections alternatives : trois d'entre elles contiennent des images de fond (sections avec la classe parallax), trois contiennent du texte (sections avec la classe content).

Étape 2 – Images

Toutes les images d’arrière-plan ont une taille fixe de 1 600 × 600 pixels. Cela nous permettra d'utiliser des images sur la plupart des résolutions d'écran (mise en page réactive). Tous nos blocs de parallaxe ont la même hauteur fixe (600px).

Étape 3 – CSS

Maintenant, nous devons agrandir les images pour remplir tout l'espace disponible, pour cela nous définissons la valeur background-size: cover puis nous définissons background-attachment:fixed pour fixer l'arrière-plan.

Conteneur ( largeur maximale : 960 px ; marge : 0 auto ; ) section.section:last-child ( marge-bottom : 0 ; ) section.section h2 ( marge-bottom : 40 px ; famille de polices : " Roboto Slab ", empattement ; taille de police : 30px; ) section.section p ( marge-bas : 40px ; taille de police : 16px ; poids de police : 300 ; ) section.section p:dernier-enfant ( marge-bas : 0; ) section. section.content ( remplissage : 40px 0 ; ) section.section.parallax ( hauteur : 600px ; position d'arrière-plan : 50 % 50 % ; répétition d'arrière-plan : pas de répétition ; pièce jointe d'arrière-plan : fixe ; taille d'arrière-plan : couverture ; ) section.section.parallax h1 ( couleur : rgba(255, 255, 255, 0.8) ; taille de police : 48px ; hauteur de ligne : 600px ; poids de police : 700 ; alignement du texte : centre ; transformation du texte : majuscule ; text-shadow: 0 0 10px rgba(0, 0, 0, 0.2 ) section.section.parallax-1 ( background-image: url("../imgages/1.jpg"); ) section.section. parallax-2 ( image d'arrière-plan : url("../imgages/2.jpg"); ) section.section.parallax-3 ( image d'arrière-plan : url("../imgages/3.jpg"); ) @media all et (largeur min : 600 px) ( section.section h2 ( taille de police : 42 px ;

) section.section p ( taille de police : 20 px ; ) section.section.parallax h1 ( taille de police : 96 px ; ) ) @media all et (largeur min : 960 px) ( section.section.parallax h1 ( taille de police : 160px; ) )

L'effet parallaxe est une technique très intéressante. Lors du défilement, l'image d'arrière-plan se déplace plus lentement que le contenu, créant l'illusion d'un espace 3D. Dans ce tutoriel, nous allons vous montrer un moyen simple et efficace d'obtenir un effet merveilleux.

Marquage

Cette technique est basée sur le contrôle de la vitesse de déplacement de l'image de fond. Créons un balisage HTML contenant deux sections avec les attributs "data-type" et "data-speed". La finalité des attributs sera dévoilée un peu plus tard :

Les balises avec des attributs de type de données et de vitesse des données vous permettent de rendre votre balisage simple et clair.

Selon la spécification, tous les attributs commençant par data- seront traités comme un stockage de données privé. De plus, ils n’ont aucun effet sur le modèle.

Puisque nous devons contrôler la vitesse de défilement des images d’arrière-plan, nous utiliserons data-type="background" et data-speed="10" pour les paramètres clés.

Ensuite, nous ajouterons une balise à chaque balise.

Positionnement absolu Effet parallaxe simple

Nous ferons défiler l'arrière-plan de la balise plus lentement que son contenu, c'est-à-dire . Cela crée l'illusion de parallaxe.

CSS

#home ( background : url(home.jpg) 50 % 0 répétition fixe ; min-height : 1000px ; ) #about ( background : url(about.jpg) 50 % 0 no-repeat min-height : 1000px; )

Et définissons les styles pour les éléments restants de notre page de démonstration.

#home ( arrière-plan : url(home-bg.jpg) 50 % 0 répétition fixe ; hauteur min : 1 000 px ; hauteur : 1 000 px ; marge : 0 auto ; largeur : 100 % ; largeur maximale : 1 920 px ; position : relative ; ) #article d'accueil ( hauteur : 458px ; position : absolue ; alignement du texte : centre ; haut : 150px ; largeur : 100 % ; ) #à propos ( arrière-plan : url(about-bg.jpg) 50 % 0 répétition fixe ; hauteur min : 1000px ; marge : 0 auto ; largeur maximale : 1920px ; -webkit-box-shadow : 0 0 50px box- shadow : 0 0 50px rgba(0,0,0,0.8) ; position : absolue ; alignement du texte : centre ; haut : 150 px ;

Code magique

Nous utilisons jQuery. Commençons par la méthode standard document.ready() pour nous assurer que la page est chargée et prête à être manipulée.

$(document).ready(function())( ));

Maintenant, nous avons besoin d'attention. La première chose qui se produit ici est de parcourir tous les éléments avec l'attribut data-type="background" sur la page.

$(document).ready(function())( $("section").each(function())( var $bgobj = $(this); // Attribuer l'objet ) ));

À la fonction .each(), nous ajouterons une autre fonction.scroll() , qui est appelée au démarrage du défilement.

$(window).scroll(function () (

Vous devez déterminer combien de temps l'utilisateur a fait défiler la page, puis diviser la valeur résultante par la valeur définie dans l'attribut data-speed.

Var yPos = -($window.scrollTop() / $bgobj.data("speed"));

$window.scrollTop() - récupère la valeur de défilement actuelle à partir du haut. $bgobj.data("speed") fait référence à l'attribut data-speed dans le balisage. yPos est la valeur finale utilisée pour le défilement. Cependant, une valeur négative est utilisée car l'arrière-plan se déplace dans le sens opposé au défilement de l'utilisateur.

Dans notre exemple, l'attribut data-speed a une valeur de 10. Supposons que la fenêtre du navigateur défile de 57 pixels. Cela signifie que 57px est divisé par 10 = 5,7px.

// Collecte la position d'arrière-plan var coords = "50% "+ yPos + "px"; // Déplace l'arrière-plan $bgobj.css(( backgroundPosition: coords ));

Nous devons maintenant collecter toutes les données en une seule valeur. Pour conserver la position horizontale de l'arrière-plan statique, nous utilisons une valeur de 50 % pour sa propriété xPosition. Ensuite, nous ajoutons yPos comme valeur de la propriété yPosition, puis attribuons les coordonnées à l'arrière-plan : $bgobj.css(( backgroundPosition: coords )); .

Le code final ressemblera à ceci :

$(document).ready(function())( $("section").each(function())( var $bgobj = $(this); // Attribuer l'objet $(window).scroll(function() ( var yPos = -($window.scrollTop() / $bgobj.data("speed")); // Rassemblez les coordonnées de l'arrière-plan var coords = "50% "+ yPos + "px"; // Déplacez l'arrière-plan $bgobj.css (( backgroundPosition: coordonnées ));

Clip pour IE

Une chose demeure : les anciennes versions d'IE ne peuvent pas afficher les balises. Le correctif est simple : nous utiliserons une solution de création d'éléments standard qui forcera comme par magie le navigateur à reconnaître les balises HTML5.

// Créer des éléments pour IE document.createElement("article"); document.createElement("section");

De plus, nous utilisons un fichier de réinitialisation CSS afin que tous les navigateurs affichent la page de la même manière.