+- Raupyboard (https://www.raupyboard.de)
+-- Forum: Hightech-Portal (https://www.raupyboard.de/forumdisplay.php?fid=78)
+--- Forum: Internet (https://www.raupyboard.de/forumdisplay.php?fid=61)
+--- Thema: [Javascript] Langsames einblenden des Textes (/showthread.php?tid=19944)
[Javascript] Langsames einblenden des Textes - Glurak123 - 05.04.2013
Javascript Tutorial
Heute möchte ich mal ein kleines Tutorial zum Thema "Javascript" machen und zwar wie man einen Text / Überschrift langsam einblenden lässt.
Zuerst brauchen wir ein Div-Container:
PHP-Code:
<div id="text" style="opacity:0.2;"><script>einblenden();</script>Unsere Überschrift</div>
Das "<script>einblenden();</script>" brauchen wir, um den Javascript zu laden wenn das Div geöffnet wird.
Das "opacity" steht für die Transparenz des Divs und das brauchen wir dann in unserem JS - Script.
Als nächstes bindet ihr zwischen "<head></head>" folgende Funktion ein:
PHP-Code:
<script type="text/javascript">
var i = 0; // Die Speichervariable
// Das ist die Funktion mit dem Namen einblenden
function einblenden() {
// Wir prüfen ob der Opacity wert kleiner als 100 ist
if(i < 100){
// Ist das Richtig dann soll es opacity dazu rechnen in 0.1 schritten bei getelementbyid() muss euer Div name rein
document.getElementById('text').style.opacity = i++ / 100;
// Das i++ rechnet immer etwas dazu und das / 100 markiert , das es nur in 0.1 Schritten den Wert erhöhen soll
// Diese Funktion aller 15 Millisekunden wiederholen
setTimeout("einblenden()", 15);
}
}
</script>
// Script ist Beendet
Bei Firefox , Opera und Chrome geht es , ich hänge die HTML Datei noch an den Anhang.