atom feedEin kleiner Rückblick auf musikundso.ch
musikundso.ch entstand im Jahr 2000. Das Seitenlayout war wie damals üblich in Framesets beschrieben. Das sind eigene Html-Seiten zur Koordination der Kopf-, Seiten- und Fussbereiche. 2004 trennte ich die Layouts vom Html-Bereich und startete ein Cascade Style Sheet (CSS). CSS vereinfacht die Beschreibung der Frames, Fonts und Textaufteilungen und erweitert die Möglichkeiten zur Gestaltung von Internetseiten. 2015 setzte ich in musikundso.ch meinen Blog auf.
Das Musikundsointro wählte ich als Blickfang beim Öffnen. Die Animation zeigt ein sich horizontal drehendes Bild. Dabei wandert der Schriftzug und wechselt die Farbe von weiss nach rot. Die Animation entstand auch 2004.
CSS-Animation löst Flashanimation ab
Shockwave-Flash ist ein Trickfilmformat von Adobe. Zur Programmierung braucht es das Programm "Adobe Flash". Die Filmdaten liegen im Shockwaveformat-File (SWF). Zum Abspielen braucht der Browser ein Flashplugin. Adobe bemüht sich immer wieder auftretende Sicherheitslücken des SWF-Formats zu beheben.
Ein anderer Weg zur Animation von Webseiten ermöglicht seit 2007 ein Animationsmodul das in CSS3 eingeschrieben ist. Animationen auf Internetseiten waren bis in die 2000 Jahre nur mit Javascript möglich. Ab 2000 etablierten sich Flashanimationen. Seit der Einführung von CSS-Animationen verdrängen diese das Flashformat immer mehr. Anwendungen von CSS-Animationen reichen von sich einschiebenden Infobannern bis zu ganzen Trickseqeunzen. Die einfachen Regelbeschreibungen der Animationen und deren Verwendung im bestehenden CSS-Code begünstigten die Verbreigung der neuen Technik.
Das musikundso-intro
Die Vorgaben für das musikundso-intro waren:
Das Shokwave-File spielt Ton und Film gleichzeitig ab. Das Format ist geignet zur Realisierung von Trickfilmen mit Ton. CSS beschränkt sich auf die Animation. Der Ton wird über den html-code aufgerufen. Eine Synchronisation ist im Gegensatz zu Shokwave-Animationen nur sehr rudimentät möglich.
<audio autoplay> <source src="media/file.ogg" > <source src="media/file.mp3" > Your browser does not support the audio element. </audio> Die CSS informationen habe ich auf der html-seite in einen styletag gesetzt. Dies ist eine Möglichkeit ein externes CSS-File zu umgehen. Der styletag umrahmt die Information zu den grafischen Elementen der Seite. Dies wären hier die Hintergrundfarbe, die Schriften und eben die musikundso-animation.
body {
background-color:#E0E0E0;
}
headerinfo,
#header {
position:relative;
width:900px;
height:400px;
overflow:hidden;
margin:50px auto; /*margin:70px auto postionier immer in der
mitte des fensters. das problem ist dann die table mit der
schrift die auch eine auto positionierung verlangt.*/
}
infos zur vorder und rückseite,
.front {
width:80%;
hight: 80%;
left: 10%;
top: 10%;
animation:front 2s , 2s ease-out 0s 1 front;
animation-fill-mode: forwards;
}
.back {
width:80%;
hight: 80%;
left: 10%;
top: 10%;
animation:back 6s ; 6s ease-out 0s 1 back;
animation-fill-mode: backwards;
animation-delay: 2s
}
die infos zur perspektivischen Drehung
@keyframes front {
100% { transform: perspective(800px) rotateX(-90deg) translateY(0); }
0% { transform: perspective(0px) rotateX(0deg) translateY(0); }
}
@keyframes back {
0% { transform: perspective(800px) rotateX(-90deg) translateY(0); }
100% { transform: perspective(0px) rotateX(0deg) translateY(0); }
}
und zum Schluss die Fontinformationen.
.lesen {
font-size: 14px;
color: #666666;
line-height: 18px;
font-family: Verdana,Arial,Helvetica;
overflow: auto;
}
.text {
font-weight:bold;
font-size: 25px;
color: #666666;
line-height: 25px;
font-family: Courier New,Courier,Monaco,monospace;
}
Der oben abgebildete Code kann auch im Browser über die Entwicklerumgebeung aufgerufen werden. Im Chrombrowser zum Beispiel unter dem Menu "Anzeigen" -> "Entwickler" -> "Quelltext anzeigen" oder mit dem Tastenkürzel "alt+cmd+u".
Die CSS-Animation hat auch eine Einschränkung. Auf Browsern vor 2007, solchen ohne CSS3 spezifikation laufen die CSS-Animationen nicht. Eine noch ältere Animationstechnik, das Grafikformat Gif aus dem Jahr 1987 könnte hier einspringen. Gif - Animationen sind einfache Bewegtbilder. Die Bildsequenz läuft nach dem laden einfach oder infinit ab, je nach Vorgabe.