Header Animation 3

Hier verwenden wir für den Header einen Container mit Hintergrundbild. In diesem Fall wurde der Container Bildschirmfüllend gestaltet "container100".
Für die Animationen nutzen wir die Animate-CSS.
Welche Effekte möglich sind findet ihr ganz unten auf der Seite.
Im CSS findet ihr die Zeitliche Steuerung der Animationen, sowie das CSS für den Button, den Code für den Bildschirmfüllenden Container, Abstände von oben "head" und Änderungen für die mobile Ansicht.

Der Container hat die CSS-Klasse: container100 erhalten.
Die erste Animation "Codeschnipsel" hat die CSS-Klasse: head animated fadeInRight ani1 erhalten.
Die zweite Animation "für Zeta Producer" hat die CSS-Klasse: animated fadeInRight ani2 erhalten.
Die dritte Animation "das Bild" hat die CSS-Klasse: head animated zoomIn ani3 erhalten.
und so weiter...

Für die Scroll-Animation zum Inhalt wurde dieses Script verwendet: LINK

CSS Code

Diesen Code per Einstellungen > CSS einfügen und anpassen.

.buttonhead {
display: inline-block;
width: 220px;
padding: 8px;
color: #ffffff;
background-color: transparent;
border: 1px solid #ffffff;
text-align: center;
outline: none;
margin-top: 200px;
text-decoration: none;
transition: background-color 0.2s ease-out,
color 0.2s ease-out;
}
.buttonhead:hover,
.buttonhead:active {
border: 1px solid #F22929;
color: #ffffff;
text-decoration: none;
transition: border 0.3s ease-in,
color 0.3s ease-in;
}

@media (max-width: 920px) {
.container100{height:100%; }
.head{margin-top:25px; }
.buttonhead{margin-top:25px; }
}

.ani1 {
  -webkit-animation-duration: .9s;
  -webkit-animation-delay: .5s;
  -webkit-animation-iteration-count: 1;
}
.ani2 {
  -webkit-animation-duration: .9s;
  -webkit-animation-delay: .8s;
  -webkit-animation-iteration-count: 1;
}
.ani3 {
  -webkit-animation-duration: .5s;
  -webkit-animation-delay: 1.3s;
  -webkit-animation-iteration-count: 1;
}
.ani4 {
  -webkit-animation-duration: .8s;
  -webkit-animation-delay: 1.5s;
  -webkit-animation-iteration-count: 1;
}
.ani5 {
  -webkit-animation-duration: .7s;
  -webkit-animation-delay: 1.8s;
  -webkit-animation-iteration-count: 1;
}
</style>

markieren & kopieren

Header Animation 3

CSS Code

script

NEUE BEITRÄGE