Frage CSS Animation soll nicht auf den Startpunkt zurück springen

[Heinz3000]

Hallo
Mein
1.Problem ist, dass die Animation bei hover
immer auf den Startpunkt (Zahl 1) zurück springt.

2.Problem ist, wie kann ich die Breite der Animation
auf % Wert einstellen?

https://jsfiddle.net/hk24jryf/

MfG Heinz

 

[Heinz3000]

Vielen Dank für deine Hilfe zu Punkt 1.
Hast du auch eine Lösung für mein 2. Problem?

MfG Heinz

 

[Heinz3000]

Erstmal, Vielen Dank für deine Hilfe.
Eine Frage hätte ich noch,
wie erreiche ich den selben Effekt mit ungekehrten Ablauf,
wenn ich mouseover beende?
MfG Heinz

 

[scbawik]

Erstmal, Vielen Dank für deine Hilfe.
Eine Frage hätte ich noch,
wie erreiche ich den selben Effekt mit ungekehrten Ablauf,
wenn ich mouseover beende?
MfG Heinz

Wenns nur das sein soll, benötigt man nicht extra animation:
https://jsfiddle.net/hk24jryf/3/

 

[Heinz3000]

Vielen Dank für eure Hilfe!
MfG Heinz

 

[Heinz3000]

Ich brauche nochmals Hilfe von euch Profis, ich komme einfach nicht weiter.

Diese Animation soll als Header dienen.
Beim runterscrollen: die Drehung (auf 2)
und wenn die Animation fertig ist soll sich der Header animiert (2sek) um 50% in der Höhe verkleinern.
Beim hochscrollen, bei Top 0 wieder animiert die normale Höhe erreichen und die Drehung (auf 1).
Und dies sollte alles flüssig ablaufen.

Kann mir bitte Jemand helfen dies umzusetzten?
Ich finde leider kein ähnliches Beispiel.

MfG Heinz

 

[Heinz3000]

Ja, es ist ein fixierter Header.

http://www.inserthtml.com/demo/header-animations/example-2/

Ich hatte es zuerst mit dieser Vorlage versucht, aber ich finde diese Konstrution nicht ok.
Wozu 3 Divs?

MfG Heinz

 

[Heinz3000]

Du bist SUPER! Danke

wird/ist IE nicht sowieso eingestellt?
Ich denke wichtig ist, wenn es auch auf allen mobilen Geräte funktoniert.

MfG Heinz

 

[Heinz3000]

Gibt es eine Möglichkeit, dass es mit allen Browsern funktioniert?
"prefix"

MfG Heinz

 

[Heinz3000]

Bei 2D ist ja der Effekt weg, oder?
Gibt es da nicht eine Abfrage, welcher Browser aktiv ist und z.B. bei IE ein anderes CSS einbinden?

 

[Heinz3000]

Kannst du bitte den neuen Effekt in deine Demo einfügen und testen
https://jsfiddle.net/Sempervivum/hk24jryf/19/
bei mir kommt ein Anzeigefehler

 

[Heinz3000]

Super, Danke!

Ich hatte ein Cache Problem.
Resultat poste ich nach Fertigstellung.

MfG Heinz

 

[Heinz3000]

Hallo
Ich hätte noch eine Frage.
Wie kann ich am besten diesen Footer-Effekt
http://scrollme.nckprsn.com/
in das obere Projekt einfügen?

Ich habe immer Probleme damit.
Oder gibt es überhaupt eine bessere Lösung für diesen Footer-Effekt?
Vielen Dank im Voraus

 

[Heinz3000]

Ich denke, ich bekomme es nicht zum laufen wegen

.scroll {
  overflow-y: auto;
}

Kannst du es BITTE in jsfiddle.net testen?

 

[Heinz3000]

Vielen Dank für deine Hilfe,
aber die Seite/Effekt funktioniert leider nicht.

 

[Heinz3000]

Ich habe deine Hilfe leider nicht zum laufen bekommen,
aber trotzdem vielen Dank.
Ich habe es anders gelöst, Resultat poste ich nach Fertigstellung.
MfG Heinz