Webseite, Bild einblenden nach einigen Sekunden
Hi will auf einer Webseite ein Bild einbinden, aber es soll nicht von beginn an da sein sondern sich z.B. nach 10Sekunden leicht einblenden. Hab schon mir nen Script gebastelt:
function picture(){
document.getElementById("zeitaus").innerHTML = '<img src="/files/6185/style/img/Foto_Sonderspeicher_frei.png" />';
}
window.setTimeout( "picture()", 12000);
Aber bei diesem Beispiel kommt das Bild nach Sekunden blendet sich aber nix ein. Kann mir da jemand weiter helfen? Würde mich über Code Beispiele oder Links freuen.
4 Antworten
Alles nur mit reinem JavaScript und ohne externe Library, wie z.B. jQuery. Das Script besteht aus einer fadeIn-Funktion, der du das Element übergibst, welches du einblenden willst (Funktioniert mit jedem DOM-Element)., der 2te Parameter sind die Millisekunden, wie schnell das Bild einblenden soll.
fadeIn():
function fadeIn( elem, ms )
{
if( ! elem )
return;
elem.style.opacity = 0;
elem.style.filter = "alpha(opacity=0)";
elem.style.display = "inline-block";
elem.style.visibility = "visible";
if( ms )
{
var opacity = 0;
var timer = setInterval( function() {
opacity += 50 / ms;
if( opacity >= 1 )
{
clearInterval(timer);
opacity = 1;
}
elem.style.opacity = opacity;
elem.style.filter = "alpha(opacity=" + opacity * 100 + ")";
}, 50 );
}
else
{
elem.style.opacity = 1;
elem.style.filter = "alpha(opacity=1)";
}
}
Damit das Bild jetzt nach 10 Sekunden langsam eingeblendet wird, machst du folgendes: ("img" wäre in dem Fall die ID deines Bildes)
window.setTimeout(function() {
var elem = document.getElementById("img");
fadeIn(elem, 1000);
}, 10000);
Im obigen Beispiel wird dein Bild nach 10 Sekunden eingeblendet. Das Einblenden dauert 1 Sekunde.
mfg
Wenn der Benutzer keine super alten Browser nutzt, dann bin ich mehr der Freund von CSS als von JavaScript, was ja bei einigen Browsern deaktiviert ist.
<div class="test">
</div>
<style type="text/css">
.test {
position: fixed;
left: 100px;
top: 100px;
width: 200px;
height: 200px;
background-color: #333;
-moz-transition: all 1s ease 0s;
-webkit-transition: all 1s ease 0s;
-o-transition: all 1s ease 0s;
-ms-transition: all 1s ease 0s;
-webkit-transition-delay: 3s;
transition-delay: 3s;
}
kannst natürlich das div auch mit einen vild bestücken oder andere einblendeffekte nutzen: background-image: url(https://lh6.googleusercontent.com/-q29LBsxfSOk/AAAAAAAAAAI/AAAAAAAAA8w/f1xclqbMelg/photo.jpg);
Da müsstest du schon den kompletten Quelltext posten. Das HTML-Element mit der ID "zeitaus" fehlt. Was gibt denn die JavaScript Fehlerkonsole aus?
Dafür solltest du ein Framework nehmen. Zum Beispiel script.aculo.us. Hab dir mal die entsprechende Funktion rausgesucht: http://madrobby.github.io/scriptaculous/effect-appear/
In die DIV Box packst du das Bild. Per CSS die Box auf display:none setzen, damit sie von Anfang an erstmal unsichtbar ist. Anschließend zeitverzögert den Effekt starten. Müsste so aussehen:
window.setTimeout( "$('appear_demo').appear();", 12000);
Hallo Kevin,
so einen Effekt, den du gerne haben möchtest, ist sehr schwer mit JavaScript umzusetzen. Nutze am besten einfach eine Library, die diesen Effekt bereits beinhaltet.
Spontan fällt mir da jQuery ein, die kannst du einbinden und dann ein eigenes Script als "Addon" einbinden, dass die Funktion von der Library nutzt. Das Beispiel macht das alles klarer:
Funktion:
<script>
$('img').hide().one("load",function(){
$(this).delay(10000).fadeIn(2000);
}).each(function(){
if(this.complete) $(this).trigger("load");
});
</script>
jQeury:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script
Viel Spaß damit!
Es gibt ja kein Fehler also es klappt mit dem Code alles. Aber ich weiß nicht wie ich es machen kann das es sich so leicht einblendet also animiert erscheint, weil so ist das Bild z.B. nach 10Sekunden sofort da aber blendet sich nicht so ein.