Animation mit CSS

Antworten
Admin
Administrator
Beiträge: 84
Registriert: Di 19. Aug 2014, 10:47

Animation mit CSS

Beitrag von Admin » Di 19. Aug 2014, 16:07

Vorbetrachtung
Wenn du diese Zeilen liest hat dich die Überschrift Neugierig gemacht oder du sagtst „geht nicht“.
Ich sage „geht doch“. Denn bei genauer Betrachtung ist eine Animation doch nur eine Reihenfolge auf einander abgestimmter Bilder. CSS kann sehr gut mit Bildern händeln und wenn du noch den Bildern eine Link-Liste spendierst ist die Animation schon fast fertig.
Die Idee stammt von hier und ich habe das Ganze neu Aufbereitet.
Als Ausgangsbild(er) dient mir die Datei „rollendes-ei_2.gif“ von http://www.bilderkiste.de" onclick="window.open(this.href);return false;.
Bitte beachte beim Nachbau das jeweilige Copyright !!!

Hier findest du eine Vorschau / das Ergebnis.

Warum diese Datei als Vorlage
1. Ein animiertes GIF ist eine fast fertige Arbeit – insofern das Thema nicht vorgegeben ist
2. Dieses GIF hat genügend Frames um die Abfolge auch bei langsamer Mausbewegung flüssig zu halten.
3. :mrgreen: Dies ist ein Tut mit jahreszeitlichem Bezug (kurz vor Ostern) :lol: :lol:

Los geht’s mit der großen Eierei!!

Aufbereitung der Einzelbilder
Öffne mit Gimp (bzw. dem Programm deiner Wahl) das animierte GIF und speichere jeweils die Frames einzeln ab. Du kannst es mit und ohne dem „feststehenden“ Teil machen. Benenne die einzelnen Bilder ei0.gif bis ei14.gif. Wobei die Datei ei0.gif das Hintergrundbild ohne ein Teil des rollenden Ei's beinhaltet. Die beiden letzten Frames habe ich in diesem Beispiel weggelassen, da dort wenig Bewegung zu sehen ist.

Das folgende Bild zeigt die Anordnung der Bilder. Entsprechend dieser Anordnung muss Nachher auch die Link-Liste erstellt werden.
Bild

Das Grundgerüst
Öffne oder erstelle eine neue Datei. Erstelle ein div. Öffne den CSS-Editor und erstelle folgende Regel:

Code: Alles auswählen

#ei {
border-style: dotted;
border-width: 2px;
width: 382px;
height: 60px;
margin-left: 50px;
position: relative;
background-image: url(ei0.gif);
background-repeat: no-repeat;
top: 50px;
}
Weise dem div die ID #ei zu.
Der Rahmen um das div dient hier nur zur Kenntlichmachung der Außenmaße des div's. Die anderen Werte musst du natürlich an deine Gegebenheiten anpassen.

Erstelle als nächstes eine Liste indem du 14 mal die Zahl eins untereinander schreibst. Markiere die Liste und formatiere sie „hervorgehoben“ (im KompoZer das einfache Ausrufungszeichen). Danach formatierst du sie als „ungeordnete Liste“.
Im CSS-Editor erstellst du die folgende Regeln:

Code: Alles auswählen

#ei ul {
margin: 0;
padding: 0;
}

#ei li {
list-style-type: none;
}
Markiere wieder alle Listenpunkte und erstelle für alle den Link „#nogo“. Für die Link's brauchen wir erst einmal eine allgemeine Regel. Siehe unten:

Code: Alles auswählen

#ei a {
z-index: 100;
position: absolute;
overflow: hidden;
width: 15px;
}
Wie bin ich nun auf die Breite von 15px gekommen?
Das „rollende“ Ei kommt ungefähr bei Pixel 240 zum Liegen. Die GIF-Datei hat 16 Frames vom rollenden Ei. Hier muss ich mit 16 Frames rechnen auch wenn zum Schluss nur 14 Bilder zum Einsatz kommen. 240px / 16 = 15px

So jetzt beginnt die Fleißarbeit – die ist aber per copy und paste schnell erledigt.
Als erstes erstellst du jeweils eine erweiterte Regel für die Links und eine entsprechende Regel für :hover.
Die erweiterte Regel:

Code: Alles auswählen

#ei a#ei1 {
width: 15px;
height: 60px;
top: 0px;
left: 0px;
z-index: 100;
}
Die Regel für :hover

Code: Alles auswählen

#ei a#ei1:hover {
background-image: url(ei1.gif);
background-repeat: no-repeat;
width: 240px;
top: 0px;
left: 0px;
z-index: 50;
}
Diese CSS-Regeln kannst du nun per copy und paste im CSS-Editor einfügen und brauchst nur die Werte entsprechend der Tabelle anzupassen.
Regel Wert Regel Datei
#ei a#ei1 left: 0px; #ei a#ei1:hover url(ei1.gif)
#ei a#ei2 left: 15px; #ei a#ei2:hover url(ei2.gif)
#ei a#ei3 left: 30px; #ei a#ei3:hover url(ei3.gif)
#ei a#ei4 left: 45px; #ei a#ei4:hover url(ei4.gif)
#ei a#ei5 left: 60px; #ei a#ei5:hover url(ei5.gif)
#ei a#ei6 left: 75px; #ei a#ei6:hover url(ei6.gif)
#ei a#ei7 left: 90px; #ei a#ei7:hover url(ei7.gif)
#ei a#ei8 left: 105px; #ei a#ei8:hover url(ei8.gif)
#ei a#ei9 left: 120px; #ei a#ei9:hover url(ei9.gif)
#ei a#ei10 left: 135px; #ei a#ei10:hover url(ei10.gif)
#ei a#ei11 left: 150px; #ei a#ei11:hover url(ei11.gif)
#ei a#ei12 left: 165px; #ei a#ei12:hover url(ei12.gif)
#ei a#ei13 left: 180px; #ei a#ei13:hover url(ei13.gif)
#ei a#ei14 left: 195px; #ei a#ei14:hover url(ei14.gif)
Als nächstes erweiterst du die Regel für die Liste:

Code: Alles auswählen

#ei li {
list-style-type: none;
float: left;      /* neu */
}
Zuletzt „versteckst“ du die Zahlen mit der Regel:

Code: Alles auswählen

em {
display: none;
}
Fertig. Im Anhang noch der komplette CSS- und HTML-Code.
CSS-Code:

Code: Alles auswählen

#ei {
border-style: dotted;
border-width: 2px;
width: 382px;
height: 60px;
margin-left: 50px;
position: relative;
background-image: url(ei0.gif);
background-repeat: no-repeat;
top: 50px;
}
#ei ul {
margin: 0;
padding: 0;
}
#ei li {
list-style-type: none;
float: left;
}
#ei a {
z-index: 100;
position: absolute;
overflow: hidden;
width: 15px;
}
#ei a#ei1 {
width: 15px;
height: 60px;
top: 0px;
left: 0px;
z-index: 100;
}
#ei a#ei2 {
width: 15px;
height: 60px;
top: 0px;
left: 15px;
z-index: 100;
}
#ei a#ei3 {
height: 60px;
width: 15px;
top: 0px;
left: 30px;
z-index: 100;
}
#ei a#ei4 {
height: 60px;
width: 15px;
top: 0px;
left: 45px;
z-index: 100;
}
#ei a#ei5 {
height: 60px;
width: 15px;
top: 0px;
left: 60px;
z-index: 100;
}
#ei a#ei6 {
height: 60px;
width: 15px;
top: 0px;
left: 75px;
z-index: 100;
}
#ei a#ei7 {
height: 60px;
width: 15px;
top: 0px;
left: 90px;
z-index: 100;
}
#ei a#ei8 {
height: 60px;
width: 15px;
top: 0px;
left: 105px;
z-index: 100;
}
#ei a#ei9 {
height: 60px;
width: 15px;
top: 0px;
left: 120px;
z-index: 100;
}
#ei a#ei10 {
height: 60px;
width: 15px;
top: 0px;
left: 135px;
z-index: 100;
}
#ei a#ei11 {
height: 60px;
width: 15px;
top: 0px;
left: 150px;
z-index: 100;
}
#ei a#ei12 {
height: 60px;
width: 15px;
top: 0px;
left: 165px;
z-index: 100;
}
#ei a#ei13 {
height: 60px;
width: 15px;
top: 0px;
left: 180px;
z-index: 100;
}
#ei a#ei14 {
height: 60px;
width: 15px;
top: 0px;
left: 195px;
z-index: 100;
}
#ei a#ei1:hover {
background-image: url(ei1.gif);
background-repeat: no-repeat;
width: 240px;
top: 0px;
left: 0px;
z-index: 50;
}
#ei a#ei2:hover {
background-image: url(ei2.gif);
background-repeat: no-repeat;
width: 240px;
top: 0px;
left: 0px;
z-index: 50;
}
#ei a#ei3:hover {
background-image: url(ei3.gif);
background-repeat: no-repeat;
width: 240px;
top: 0px;
left: 0px;
z-index: 50;
}
#ei a#ei4:hover {
background-image: url(ei4.gif);
background-repeat: no-repeat;
width: 240px;
top: 0px;
left: 0px;
z-index: 50;
}
#ei a#ei5:hover {
background-image: url(ei5.gif);
background-repeat: no-repeat;
width: 240px;
top: 0px;
left: 0px;
z-index: 50;
}
#ei a#ei6:hover {
background-image: url(ei6.gif);
background-repeat: no-repeat;
width: 240px;
top: 0px;
left: 0px;
z-index: 50;
}
#ei a#ei7:hover {
background-image: url(ei7.gif);
background-repeat: no-repeat;
width: 240px;
top: 0px;
left: 0px;
z-index: 50;
}
#ei a#ei8:hover {
background-image: url(ei8.gif);
background-repeat: no-repeat;
width: 240px;
top: 0px;
left: 0px;
z-index: 50;
}
#ei a#ei9:hover {
background-image: url(ei9.gif);
background-repeat: no-repeat;
width: 240px;
top: 0px;
left: 0px;
z-index: 50;
}
#ei a#ei10:hover {
background-image: url(ei10.gif);
background-repeat: no-repeat;
width: 240px;
top: 0px;
left: 0px;
z-index: 50;
}
#ei a#ei11:hover {
background-image: url(ei11.gif);
background-repeat: no-repeat;
width: 240px;
top: 0px;
left: 0px;
z-index: 50;
}
#ei a#ei12:hover {
background-image: url(ei12.gif);
background-repeat: no-repeat;
width: 240px;
top: 0px;
left: 0px;
z-index: 50;
}
#ei a#ei13:hover {
background-image: url(ei13.gif);
background-repeat: no-repeat;
width: 240px;
top: 0px;
left: 0px;
z-index: 50;
}
#ei a#ei14:hover {
background-image: url(ei14.gif);
background-repeat: no-repeat;
width: 260px;
top: 0px;
left: 0px;
z-index: 50;
}
em {
display: none;
}
HTML-Code:

Code: Alles auswählen

<div id="ei"> 
<ul>
<li><a id="ei1" href="#nogo"><em>1</em></a></li>
<li><a id="ei2" href="#nogo"><em>1</em></a></li>
<li><a id="ei3" href="#nogo"><em>1</em></a></li>
<li><a id="ei4" href="#nogo"><em>1</em></a></li>
<li><a id="ei5" href="#nogo"><em>1</em></a></li>
<li><a id="ei6" href="#nogo"><em>1</em></a></li>
<li><a id="ei7" href="#nogo"><em>1</em></a></li>
<li><a id="ei8" href="#nogo"><em>1</em></a></li>
<li><a id="ei9" href="#nogo"><em>1</em></a></li>
<li><a id="ei10" href="#nogo"><em>1</em></a></li>
<li><a id="ei11" href="#nogo"><em>1</em></a></li>
<li><a id="ei12" href="#nogo"><em>1</em></a></li>
<li><a id="ei13" href="#nogo"><em>1</em></a></li>
<li><a id="ei14" href="#nogo"><em>1</em></a></li>
</ul>
</div>
Dieses Tutorial wurde am 21.03.2008 von gimp-michel für KompoZer-Web erstellt.

Antworten