Come fare per - Cambia lo sfondo durante lo scorrimento
Scopri come modificare le immagini di sfondo durante lo scorrimento con CSS.
Cambia immagine di sfondo su scorrimento
Scorri verso il basso all'interno della cornice per vedere l'effetto:
Come modificare l'immagine di sfondo sullo scorrimento
Passaggio 1) Aggiungi HTML:
Esempio
<div class="bg-image img1"></div>
<div class="bg-image img2"></div>
<div
class="bg-image img3"></div>
<div class="bg-image img4"></div>
<div
class="bg-image img5"></div>
<div class="bg-image img6"></div>
<div
class="bg-text">TEXT</div>
Passaggio 2) Aggiungi CSS:
Esempio
body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.bg-image {
/* Full height */
height: 50%;
/* Center and scale
the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Images used */
.img1 {
background-image: url("img_snow.jpg"); }
.img2 { background-image: url("img_girl.jpg");
}
.img3 { background-image: url("img_lights.jpg"); }
.img4 {
background-image: url("img_nature.jpg"); }
.img5 { background-image: url("img_forest.jpg");
}
.img6 { background-image: url("img_woods.jpg"); }
/* Position text
in the middle of the page/image */
.bg-text {
background-color: rgb(0,0,0);
/* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black
w/opacity/see-through */
color: white;
font-weight: bold;
font-size: 80px;
border: 10px solid #f1f1f1;
position:
fixed; /* Stay fixed */
top: 50%;
left: 50%;
transform:
translate(-50%, -50%);
z-index: 2;
width: 300px;
padding: 20px;
text-align: center;
}