Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
[Javascript] Langsames einblenden des Textes
Beitrag: #1
vom - [Javascript] Langsames einblenden des Textes
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 
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(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.
(Dieser Beitrag wurde zuletzt bearbeitet: 05.04.2013, 22:09 von Glurak123. )


Angehängte Dateien
.html   text.html (Größe: 674 Bytes / Downloads: 13)
[Bild: title.png]

You love Music ? Check out BrowserSound and find your Music everyday.
Du liebst Musik ? Dann komme zu BrowserSound und finde deine Musik jeden Tag.

BrowserSound
Suchen
Zitieren



Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste