 | Wichtig!: |
Dieser Effekt läuft in allen von mir getesteten Browsern (FF, IE, Opera, Safari und Google Chrome [Danke an Jeff]) und es ist ein anderer als der, der hier in einem anderen Tut auf Giatu vorgestellt wurde!
Im folgenden Tutorial möchte ich euch den Gradual Fader von DynamicDrive erklären. Im Wishbook stand ein Wunsch dazu und ich dachte mal, da es bei mir einwandfrei klappt ;)
Hier die Seite mit der DemoIch weiß, dass damit dieses Tutorial eigentlich überflüssig wäre, aber da es auch Leute gibt, die nicht gut Englisch verstehen, dachte ich mir, ich schreibe mal ein Tutorial dazu.
Zunächst braucht ihr das Javascript (
hier) von DynamicDrive. (Am besten mit Rechtsklick und Ziel Speichern Unter!)
Dann müsst ihr folgenden Code in die
Head-Sektion (Also zwischen dem <head> und dem </head>-Tag) einfügen:
<script type="text/javascript" src="gradualfader.js">
/***********************************************
* Gradual Element Fader- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>Der Text in der Mitte muss erhalten bleiben, so macht ihr Promotion für die Seite, dafür kann sie ihre Dienste kostenfrei anbieten :) Nur so am Rande xD
Um das Skript nun vollständig funktionsbereit zu machen, müsst ihr folgendes genau über dem </body>-Tag einfügen:
<script type="text/javascript">
gradualFader.init() //activate gradual fader
</script>Damit kanns dann auch schon losgehen mit dem Anwenden.
Aufgerufen wird nun das Faden mit der Klasse
gradualfader. Es kann daher wiefolgt angewendet werden (unter Anderem):
<img src="test.gif" class="gradualfader" border="0" alt="" />Hier wird das Bild test.gif gefadet.
<div class="gradualfader">Test Text</div>Hier wird eine Divbox mit Inhalt gefadet.
<div class="gradualfader"><img src="test.gif" border="0" alt="" />Hier wird eine Divbox mit grafischem Inhalt gefadet.
Nur als Beispiele. Also merke:
Immer schön die class=gradualfader verwenden, wenn ihr den Effekt erziehlen wollt!Nun könnt ihr euch auch noch daran machen die Deckkräfte (opacity) zu ändern. Öffnet dazu die gradualfader.js-Datei und schaut in die 6te und 7te Zeile.
Dort steht:
gradualFader.baseopacity=0.4 //set base opacity when mouse isn′t over element (decimal below 1)
gradualFader.increment=0.2 //amount of opacity to increase after each iteration (suggestion: 0.1 or 0.2)gradualFader.baseopacity bestimmt wie das Bild oder die Box von der Deckkraft her ausschaut wenn man nicht mit der Maus darauf zeigt, also ohne Hover. In diesem Fall 0,4 also 40%. 0 ist komplett durchsichtig, 1 komplett sichtbar.
gradualFader.increment bestimmt wie schnell das Bild fadet. Je höher desto schneller :)
Auf DynamicDrive sind noch einige Kniffe beschrieben, die man besonders für den IE braucht, damit dieses Skript funktioniert.
Der Effekt läuft nämlich nicht, wenn das Objekt, dem er zugeschrieben kein Layout hat wie es genannt wird. Layout heißt in diesem Fall, dass es eines der folgenden Attribute benötigt:
- width und/oder height
- display: inline-block
- position: absolute
- float
- table
Das Skript benötigt also eine spezifische Weite oder Höhe, eine Anzeige, eine Position, einen Fluss oder wenn es eine Tabelle ist.
| Wichtig!: |
Wenn ihr das Layout hochladen wollt, MUSS die gradualfader.js auch auf eurem Webspace sein und ihr müsst sie im head-Bereich des Layout korrekt verlinken! Sonst funktioniert es nicht!
Soweit wars das. Bei mir klappts einwandfrei. Bei Fragen bitte ein Kommentar oder eine Nachricht ;)
Anzeigen
Ich krieg sie auch nicht mehr rein!
endlich ein gradual element fader der auch in firefox und anderen Browsern außer IE funzt...
Flügel
Ganz gutes Tutorial ;) Steht halt alles noch genauer auf der Seite von DynamicDrive bzw. dem Coder. Aber für einige ist das besitmmt hier angenehmer.Nur: wenn du schon XHTML verwendest, dann bitte auch richtig. class="gradualfader", alt="", src="test.gif", ...
SelfHTML