Qu'est-ce que la parallaxe dans la conception Web. Une technique simple d’effet de parallaxe. C'est tout

Nous créons un effet de parallaxe pour les gros blocs avec un arrière-plan et pour les éléments individuels du site.

Connecter jQuery

$.stellar();

Définir la vitesse de défilement des éléments

Nous définissons le rapport par rapport à la vitesse de défilement standard.
Le rapport 0,5 fera défiler l'élément à moitié vitesse,
le rapport 1 n'aura aucun effet,
le rapport 2 fera défiler l'élément à deux fois la vitesse.

Si un coefficient inférieur à 1 provoque des erreurs dans l'affichage des éléments sur la page, essayez de définir position : fixe pour cet élément ; .

Si vous souhaitez que l'image d'arrière-plan défile au fur et à mesure que la page défile, vous devez ajouter l'attribut suivant :

Comme pour la parallaxe des éléments, le ratio est le rapport au défilement standard.

Pour un coefficient inférieur à 1, pour éviter les erreurs d'affichage de l'arrière-plan, il est préférable de définir background-attachment sur fixed .

Sur les téléphones mobiles, il vaut mieux ne pas utiliser de parallaxe pour l’arrière-plan.

À propos, background-attachment: fixed sur les appareils mobiles peut également ne pas fonctionner en raison de la complexité des calculs, vous devez donc définir background-attachment: scroll pour les appareils mobiles (@media (max-width : 768px)).

Une autre précision est que l’image d’arrière-plan doit être plus grande que la hauteur du bloc dans lequel elle est utilisée.

Pour empêcher le déclenchement de la parallaxe sur les appareils mobiles (@media (max-width: 768px)), vous pouvez définir la propriété background-position pour le bloc : center center !important; .

Lorsque j'ai testé la parallaxe horizontale et les décalages, je me suis posé beaucoup de questions, mais je les ai mises de côté pour plus tard et j'ai utilisé ce plugin uniquement pour la parallaxe verticale.

Il peut y avoir des problèmes avec IE en raison de la pièce jointe en arrière-plan : corrigé ; – l'arrière-plan peut bouger par saccades lors du défilement.
Vous devez utiliser des conditions distinctes pour IE :

Écran @media et (-ms-high-contrast : actif), (-ms-high-contrast : aucun) ( .next-gen(background-attachment: scroll !important; background-position: 0 0 !important;) )

Hic magnam eaque, mollitia delectus ullam cum possimus voluptatem. Et in commodi quam, consequatur magnam, dolorum odio tenetur, omnis possimus nihil suscipit. Earum quo, architecto laboriosam quisquam facilis fugit voluptates..png" alt="Sun" class="sun-1 sun" data-stellar-ratio=".4"> !}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid corporis quo ducimus veniam debitis, blanditiis modi voluptatum laudantium nemo inventore veritatis cum, ex dolorem necessitatibus, quae quos nam, molestiae est.

Ea sint dolor nemo at dicta enim optio omnis molestias voluptatum rem, cumque provident ad eum. Delectus aperiam cumque, dolorum blanditiis, hic error quos reiciendis. Recusandae distinctio voluptas quidem ab!

Hic magnam eaque, mollitia delectus ullam cum possimus voluptatem. Et in commodi quam, consequatur magnam, dolorum odio tenetur, omnis possimus nihil suscipit. Earum quo, architecto laboriosam quisquam facilis fugit voluptates..png" alt="Sun" class="sun-2 sun" data-stellar-ratio="1.4"> !}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid corporis quo ducimus veniam debitis, blanditiis modi voluptatum laudantium nemo inventore veritatis cum, ex dolorem necessitatibus, quae quos nam, molestiae est.

Ea sint dolor nemo at dicta enim optio omnis molestias voluptatum rem, cumque provident ad eum. Delectus aperiam cumque, dolorum blanditiis, hic error quos reiciendis. Recusandae distinctio voluptas quidem ab!

Hic magnam eaque, mollitia delectus ullam cum possimus voluptatem. Et in commodi quam, consequatur magnam, dolorum odio tenetur, omnis possimus nihil suscipit. Earum quo, architecto laboriosam quisquam facilis fugit voluptates..png" alt="Sun" class="sun-3 sun" data-stellar-ratio="2"> 2017 !}

* (marge : 0 ; padding : 0 ; bordure : 0 ; dimensionnement de la boîte : bordure-boîte ; ) corps ( taille de la police : 1em ; famille de polices : sans-serif ; ) div ( position : relative ; largeur : 100 % ; largeur maximale : 1920 px ; hauteur : 600 px ; débordement : 2 ; ..jpg) 50 % 50 % sans répétition ; ) ..jpg) 50 % 50 % sans répétition ; ) ..jpg) 50 % 50 % sans répétition ; ) .block-text ( remplissage : 60px 30px ; hauteur : auto ; taille de police : 1,6em ; hauteur de ligne : 1,4 ; ) p ( position : relative ; z-index : 2 ; largeur maximale : 960px ; marge : 0 auto; ) .sun ( position : absolue ; indice z : 1 ; ) .sun-1 ( droite : 0 ; haut : 20 % ; ) .sun-2 ( gauche : 0 ; haut : 20 % ; ) .sun- 3 (gauche : 50 % ; marge gauche : -200 px ; haut : 20 % ; ) pied de page (couleur d'arrière-plan : #000 ; couleur : #fff ; alignement du texte : centre ; remplissage : 20px 0 ; )

Nous connectons les bibliothèques nécessaires

Le fichier js/common.js a ce contenu :

$(function() ( // Fond de parallaxe // http://markdalgleish.com/projects/stellar.js/docs/ $.stellar(( responsive : false, horizontalScrolling : false, // il faut qu'il n'y ait pas décalage horizontal ) ));

Exemple de travail :

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.

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.

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.

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.

• 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

Récemment, des sites Web dotés d’effets de défilement parallaxe ont commencé à apparaître partout. Je ne voulais pas manquer ça, j'ai donc créé une page de démonstration avec un effet de défilement parallaxe en utilisant jQuery et CSS.

Vous pouvez faire défiler comme d'habitude, utiliser le menu de navigation sur le côté droit de la page ou les boutons suivant/précédent qui apparaissent sous chaque article.
La page contient quatre calques animés indépendamment pour créer l’illusion de profondeur.

Le défilement est fluide dans Safari (du moins sur mon ordinateur), mais la démo devrait fonctionner dans n'importe quel navigateur moderne.

Avertissement 1 : Comme il ne s'agit que d'une expérience, je n'ai pas optimisé la démo pour qu'elle fonctionne sur les appareils mobiles.

Avertissement 2 : Le menu de navigation utilisé dans la démo provient du site Web Nike Better World. Si vous envisagez d'utiliser une navigation similaire sur votre site, gardez à l'esprit son origine.

/* calque avant (ballon/image paysage) */ #parallax-bg3 ( z-index : 3; position : fixe ; gauche : 50% ; /* aligner le bord gauche avec le centre de la fenêtre */ top : 0; width: 940px ; margin-left: -470px; /* se déplace vers la gauche de la moitié de la largeur de l'élément */ )
Chaque couche a un positionnement absolu. Il s’agissait de la partie la plus difficile de tout le processus, car les éléments devaient être positionnés de telle manière que lors du défilement vers l’un des quatre articles, l’article soit aligné de manière égale par rapport à la fenêtre du navigateur. Dans ce cas, cela a été réalisé par essais et erreurs.

#bg3-1 ( position : absolue ; haut : -111px ; gauche : 355px ; ) #bg3-2 ( position : absolue ; haut : 812px ; gauche : 321px ; ) /* et ainsi de suite... */
Quelques lignes de code utilisant jQuery sont nécessaires pour créer un effet de défilement de parallaxe. J'ai été surpris de voir à quel point c'était facile.

$(window).bind("scroll",function(e)( parallaxScroll(); )); function parallaxScroll())( var scrolled = $(window).scrollTop(); $("#parallax-bg1").css("top",(0-(scrolled*.25))+"px"); $ ("#parallax-bg2").css("top",(0-(scrolled*.5))+"px"); $("#parallax-bg3").css("top",(0 - (fait défiler*.75))+"px");
Le calque de premier plan est toujours aligné vers le haut du document, tandis que le mouvement des autres calques est ajusté en fonction de leur profondeur.
Plus la couche est basse, plus elle se déplace lentement.

Le reste du code jQuery est utilisé pour contrôler la navigation. Lorsque l'utilisateur clique sur le bouton de navigation, la page défile jusqu'à l'article correspondant. Si l’utilisateur a désactivé JavaScript, les « ancres » utilisées sur les liens entrent en jeu. Ils permettent toujours de se déplacer dans la page, mais sans animation.

Chaque année, nous voyons différentes tendances en matière de conception de sites Web aller et venir. Et parfois, il arrive qu'un certain «truc» commence après un certain temps à être à nouveau largement utilisé.

En 2012, de nombreux sites étrangers utilisaient un effet très intéressant emprunté aux jeux : le défilement parallaxe. C'était généralement l'époque de la mode pour la 3D, alors ils ont essayé de créer des sites Web en trois dimensions et multicouches.

Après un an ou deux, ils ont en quelque sorte oublié la parallaxe, et les sites qui constituaient de brillants exemples de son utilisation ont subi une refonte, optant pour d'autres techniques visuelles. Aujourd’hui, cet effet connaît un regain et on recommence à en parler.

Rappelons-nous ce que c'est, où l'utiliser et comment, et considérons également plusieurs exemples frappants d'utilisation de la parallaxe.

Défilement parallaxe - de quel genre de bête s'agit-il ?

L'effet de parallaxe sur les sites Web est très facile à reconnaître : il utilise plusieurs arrière-plans qui semblent se déplacer à des vitesses différentes pour créer une impression de profondeur (créant un effet 3D artificiel). Cette technique était largement utilisée dans les jeux « à l’ancienne » et constitue également une tendance intéressante dans la conception de sites Web.

Le terme vient du grec « Parallaxis », qui signifie « changement ». Aujourd’hui, cette tendance se réinvente dans le monde du web design.

Le défilement parallaxe peut être standard, vertical ou horizontal, et avec changement de direction.

Il s'agit d'un concept de design très intéressant qui a l'air incroyable, mais qui nécessite en même temps un travail minutieux. Vous devez non seulement réfléchir à la mise en œuvre, mais également travailler dur sur l'optimisation - sinon, sur les appareils mobiles ou sur les grands écrans, les calques peuvent ralentir et non seulement décorer, mais simplement défigurer votre création.

Lorsque vous utilisez la parallaxe, essayez de ne pas commettre une erreur principale, que l'on retrouve souvent sur ce type de sites : la couche principale a une vitesse de déplacement très élevée et, par conséquent, l'utilisateur ne peut pas visualiser correctement les informations ou la photo. J'ai tourné un peu le volant - et la photo ou le texte était déjà descendu très bas, j'ai essayé de le rendre - tout était caché. Comme par exemple. Lors de la phase d'optimisation, faites attention à la vitesse de défilement des calques ; le calque principal doit, idéalement, se déplacer à la même vitesse que la barre de défilement. Mais vous pouvez jouer en toute sécurité avec le reste des éléments qui servent à la décoration.

Où postuler ?

Le défilement parallaxe semble parfait sur les sites avec peu de contenu. Il s'agit d'une solution idéale pour les sites d'une page et de cartes de visite.

Disons que vous ne disposez que de brèves informations sur l'entreprise, de contacts et de quelques photos. Un site Web simple avec un tel contenu semblera ennuyeux et sans intérêt. Mais si vous ajoutez ici des effets inhabituels comme la parallaxe, les utilisateurs se souviendront longtemps de cette ressource !

Il est en fait très difficile d’attirer l’attention des gens de nos jours. De nombreux sites regorgent d’effets flash, de superpositions sonores et d’autres fonctionnalités inhabituelles. Tout le monde essaie de se démarquer du mieux qu'il peut - c'est pourquoi les designers ont recommencé à revenir à la parallaxe.

Cet effet est également bon pour les pages d'une page présentant un produit ou une gamme de produits. Après avoir réfléchi au concept, vous pouvez créer quelque chose de vraiment unique.

Quelques exemples

Passons maintenant de la théorie à la pratique et considérons plusieurs sites qui utilisent le défilement parallaxe. Peut-être que dans cette collection vous vous inspirerez ou trouverez des idées originales.

Voici un catalogue original de chaussures qui, en plus de la parallaxe, utilise encore une chose. Ensemble, ces techniques créent une atmosphère particulière.

La page, comme vous pouvez le voir, se déplace à une vitesse et les formes géométriques se déplacent à une autre, un peu plus lentement.

Ici encore, la parallaxe va de pair avec le son et contribue à raconter toute l’histoire. En plus de l'effet 3D, nous voyons ici d'autres tendances de la mode - couleurs de conception en noir et blanc, dessins à la main, polices manuscrites. Si vous êtes trop paresseux pour tourner le volant, activez le défilement automatique et profitez-en.

Bienvenue à Milan ! Plongez dans le monde de l'art italien !

Ici, nous voyons une autre solution inhabituelle : pour afficher le site, vous n'avez pas besoin de tourner la roue, mais de faire glisser le contenu avec le bouton de la souris. De plus, la page peut s'étirer aussi bien sur les côtés que vers le bas.

Vous pouvez également suivre la liste ci-dessous, le site lui-même vous indiquera le bon endroit.

Pourriez-vous présenter les pièces détachées et autres matériels de manière aussi originale ? Ceci est un exemple de la façon dont la parallaxe peut contribuer à rendre un site Web de produit mémorable et intéressant, même si le produit est très spécifique et destiné à un cercle restreint de personnes.

Voici une version intéressante d'un site Web de restaurant. Il y a peu de contenu textuel et le concepteur a trouvé une solution brillante : le combiner avec des photographies lumineuses, situées sur un calque différent et se déplaçant à une vitesse différente. Assez frais et original.

Ici, nous voyons de merveilleux effets 3D, créés à l’aide de vidéos en arrière-plan, de photos de différentes tailles et même d’un flou des éléments qui semblent être juste « devant le nez de l’utilisateur ». Et différentes vitesses de déplacement des couches, bien sûr.

Un exemple frappant d'une approche non standard de la parallaxe. Un arrière-plan qui bouge tout seul combiné à un texte qui défile vers le bas ; Modèles 3D créés à droite ; changer les couleurs d'arrière-plan au fur et à mesure que vous faites défiler - tout cela rend le site vraiment inoubliable.

L'effet parallaxe est devenu populaire après que Nike a lancé son site Web « Nike Better World ». Le site a reçu de nombreuses critiques positives de diverses ressources pour son merveilleux effet de défilement de parallaxe et sa conception Web.

L’effet parallaxe existe depuis les années 1980 et a été utilisé dans les jeux vidéo puis sur les sites internet.

Vous avez déjà vu des exemples de son utilisation. Avant de plonger dans des exemples de sites utilisant l'effet parallaxe, prenons un moment pour expliquer de quoi il s'agit.

La parallaxe est le déplacement apparent ou la différence de position apparente d'un objet lorsqu'il est vu depuis deux points différents qui ne sont pas sur la même ligne que l'objet. Dans la conception Web, la parallaxe fait référence à une technique de défilement utilisée pour créer l'illusion de profondeur sur un site Web.

Ce n'est pas une nouvelle technique. Mais beaucoup de temps s'est écoulé entre son apparition et le récent saut dans les styles tendance. Pour montrer à quoi ressemble l'effet de parallaxe lors du défilement, j'ai collecté des sites qui utilisent cette technique.

Regarde les exemples:

Il existe quatre méthodes qui peuvent être utilisées pour créer un site Web avec un effet de parallaxe jQ uery.

• La méthode de superposition consiste à utiliser plusieurs images d’arrière-plan qui peuvent se déplacer indépendamment horizontalement ou verticalement et sont placées les unes sur les autres.
• La méthode des sprites utilise une grande image composée de plusieurs et affiche seulement une partie de la grande image dans différentes positions. Souvent utilisé dans les menus de navigation.
• Méthode de motif répétitif : le contenu défilant est construit à partir de vignettes individuelles qui peuvent se déplacer sur un calque d’arrière-plan répétitif.
• Méthode raster - les lignes de pixels de l'image sont combinées et mises à jour de haut en bas avec un léger délai entre les lignes de dessin.

Voir exemple

Ce dont vous aurez besoin pour implémenter cet exemple de défilement parallaxe :

• Wellfleet (police Google);
• Arvo (police Google);
• Oswald (police Google);
• Goudy Bookletter 1911 (police Google);
• Images utilisées dans cet exemple ;
• Images de Noël en haute résolution. Vous pouvez télécharger des images gratuites à partir d’ici ou utiliser des images des archives liées ci-dessus.

Pour l'exemple de structure de fichier d'effet de parallaxe, nous allons créer trois dossiers et un fichier HTML :

• html sera le fichier principal. La conception entière sera située dans ce fichier ;
• Le dossier js est destiné aux scripts JavaScript/jQuery ;
• dossier img – pour les images ;
• dossier css – pour les styles CSS.

Dans le fichier index.html, nous allons d'abord ajouter une déclaration de type de document HTML5, ainsi qu'un groupe de liens dans l'en-tête. Cela inclura un lien vers le fichier CSS, les polices Google et le fichier de la bibliothèque jQuery.

Création d'un site Web simple à défilement de parallaxe

Ignorons le code de l'effet de parallaxe jQuery et discutons-en plus tard. Pour l'instant, continuons à travailler avec les éléments HTML. Nous ajouterons une balise d'en-tête avec un logo et une navigation à l'intérieur. La navigation mènera à des diapositives spécifiques. Nous ajouterons un effet de défilement fluide plus tard pour lui donner une belle apparence.

PARALLAXE

• Diapositive 1
• Diapositive 2
• Diapositive 3
• Diapositive 4
• Diapositive 5

Ajoutons maintenant des diapositives pour l'effet de parallaxe dans le bloc. Nous marquerons chacun d'eux avec un attribut ID, qui correspondra à son numéro de série. À l'intérieur de la diapositive, nous placerons un bloc avec la classe de contenu pour centrer les éléments.

JOYEUX NOËL, BONNE ANNÉE « Puis le Grinch a pensé à quelque chose qu'il n'avait jamais imaginé auparavant. Et si Noël, pensa-t-il, ne venait pas d'un magasin ! Et si Noël... peut-être... signifiait un peu plus ! Dr. Seuss "Je crois sincèrement que si nous continuons à raconter l'histoire de Noël, à chanter les chants de Noël et à vivre l'esprit de Noël, nous pouvons apporter de la joie, du bonheur et de la paix à ce monde." Norman Vincent Peale « Noël ne vient pas d'un magasin, peut-être que Noël signifie un peu plus... » Dr. Seuss « Mon idée de Noël, qu'elle soit ancienne ou moderne, est très simple : aimer les autres. À bien y penser, pourquoi devons-nous attendre Noël pour faire ça ? Bob Hope Copyright 1stwebdesigner.com

Maintenant que nous avons placé tous les éléments HTML sur la page, le site ressemble à ceci.

Commençons par ajouter des styles de parallaxe pour la balise body, ainsi que les en-têtes H1, H2 et H3. Nous définirons la police « Arvo » pour les rubriques H1-H2.

corps (marge : 0 ; remplissage : 0 ; largeur : 100 % ; ) h1 ( famille de polices : "Arvo" ; poids de la police : normal ; taille de la police : 55 px ; alignement du texte : centre ; couleur : #fff ; marge : 0; remplissage : 0 ; ) h2 ( famille de polices : "Arvo" ; poids de la police : normal ; taille de la police : 40 px ; alignement du texte : centre ; couleur : #fff ; marge : 0 ; remplissage : 0 ; ) h3 ( famille de polices : Oswald ; poids de la police : normal ; taille de la police : 16 px ; alignement du texte : centre ; marge : 5 px 0 ; remplissage : 0 ; z-index : 1 ; position : relative ; )

Ensuite, nous ajouterons des styles de base pour positionner les éléments sur l'écran et le contenu des diapositives.

Centre ( marge : 0 auto ; ) .content ( marge : 0 auto ; largeur : 960px ; ) .clear ( clair : les deux ; )

Stylisons maintenant la section d'en-tête avec l'exemple d'effet de parallaxe. Ajoutons une image avec un fond noir et 60% de transparence à l'en-tête, qui contiendra le logo et la navigation. Nous placerons le logo à gauche et la navigation à droite.

#header ( largeur : 100 % ; arrière-plan : url("../img/header-bg.png" ); hauteur : 80 px ; position : fixe ; marge en haut : 30 px ; ) #nav ( largeur : 410 px ; float : droite ; marge en haut : 20 px ; ) #logo a ( couleur : #fff ; décoration de texte : aucune ; flotteur : gauche ; taille de police : 30 px ; marge-en haut : 20 px ; couleur : #fff ; famille de polices : " Wellfleet"; font-weight: bold; ) #nav ul( list-style: none; display: block; margin: 0 auto; list-style: none; ) #nav li( margin-top: 9px; float: left; padding-left: 21px; ) #nav li a ( couleur: #fff; opacité: 0,6; taille de la police: 16px; décoration du texte: aucune; famille de polices: "Wellfleet"; ) #nav li a.active ( couleur : #fff; opacité:1; border-bottom: 2px solid #fff; ) #nav li a:hover ( couleur : #fff; opacité:1; )

Citations ( famille de polices : "Goudy Bookletter 1911", serif ; poids de la police : normal ; taille de la police : 30 px ; alignement du texte : gauche ; marge : 50 px auto ; ) .author_name_white (famille de polices : "Wellfleet" ; marge : 70px 0 0 75px; couleur: #fff; taille de police: 20px; .author_name_gray ( famille de police: "Wellfleet"; marge: 70px 0 0 75px; couleur: #94a4a4; taille de police: 20px; ) .quotes_container ( largeur : 800 px ; marge : 0 auto ; ) #christmas_tree ( arrière-plan : url("../img/christmas-tree.png") sans répétition ; largeur : 48 px ; hauteur : 77 px ; marge : 0 auto ; position : relative ; bas : -35px ; ) #divider ( arrière-plan : url("../img/divider.png") sans répétition ; largeur : 300 px ; hauteur : 35 px ; marge : 0px auto 27px auto ; ) #ruban ( arrière-plan : url("../img/ribbon.png") pas de répétition ; hauteur : 48 px ; affichage : bloc : sommet relatif : -38px ; url("../img/snowflakes.png") hauteur : 21px ; affichage : bloc : relatif ; gauche : -102px; largeur : 24 px ; hauteur : 21px ; marge : 0 automatique ; bloc de visualisation; position : relative ; bas : -33px ; à droite : -100px ; )

Chaque diapositive dans un effet de parallaxe jQuery aura une image d'arrière-plan ou une couleur d'arrière-plan blanche avec une position fixe. Vous devez également ajouter un petit remplissage à chaque diapositive pour centrer les éléments.

#slide1, #slide2 (largeur : 100 % ; ) #slide1 ( background:url("../img/slide1.jpg") 50 % 0 aucune répétition corrigée ; couleur : #fff; hauteur : 600 px ; marge : 0 ; remplissage : 200px 0 260px 0 ; taille d'arrière-plan : couverture ; ) #slide2 ( couleur d'arrière-plan : #fff ; couleur : #333333 ; hauteur : 300 px ; marge : 0 auto ; débordement : caché ; remplissage : 200 px 0 ; ) # slide3 ( arrière-plan : url(../img/slide3.jpg) 50 % 0 aucune répétition corrigée ; couleur : #fff ; hauteur : 600 px ; remplissage : 170 px 0 0 0 ; taille de l'arrière-plan : couverture ; ) #slide4 ( arrière-plan -color : #fff ; couleur : #333333 ; hauteur : 300px ; remplissage : 200px 0 ; ) #slide5 ( arrière-plan : url(../img/slide5.jpg) 50% 0 non-répétition corrigée ; hauteur : 200px ; marge : 0 auto ; remplissage : 250px 0 ; couleur : #fff ; taille de l'arrière-plan : couverture )

#copyright ( couleur : #fff ; famille de polices : "Wellfleet" ; taille de police : 14 px ; marge supérieure : 100 px ; alignement du texte : centre ; ) #copyright a ( décoration de texte : aucune ; couleur : #fff ; )

Donnons vie à notre site Internet avec un effet parallaxe. Dans la section head, ajoutez le code jQuery suivant.