vidéo = créer un parallaxe avec CSS
modèles de structure html et CSS
Code html du modèle
<!doctype html>
<html lang=« fr »>
<head>
<meta charset=« utf-8 »>
<title>Parallax Scrolling</title>
<!– la balise qui permet le responsive –>
<meta name=« viewport » content=« width=device-width, initial-scale=1 » />
<!– Copier le lien Google Fonts –>
<link href=« https://fonts.googleapis.com/css?family=Montserrat:200,200i,400,400i,700,700i,900,900i » rel= »stylesheet »>
<!– Créer le lien avec votre style CSS –>
<link rel=« stylesheet » href=« style-parallax.css »>
</head>
<body id=« top-page »>
<div id=« title »>
<div class=« border-rose »>
<h1>Pure CSS Parallax Scrolling</h1>
</div>
</div>
<div id=« slide1 »>
<div class=« border-jaune »>
<h2>Qu’est-ce que l’effet parallaxe ?</h2>
<p><strong>Il s’agit d’un terme générique correspondant au déplacement de plusieurs éléments sur des couches et à des vitesses différentes. </strong><br>
<em>Au scroll </em>(défilement de la vue) ou en fonction des coordonnées de la souris, les positions des différents fonds (ou éléments à animer) vont changer, ce qui va générer un effet de profondeur. Ce principe concerne au minimum deux éléments et peut être appliqué à plusieurs endroits : sur les images de fond, sur un en-tête ou un pied de page, sur des images… etc.</p>
</div>
</div>
<div id=« slide2 »>
<div class=« border-verte »>
<h2 class=« h2-vert »>C’est la différence de vitesse entre deux éléments qui crée l’effet de parallaxe !</h2>
</div>
</div>
<div id=« end »>
<h1 class=« h1-vert »><span class=« capitale »>à</span> vous de jouer !</h1>
</div>
<div id=« btn-back »>
<a href=« #top-page » class=« btn »>Back to top</a>
</div>
</body>
</html>
Code CSS du modèle
html {
height: 100%;
}
body {
margin:0;
padding:0;
font-family: ‘Montserrat’, sans-serif;
}
#title{
height: 100vh; /* vh correspond à 100% de la hauteur*/
width: 100%;
background-image: url(« img/i1.jpeg »);
background-position: center;
background-size: cover;
display: table;
background-attachment: fixed;
}
#slide1{
height: 1080px;
width: 100%;
background-color:#425f5c;
background-size: cover;
display: table;
background-attachment: fixed;
}
#slide2{
height: 1080px;
width: 100%;
background-image: url(« img/i2.jpeg »);
background-position: center;
background-size: cover;
display: table;
background-attachment: fixed;
}
#end{
height: 1080px;
width: 100%;
background-color:#f3a6a0;
background-size: cover;
display: table;
background-attachment: fixed;
}
#btn-back{
height: 100px;
width: 100%;
background-color:#f3a6a0;
background-size: cover;
display: table;
background-attachment: fixed;
}
h1{
font-size: 70px;
margin: 0px;
color: #f3a6a0;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.h1-vert{
color: #425f5c;
}
h2{
font-size: 50px;
color: #fff9a9;
text-align: center;
}
.h2-vert{
color: #425f5c;
text-align: left;
}
p{
font-size: 20px;
color: #fff9a9;
}
.border-rose{
margin: auto;
margin-top: 10%;
padding: 2%;
width: 60%;
min-width: 500px;
border: 10px solid #f3a6a0;
}
.border-jaune{
margin: auto;
margin-top: 10%;
padding: 5%;
width: 60%;
min-width: 500px;
border: 10px solid #fff9a9;
}
.border-verte{
margin-left: 50%;
margin-top: 5%;
padding: 2%;
width: 400px;
min-width: 200px;
border: 10px solid #425f5c;
background-color: #fff9a9;
}
.capitale{
text-transform: uppercase;
}
a.btn{
margin: auto;
margin-top: -50px;
padding: 10px;
width:250px;
display: block;
border: 10px solid #425f5c;
background-color: #fff9a9;
text-align:center;
vertical-align:middle;
font-size: 30px;
font-weight: 700;
color: #425f5c;
text-decoration: none;
}
a:hover.btn{
color: #f3a6a0;
border: 10px solid #f3a6a0;
}
téléchargez les éléments de l’exercice