Header Animation 1

Wir nutzen hier den ZP-Header.
Fügt zuerst unten stehendes CSS ein. Dieses könnt ihr später noch anpassen.
Fügt nun einen Header ein. Dieser erhält die CSS-Klasse: einbl-head
Nun fügt ihr den Text im Header hinzu. Und schaltet anschließend auf HTML um (Rechtsklick > Erweitert > HTML-Quelltext). Hier fügt ihr die CSS-Klassen für die Animationen. In diesem Fall sollte das so aussehen:
für die erste Zeile: <p class="einbl-text1"><span style="font-size: xx-large"><em>Codeschnipsel</em></span></p>
für die zweite Zeile: <p class="einbl-text2"><span style="font-size: xx-large"><em>für Zeta Producer</em></span></p>
Ihr weist also einfach dem <p> eine CSS-Klasse hinzu: <p class="css-klasse">
Da bei mehreren Bildern im Header die weiteren bereits vorgeladen werden. Funktionieren die Animationen nur mit einem bzw. beim ersten Bild.

CSS Code

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

<style>
/********************* Animation Header *********************/
.einbl-head  {
animation-name: einbl-head ;
animation-duration: 1.0s;				/** Gesammte Zeit der Animation **/
animation-iteration-count: 1;			/** Anzahl der Wiederholungen **/
animation-timing-function: ease-in-out;
}
@keyframes einbl-head  {
from { opacity: 0; transform:translate(0, -12rem);}		/** Startposition **/
20% { opacity: 0; transform:translate(0, -12rem);}		/** Position nach 20% der Zeit **/
to { opacity: 1; transform: translate(0, 0);} 		/** Endposition **/
}
/********************* Animation erster Text *********************/
.einbl-text1  {
animation-name: text1 ;
animation-duration: 1.0s;				/** Gesammte Zeit der Animation **/
animation-iteration-count: 1;			/** Anzahl der Wiederholungen **/
animation-timing-function: ease-in-out;
}
@keyframes text1  {
from { opacity: 0; transform:translate(6rem, 0);}		/** Startposition **/
50% { opacity: 0; transform:translate(6rem, 0);}		/** Position nach 50% der Zeit **/
to { opacity: 1; transform: translate(0, 0);} 		/** Endposition **/
}
/********************* Animation zweiter Text *********************/
.einbl-text2  {
animation-name: text2 ;
animation-duration: 1.2s;				/** Gesammte Zeit der Animation **/
animation-iteration-count: 1;			/** Anzahl der Wiederholungen **/
animation-timing-function: ease-in-out;
}
@keyframes text2  {
from { opacity: 0; transform:translate(6rem, 0);}		/** Startposition **/
55% { opacity: 0; transform:translate(6rem, 0);}		/** Position nach 50% der Zeit **/
to { opacity: 1; transform: translate(0, 0);} 		/** Endposition **/
}
</style>

markieren & kopieren

Startseite Datenschutz Impressum

© Zeta Producer V15 / Mario Groß

Alle hier aufgezeigten Codeschnipsel wurden mit dem Layout "Stripe Responsive" und in diesem Projekt getestet.

Ob diese in Euerem Projekt funktionieren müsst ihr testen.