Animationen

Animationen mit CSS

Ja ja, CSS3 kommt mit Eigenschaften zur Animation daher, die bisher nur mit JavaScript zu erledigen waren. Als „Animation“ benannt, sind bisher transition:, animation: und @keyframes Bestandteil des CSS3. Das gilt ebenso für transform: als Mittel.
Da ich kein Freund des aufdringlichen Flashs bin oder nerviger Hintergrundmusik, stellen dezente kleine Animationen für mich aufmerksamkeitssteigernde Hingucker dar. Sie sollten somit als Randerscheinungen und nicht ablenkend in Erscheinung treten (möglichst!!!).

Spielfeld

Die Steuerung der einzelnen Animationen soll hier nicht erklärt sein. Sowas wird ansonsten niemand anwenden. Ich bilde lediglich PHP switch() für den aufgerufenen Fall für case 0: ab. Was folgt, bedarf vielleicht etwas scrollen bis Ende Thema.

Beispiel: 0 für „Spielfeld “ :

02
03
04
05
06
07


 case 0:
 // wenn noch nichts ausgewählt
 $temp = "Spielfeld" ;
 $element = "<div class='start'>$temp</div>" ;
 $von = 2 ; $bis = 7 ; // nur zur Abbildung dieses Auszuges
 break;

Der Auszug dieser Seite für die echo-Ausgabe der Variablen $element

87
88
89


 <div id="spielcontain"><div id="spielfeld">

  <?php echo $element; ?>

 </div></div>

Externe CSS für spielcontain und spielfeld sowie weitere zugehörige Eigenschaften aus der Formularwahl

01
02
03
04
05


#spielcontain { position: relative; z-index: 1; top: 0; left: 300px; width: 580px; height: 220px; 
  margin-bottom: 12px; margin-left: 10px; border-color: #fff #abe #abe #fff; 
  border-style: solid; border-width: 1px; }
#spielfeld { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip: rect(0 580px 220px 0); }
/*  + + + danach folgen entsprechend angepasste CSS-Auszüge der Datei + + + */

06
07
08
09
10
11
12



#spielfeld .start { color: #0b4f82; font-size: 48px; font-family: AmericanTypewriterM; 
  position: absolute; left: 50%; width: 540px; margin-top: 40px; margin-left: -270px; 
  padding-left: 0; 
  display: inline-block;
  text-align: center;    
 }

Hier ist das ScrollEnde für dieses Thema!

Auch sogenannte „TOOLTIPS“, die ich als Infoboxen beschreibe unter: Event-Handler Durch Überfahren mit der Maus wird der Hover-Effekt ausgelöst und dieser Text sichtbar. werden mit ähnlichen Möglichkeiten auch durch CSS-Eigenschaften erreicht! N U R das Ding hängt statisch links aussen und ist ohne JavaScript zum Nachrücken über die Textstelle, wenigstens genähert, unbrauchbar. Kommt es innerhalb eines langen Textabsatzes vor, besteht die Wahrscheinlichkeit, dass die Anzeige außerhalb des sichtbaren Bereiches angezeigt wird. Na toll !!!
Ohne CSS geht natürlich nichts, aber mittels JavaScript dies zu positionieren gehe ich unter: Event-Handler darauf ein.
Wo hier das span-Element bottom: 1em unten mit Abstand platziert oder top: 0 oben platziert erscheint, hängt von der Höhe des Absatzes also der Höhe des ElternElementes ab.
Diesen Absatz habe ich bewusst in der Breite verringert!

Hier kommt noch mehr - ist alles nur im Ansatz in noch nicht ausgereiften Arbeiten!