Problem mit animate.css

[meiky]

Hallo Zusammen

Als Neuling (hinsichtlich Forum sowie html) möchte ich Euch erst einmal begrüssen und ich weiss nicht, ob ich hier überhaupt richtig bin...

Ich habe im Header-Bereich ein grosses Bild. Darüber ein Text-Image, welches mit Hilfe der css-Datei "animate.css" einbinden konnte. Das "zoomIn" funktioniert auch wunderbar.

Die Info sowie das Einbinden habe ich natürlich nicht selbst erstellt. Die Infos habe ich vom Web (https://daneden.github.io/animate.css/)

Nun möchte ich Euch folgendes fragen: Ist es möglich, mit zwei Bildern zu arbeiten? Der Ablauf sollte wie folgt sein:

1. zoomIn erstes Bild
2. zoomIn zweites Bild
3. zoomIn erstes Bild, welches dann persistent stehen bleiben soll

Bin für jeden Hinweis dankbar.

Herzliche Grüsse meiky

[MrMurphy1]

Hallo

Darüber ein Text-Image

Besser sind Texte. Sie sparen den Besuchern Traffic und sind bei Größenänderungen besser lesbar.

Ist es möglich, mit zwei Bildern zu arbeiten?

Ja. Du musst einfach nur mehrere Animationen hintereinander ausführen.

Gruss

MrMurphy

[Richard Rüfenacht]

Hallo meiky

Als Neuling (hinsichtlich Forum sowie html) möchte ich Euch erst einmal begrüssen

Willkommen

Ich habe im Header-Bereich ein grosses Bild. Darüber ein Text-Image, welches mit Hilfe der css-Datei "animate.css" einbinden konnte. Das "zoomIn" funktioniert auch wunderbar.

Wenn du Text über ein Bild legst, bietet sich <figure> an. Du kannst dann sowohl das Bild als auch den Text (figcaption) nach Belieben animieren.

Nun möchte ich Euch folgendes fragen: Ist es möglich, mit zwei Bildern zu arbeiten? Der Ablauf sollte wie folgt sein:

1. zoomIn erstes Bild
2. zoomIn zweites Bild
3. zoomIn erstes Bild, welches dann persistent stehen bleiben soll

Das ist kein Problem und an sich auch nicht schwierig. Wobei ich mich frage, ob du mit „Bild“ allenfalls Text meinst. Ich bin gern bereit dir zu helfen, wobei es in diesem Forum nicht üblich ist, fertigen Code zu liefern. Wenn dein Beispiel von allgemeinem Interesse ist, könnte daraus auch ein Beispiel für das Wicki entstehen.

Mit besten Grüssen
Richard

[meiky]

Guten Morgen Zusammen

Herzlichen Dank für die schnellen Feedbacks!

Im Ursprung versuchte ich es mit Text anstelle von Images. Das Problem ist, dass der Text ein Logo ist, welcher in der zweiten Zeile ein entsprechenden Einzug benötigt. Dies wiederum "beisst" sich, wenn die Webseite Responsiv sein soll, da sich dann die Einzüge immer verschoben haben - so gab ich entnervt auf und machte via Illustrator ein Image.

Gerne zeige ich das bisher erstellte auf dem Test-Server: Linkbeschreibung

Dort seht Ihr das Logo hochsliden. Danach sollte nun ein zweites Text-Bild (ein Zitat) erscheinen, wieder verschwinden um dann das Logo persisten anzuzeigen.

Ich erwarte keinen fertigen Code - obwohl ich nichts dagegen hätte ;-). So freue ich mich nur schon über entsprechende Ansätze. Bisher habe ich nun schon Stunden mit diversem Googlen und Proben aufgewendet und eigentlich wollte ich schon aufgeben...

Euch einen guten Start in die Woche und herzliche Grüsse meiky

[marctrix]

Hej meiky,

Im Ursprung versuchte ich es mit Text anstelle von Images.

Das funktioniert auch prima, besser als Bilder.

Das Problem ist, dass der Text ein Logo ist, welcher in der zweiten Zeile ein entsprechenden Einzug benötigt.

Text-einzug lässt sich mit text-indent erstellen.

Dies wiederum "beisst" sich, wenn die Webseite Responsiv sein soll, da sich dann die Einzüge immer verschoben haben - so gab ich entnervt auf und machte via Illustrator ein Image.

Vielleicht stellst du das Problem hier mal vor. Ich bin sicher, das lässt sich lösen...

Gerne zeige ich das bisher erstellte auf dem Test-Server: Linkbeschreibung

Dort seht Ihr das Logo hochsliden. Danach sollte nun ein zweites Text-Bild (ein Zitat) erscheinen, wieder verschwinden um dann das Logo persisten anzuzeigen.

Wie gesagt mehrere Animationen, die nacheinander ablaufen sollten dieses Problem lösen.

Spezielle Editoren wie Brackets helfen bei der Erstellung solcher Animationen. Auf der Seite www.css3please.com kann man mit einfachen Animationen rumprobieren und dere Effekt sofort sehen. Dort kann die Kiste, die als Beispiel dient auch vergrößert und verkleinert werden, wie der Text auf Deiner Seite.

So freue ich mich nur schon über entsprechende Ansätze.

Ich hoffe, was Du bisher bekommen hast, hilft schon mal.

Bisher habe ich nun schon Stunden mit diversem Googlen und Proben aufgewendet und eigentlich wollte ich schon aufgeben...

Nicht machen! ;-)

Wir sind natürlich hier, um zu helfen. Fertigen Code kann man auch haben (nicht hier), muss den dann aber entweder bezahlen oder bekommt ihn, ohne ihn zu verstehen (in anderen Foren üblich) und baut ihn in seine Webseite ein, womöglich ohne dann noch notwendige Anpassungen vornehmen zu können (gerade weil er fertig ist, aber nicht verstanden).

Marc

[MrMurphy1]

Hallo,

die Seite enthält leider einige sachliche Fehler im Quelltext. Ich habe nicht geprüft in wie weit die die Animation stören können.

https://validator.w3.org/nu/?doc=http%3A%2F%2Fneu.cedo-beratung.ch%2F

Zu deinem Problem

Ich habe mich im folgenden Beispiel an das vorhandene CSS von animate.css gehalten, obwohl ich es ziemlich sperrig finde. Füge deinem CSS folgende Anweisungen hinzu:

.animated1 {
   -webkit-animation-duration: 16s;
   animation-duration: 16s;            
   -webkit-animation-delay: 0s;
   animation-delay: 0s;
   -webkit-animation-iteration-count: 1;
   animation-iteration-count: 1;
   -webkit-animation-direction: alternate;
   animation-direction: alternate;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
}
@-webkit-keyframes zoomIn1 {
   from {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3);
   }
   12% {
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
   }
   25% {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3);
   }
   75% {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3);
   }
   100% {
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
   }
}
@keyframes zoomIn1 {
   from {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3);
   }
   12% {
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
   }
   25% {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3);
   }
   75% {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3);
   }
   100% {
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
   }
}
.zoomIn1 {
   -webkit-animation-name: zoomIn1;
   animation-name: zoomIn1;
}
.animated2 {
   -webkit-animation-duration: 4s; /* Dauer der Animation */
   animation-duration: 4s;            
   -webkit-animation-delay: 4s;    /* Startverzögerung */
   animation-delay: 4s;
   -webkit-animation-iteration-count: 2;
   animation-iteration-count: 2;
   -webkit-animation-direction: alternate;
   animation-direction: alternate;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
}
@-webkit-keyframes zoomIn2 {
   from {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3);
   }
   40% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
   }
   50% {
      opacity: 1;
   }
}
@keyframes zoomIn2 {
   from {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3);
   }
   40% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
   }
   50% {
      opacity: 1;
   }
}
.zoomIn2 {
   -webkit-animation-name: zoomIn2;
   animation-name: zoomIn2;
}

Dem ersten Bild bzw. dessen Container gibst du dann die Klassen "animated1 zoomIn1", dem zweiten Bild bzw. dessen Container die Klassen "animated2 zoomIn2".

Die Bilder müssen so positioniert werden, dass sie übereinander erscheinen können. Dazu bietet sich "position: absolute;" an.

Gruss

MrMurphy

[meiky]

Guten Abend MrMurphy

Ich komme nicht mehr aus dem Staunen heraus! Vielen Dank - ich versuche (auch mit Hilfe von Google) das Ganze noch zu verstehen, bzw. nachzuvollziehen.

Dass mein Code noch viele sachliche Fehler im Quelltext enthält, glaube ich Euch sofort. Wie erwähnt, bin ich ein absoluter Neuling und weiss um das Nichtwissen. So sind banale Dinge für mich die grössten Herausforderungen. Aber ich habe mich bereits in eine Weiterbildung angemeldet. Hoffe, dass ich den Aufbau irgendwann mal besser verstehen werde. Grundsätzlich bin ich ein sehr strukturiert denkender Mensch - aber diese Materie will mir einfach nicht so recht in mein Kopf... Ich lass nicht locker :-)

Zu guter Letzt möchte ich mich für die grossartige Hilfe bei Euch allen bedanken.

Schönen Abend und herzliche Grüsse, meiky

[Richard Rüfenacht]

Hallo meiky

Das Problem ist, dass der Text ein Logo ist, welcher in der zweiten Zeile ein entsprechenden Einzug benötigt.

Ja, nach meiner ursprünglichen Idee mit <figcation> ist das so wohl nicht zu formatieren. Mit Text geht das aber. Mir fällt es aber schwer, diesen „Text“ als Logo zu erkennen. Ich würde Cedo getrennt vom anderen Text animieren und auch die zwei Textzeilen eventuell sogar einzeln animieren.

Dies wiederum "beisst" sich, wenn die Webseite Responsiv sein soll, da sich dann die Einzüge immer verschoben haben

Warum gestaltest du nicht von Anfang an responsiv? Ist kein Problem bei Textanimationen.

Dort seht Ihr das Logo hochsliden. Danach sollte nun ein zweites Text-Bild (ein Zitat) erscheinen, wieder verschwinden um dann das Logo persisten anzuzeigen.

Es geht also nicht um einen Bilderwechsel, sondern lediglich um das ein- und ausblenden von Text. Das lässt sich problemlos animieren. Es ist also nur die Frage, wie animiert werden soll, wie das genau aussehen soll.

Ich erwarte keinen fertigen Code - obwohl ich nichts dagegen hätte ;-).

Jetzt, wo ich weiss für wen die Site ist, wäre ich bereit, auch etwas Code beizusteuern.

Mit besten Grüssen
Richard