Ich versuche als Übung für die anstehende Abschlussprüfung einen Onepager zu bauen, der ein bisschen dynamisch ist.. ich dachte da an paar CSS Animationen..
Ich habe jetzt ewig versucht und geschafft ein Overlay mit CSS zu gestalten, mit Z-Index.. usw.. nur scheint da auch das Problem zu liegen.. lege ich dann animationen drüber bewegen sie sich nicht, ausser ich lege die postition auf absolute.. nur ist das alles nicht responsiv und irgendwie funktioniert auch alles nicht..
Was kann ich besser machen ? Andere Vorschläge ? Ich glaube wirklich langsam dass das Problem am z-index liegt..
Probleme:
Es ist nicht responsiv
Es ist umständlich
Animationen funktionieren nur bei pos: absolute
HTML
HTML
<!doctype html>
<html lang="de">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>PackPapp GmbH</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="heroheader">
<span class="herooverlay"></span>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-transparent " >
<img src="img/logo.png" class="logo">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Programm</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Über Uns</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Impressum</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="firstheadline mt-5">
<span >Umwerfend Öko</span>
</div>
<div class="firsttext">
<span>Wir verpacken nachhaltig<br>
Vorfeier zum internationalen Tag der Umwelt<br>
Freitag, 4. Juni 2021, 10 Uhr</span>
</div>
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery.js" ></script>
<script src="js/popper.min.js" ></script>
<script src="js/bootstrap.min.js" ></script>
</body>
</html>
Alles anzeigen
CSS
CSS
.heroheader{
position: absolute;
background-image: url(../img/windraeder.jpg);
background-size: cover;
background-position: center;
width:100vw;
height:100vh;
z-index:-1
}
.herooverlay{
position: absolute;
height:100vh;
width:100vw;
background-color: #383838;
opacity: 0.5;
z-index:-2
}
.logo{
margin-right: 250px;
margin-left: 50px;
max-height: 100px;
max-width: 100px;
}
.navbar{
color:#fff!important;
}
.nav-link{
color:#fff!important;
font-weight: bold;
text-transform: uppercase;
}
.active{
border-bottom: solid 2px #7D9F00;
}
.firstheadline{
position: absolute;
display:inline;
margin-left: 800px;
color:#7D9F00;
font-size: 100px;
text-transform: uppercase;
animation: firstheadline 1s linear forwards;
opacity: 0;
}
.firsttext{
position: absolute;
display:inline;
margin-left: 800px;
margin-top: 200px;
color:#fff;
font-size: 40px;
text-transform: uppercase;
animation: firsttext 1s linear forwards;
opacity: 0;
}
@keyframes firstheadline {
from{transform:translateX(-1000px); opacity: 0;}
to {transform:translateX(10px); opacity: 1;}
}
@keyframes firsttext {
from{transform:translateX(-1000px); opacity: 0;}
to {transform:translateX(10px); opacity: 1;}
}
@keyframes secondheadline {
from{transform:translateX(-1600px); opacity: 0;}
to {transform:translateX(10px); opacity: 1;}
}
@keyframes secondtext {
from{transform:translateX(-1000px); opacity: 0;}
to {transform:translateX(10px); opacity: 1;}
}
Alles anzeigen