Objectif : Créer un effet de parallaxe pour une image de fond lorsque l'utilisateur fait défiler la page.
Instructions :
Points à évaluer :
Nous allons commencer par créer la structure HTML de base avec une section contenant l'image de fond et du texte pour illustrer l'effet de parallaxe.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Effet Parallaxe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Effet Parallaxe avec CSS</h1>
<p>Défilez vers le bas pour voir l'effet.</p>
</header>
<!-- Section avec effet parallaxe -->
<section class="parallax">
<div class="content">
<h2>Effet Parallaxe</h2>
<p>Ceci est un exemple d'effet parallaxe en CSS.</p>
</div>
</section>
<!-- Contenu supplémentaire pour le défilement -->
<section class="content-section">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus fermentum arcu sit amet felis aliquet, vel luctus urna vulputate. Donec imperdiet, magna at placerat feugiat, erat libero pharetra eros, id scelerisque felis ligula nec tortor. Sed ut risus mi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet tincidunt lorem. Nullam vestibulum purus justo, nec vehicula turpis suscipit eget. Aenean ut metus vitae nulla feugiat feugiat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod dolor non sem egestas, vitae vulputate velit vestibulum. Pellentesque vehicula lorem id sapien varius, in iaculis leo lacinia.</p>
</section>
</body>
</html>
Nous allons maintenant appliquer les styles nécessaires, en particulier pour l'effet parallaxe.
/* Style général */
body, html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
height: 100%;
}
/* Style de l'en-tête */
header {
text-align: center;
padding: 50px;
background-color: #f4f4f4;
}
header h1 {
margin: 0;
font-size: 36px;
color: #333;
}
header p {
font-size: 18px;
color: #555;
}
/* Section avec effet parallaxe */
.parallax {
/* Définir l'image de fond avec effet de parallaxe */
background-image: url('https://source.unsplash.com/1600x900/?nature,water');
min-height: 400px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.parallax .content {
text-align: center;
background: rgba(0, 0, 0, 0.5);
padding: 20px;
color: white;
border-radius: 10px;
}
.parallax h2 {
font-size: 48px;
margin: 0;
}
.parallax p {
font-size: 20px;
}
/* Contenu supplémentaire */
.content-section {
padding: 50px;
background-color: #f4f4f4;
color: #333;
line-height: 1.6;
}
Ajouter un commentaire
Veuillez vous connecter pour ajouter un commentaire.
Pas encore de commentaires.