dwdw
Data utworzenia: 2025-01-13 11:02:48
*{
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: parallax2 3s ease forwards;
/* obrazek ma pozostać na ekranie po zakończeniu animacji */
animation-delay: 1s;
opacity: 0;
}
.img2{
height: 100%;
background: url("./parallax1.png") no-repeat center / cover;
animation: parallax1 2s ease forwards;
animation-delay: 1s;
opacity: 0;
}
h1 {
text-align: center;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 40px;
animation: fade-in 2s ease forwads;
opacity: 0;
animation-delay: 2s;
}
@keyframes parallax2 {
0% {
transform: translateY(100px);
opacity: .3;
}
100% {
transform: translate(0);
opacity: 1;
}
}
@keyframes parallax1 {
0% {
transform: translateY(200px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Powrót