Comment Créer un Effet de Défilement Parallaxe?
La création d'un site web demande une conception impressionnante pour attirer les visiteurs et augmenter la participation des utilisateurs. L'un des effets à la mode de nos jours est l'effet de parallaxe.
Avant créer un effet de parallaxe pour votre site web, voyons qu'est-ce que c'est et d'où il vient.
L'effet parallaxe fait défiler le contenu d'arrière-plan et de premier plan à une vitesse différente.
La conception parallaxe d'un site web attire toujours l'attention de la plupart des utilisateurs. Le terme “parallaxe” a premièrement apparu à partir des jeux vidéo visuels à défilement horizontal avec effet 2D qui utilisaient la vitesse différente de mouvement de l'image de fond pour créer l'illusion de profondeur pendant jouer le jeu.
Il peut être utilisé sur chaque page ou publication d'un site web. Particulièrement, il apparaît sur les pages d'accueil, les pages de renvoie, ou sur les sites composés d'une page.
1. Créez HTML
- Créez un <div> avec le nom "parallax-effect" de la classe .
- Il y a trois façons d'ajouter les styles CSS au document HTML. Nous utilisons le style en ligne (inline), c'est-à-dire, on ajoute un attribut style aux éléments HTML. Spécifiez la hauteur, créez un gradient linéaire pour background-image. Les gradients permettent d'afficher des transitions lisses entre deux ou plus couleurs spécifiées.
- Définissez font-size du contenu et la fonte elle-même.
- Centrez le contenu avec la propriété text-align.
<div class="parallax-effect"></div>
<div style="height:1000px;background-image: linear-gradient(to right top, #faa7e4, #f395e5, #e983e9, #dc72ee, #cb63f4); font-size:36px; text-align: center; font-family: 'Raleway', Arial, sans-serif">
Effet Parallaxe
</div>2. Créez CSS
- Définissez le lien de l'image qui doit être utilisé avec la propriété background-image.
- Définissez min-height spécifique à 600px.
- Spécifiez si l'image de fond doit être fixe ou en défilement avec la reste de la page à l'aide de la propriété background-attachment.
- Spécifiez la position de début de l'image de fond avec la propriété background-position. Nous la définissons à "center".
- Définissez la propriété background-repeat à "no-repeat" pour que l'image ne soit pas répétée.
- Définissez background-size à "cover" pour redimensionner l'image de fond aussi grande que possible pour couvrir toute la zone du fond.
.parallax-effect {
background-image: url("https://images.unsplash.com/photo-1453747063559-36695c8771bd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjF9&auto=format&fit=crop&w=1050&q=80");
min-height: 600px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}Voici un exemple de l'effet de parallaxe le plus simple:
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
.parallax-effect {
background-image: url("https://images.unsplash.com/photo-1453747063559-36695c8771bd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjF9&auto=format&fit=crop&w=1050&q=80");
min-height: 600px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="parallax-effect"></div>
<div style="height: 1000px; background-image: linear-gradient(to right top, #faa7e4, #f395e5, #e983e9, #dc72ee, #cb63f4); font-size: 36px; text-align: center; font-family: 'Raleway', Arial, sans-serif;">
Effet Parallaxe
</div>
</body>
</html>Voyons des exemples plus attirants et beaux!
Dans cet exemple on ajoute un <div> de plus de sorte que lorsque vous faites défiler l'image sera vu à la fin:
Dans cet exemple ci-dessous utilisons un style interne CSS. Le code est plus clair.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
.parallax-effect {
background-image: url("https://images.unsplash.com/photo-1453747063559-36695c8771bd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjF9&auto=format&fit=crop&w=1050&q=80");
min-height: 600px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax-effect + div {
height: 1000px;
background-image: linear-gradient(to right top, #faa7e4, #f395e5, #e983e9, #dc72ee, #cb63f4);
font-size: 36px;
text-align: center;
font-family: "Raleway", Arial, sans-serif;
}
</style>
</head>
<body>
<div class="parallax-effect"></div>
<div>
Effet Parallaxe
</div>
<div class="parallax-effect"></div>
</body>
</html>On peut créer un effet de parallaxe avec la balise <section>. La balise <section> est souvent utilisée lorsqu'on crée une page de renvoie pour diviser la page en blocs logique séparés.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
body {
background-color: #eeeeee;
margin: 0;
padding: 0;
border: 0;
}
h2 {
font-family: "Noto Sans", serif;
font-size: 2em;
color: #000000;
}
p {
font-family: "Noto Sans", sans-serif;
font-size: 1em;
line-height: 1.5em;
color: #666;
margin: 30px 0;
text-indent: 30px;
}
.image {
background: url("https://images.unsplash.com/photo-1535919020263-f79f5313f336?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80") no-repeat fixed;
background-position: center center;
background-size: cover;
min-height: 500px;
}
.content {
max-width: 960px;
margin: 0 auto;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
z-index: 2;
height: 100%;
}
</style>
</head>
<body>
<div class="image"></div>
<section class="content">
<h2>Effet Parallaxe</h2>
<p>
Tout d’abord, je tiens à signaler que j’ai été très déçue de la ville d’Oia tant encensée sur les réseaux sociaux. C’est un très joli petit village malheureusement terni par l’amas de boutiques de luxe qui s’y trouvent et n’ont
absolument aucun intérêt et la foule, bien trop agitée dans de si petites ruelles (#UNPOPULAROPINION). !
</p>
<hr />
<div>
<p>
Si vous souhaitez contempler le fameux Sunset d’Oia, je vous déconseille d’aller vous mêler aux milliers de touristes qui attendent ce dernier entassés au même endroit. Vous prendrez selon moi plus de plaisir à le regarder du Meze
Meze, un charmant petit restaurant tout proche d’Oia qui offre le calme et un superbe point de vue.
</p>
<p>
Pour tout vous dire, nous y avons passé deux heures tout au plus et je n’en garde pas un excellent souvenir. Les extérieurs de la ville sont simplement d’immenses parkings poussiéreux et n’ont rien du charme vendu sur les
prospectus de publicité. Il en est de même pour ses restaurants qui sont souvent des attrape touristes …
</p>
<p>
En somme, je vous conseille tout de même de visiter Oia mais très tôt le matin. Mais ne prévoyez pas d’y rester une journée. C’est bien trop long. Si vous louez un appartement ou un hôtel à Oia, attendez vous à payer très cher.
Sachez que la majorité des appartements, étant donné que la ville est construite sur la roche, permettent aux touristes de vous observer dans votre jacuzzi ou votre piscine depuis les hauteurs..
</p>
<p>Le plus beau souvenir que je garde d’Oia a été notre séjour à l’hôtel Oia Suites légèrement excentré de la ville. Nous avons été absolument conquis par cet établissement de charme.</p>
<p>L’expérience a été absolument fabuleuse du début jusqu’à la fin. L’essence même du luxe : la discrétion du personnel, une présence juste et mesurée, une attention constante portée à la clientèle.</p>
<p>Le petit-déjeuner était délicieux : café grec froid (à tester !), jus, sucré, salé … Une profusion et un choix extrêmement varié. Ce dernier était servi au lit.</p>
<p>
Côté équipements, elle était climatisée, comprenait une télévision à écran LCD, une salle de bain privative et un grand balcon. Le service de ménage était assuré chaque jour. Des bouteilles d’eau sont mises gratuitement à votre
disposition dans le minibar à votre arrivée.
</p>
</div>
</section>
</body>
</html>