Animationen auf Headerbild (Texte und Grafiken)

Zitat von jjonline

Hallo,

weiß jemand, wie sich so etwas mit dem ZP leicht umsetzen lässt bzgl. Textanimation auf dem Headerfoto sowie unterschiedliche Buttons, die auf dem jeweiligen Headerbild dargestellt sind?

https://www.comartist.de/

Oder auch dieses, wo zusätzlich noch Grafiken über das Headerbild animiert werden:

https://www.onelio.de/

In Chrome öffnen und F12 drücken. Dann mit dem Picker Tool das animierte Textfeld anklicken und schauen, was für ein CSS dranbaumelt. Dort müsste dann irgend etwas mit Animation oder so zu finden sein. Dat versuchen auf d n Text in Deinem Header anzuwenden.

Kann aber gerne morgen mal schauen.

Madas

Moin,

schau mal hier und hier

Zitat von wurzelsepp

Moin,

schau mal hier und hier

Der Code dazu kommt die nächsten Tage.

Funktioniert allerdings beides nur mit einem einzelnen Header. Für einen Slider habe bisher noch keine geeignete Lösung gefunden.

• Variante 1 nutzt den Zeta Producer Header LINK
• Variante 2 wird extern eingebunden LINK
• Variante 3 nutzt einen Container LINK

Liege ich richtig, wenn ich den CSS-Code in für jede Seite anpassen muss, wenn die Header unterschiedlich aussehen sollen?

• Eigentlich nur wenn du die Zeiten für die Animationen ändern möchtest, oder die Höhe des Headers. Der Rest geht ja über die LiveView-Bearbeitung.

Wie bekommt man es hin, das die Grafik eine Verlinkung erhält?

• Da wir ja eine Hintergrundgrafik verwenden gestaltet sich das nicht so einfach.
• Man kann aber einen leeren verlinkten DIV über den Header legen. Hier mal eine Beispielseite: LINK
• Den kompletten Code findest du auf der Seite.
• Hier kurz die Änderungen: Ich habe im Beispiel den Header auf 70% Höhe gestellt. Also erhält der Link-Div auch diese Höhe. In der mobilen Ansicht schalten wir ja die festgestellte Höhe aus. Weil wir also nicht wissen wie hoch der Header dann dargestellt wird schalten wir den Link dann aus.

Im CSS kommt hinzu:

.meinlink {
position:absolute;
top:40px;
left:0;
height:70vh;
width:100%;
z-index:1;
}
@media (max-width: 920px) {
.meinlink {
display:none;
}}

Am Ende der Seite fügen wir dann per Widget > Quelltext den Link ein:

 <a class="meinlink" href="https://deinlink.de"></a>

Oh, das ist ganz einfach.

In diesem Fall wurde das Widget Text verwendet und hier eine Grafik eingefügt. Diese zu verlinken schaffst du sicher selbst . Habe mal einen Link hinzu gefügt. LINK.

Ist am Anfang sicher etwas schwierig zu verstehen aber dann einfach ganz Easy.

• Du kannst innerhalb des Header-Containers alle verfügbaren Widgets nutzen.
• Diese müssen dann die CSS-Klassen erhalten.
• 1. animated - um überhaupt eine Animation aufzurufen.
• 2. z.B. fadeInRight - Einfaden von Rechts - Animation kannst du hier auswählen: LINK
• 3. Die Zeiten. Start ab wann, Dauer der Animation. Legst du in der CSS fest. Im Beispiel ani4
• Würde dann so aussehen: Du fügst innerhalb des Containers irgend ein Widget ein. Dieses erhält in diesem Beispiel folgende CSS-Klassen: animated fadeInRight ani4.