css
Data utworzenia: 2025-01-13 10:59:17
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
position: relative;
font-family: "Lato", sans-serif;
height: 101vh;
}
.img1 {
position: relative;
height: 100%;
background: url("./parallax2.jpeg");
background-repeat: no-repeat;
background-size: 400%;
background-position: center;
animation: parrallax2 3s ease forwards;
animation-delay: 1s;
opacity: 0;
}
.img2 {
height: 100%;
background: url("./parallax1.png") no-repeat center / cover;
animation: parrallax1 2s ease forwards;
animation-delay: 1s;
}
h1 {
text-align: center;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-transform: uppercase;
color: azure;
text-shadow: 0 0 15px black;
letter-spacing: 5px;
font-size: 40px;
animation: fade-in 2s ease forwards;
opacity: 0;
animation-delay: 2s;
}
@keyframes parallax2 {
0% {
transform: translateY(100px);
opacity: 0.3;
}
100% {
transform: translate(0);
opacity: 1;
}
}
@keyframes parallax1 {
0% {
transform: translateY(200px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
Powrót