JavaScript Fade Effekt von schwarz nach Bild

Timdaroxxa · 20. Mai 2010

Hey
ich suche ein Script für einen automatischen Fading-Effekt für ein Bild. D.H. das Bild soll nicht einfach erscheinen, sondern sich einblenden und immer sichbarer werden.

Kann jemand ein Script dafür posten oder verlinken? Ich kenn mich damit garnet aus, sonst würde ich es selbst machen ;D

Gruß Tim

CreeTar · 21. Mai 2010

aww, das ein Standard-Theme mit zig tipps im Internet

Hier siehst sehr gut aus
http://clagnut.com/sandbox/imagefades/

machst loading.gif einfach schwarz, there you go

Timdaroxxa · 21. Mai 2010

hey
danke

irgendiwe funktionierts net, oder ich kapiers net

Kannste mir ma den ganzen Code am Stück hierrein schreiben!
??

CreeTar · 22. Mai 2010

gibt mir einfach dein Code und ich schau nach.

Timdaroxxa · 22. Mai 2010

Der code is genau der selbe wie in deinem link! Nur alles zusammenkopiert und als Js eingebunden

HansDampf38 · 22. Mai 2010

Also ich hab mir das mal angeschaut. Du musst wirklich nichts weiter machen als den Code in den Script-Abschnitt deines Headers kopieren. Das solltest du doch wohl alleine schaffen

Code:

<head>
<style type="text/css">
HIER KOMMT DER ANFANG MIT DEM CSS REIN ( was mit einer # anfängt)
</style>
<script type="text/javascript">
HIER KOMMT DER RESTLICHE CODE REIN
</script>
</head>

Du musst natürlich beachten, das dein Bild im passenden Ordner liegt und dass das Script beim Seitenaufruf direkt startet.

Gruß

HD

Timdaroxxa · 22. Mai 2010

Im Header

<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="fade.js"></script>

Html/Php

<div id='photoholder'>
<img src='<?php echo $bild; ?> ' alt='Photo' id='thephoto' />
</div>

Das fade.js

document.write("<style type='text/css'>
#thephoto {visibility:hidden;} </style>");
window.onload = function() {initImage()}
function initImage() {
imageId = 'thephoto';
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = 'visible';
fadeIn(imageId,0);
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999pacity;

// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";

// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;

// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;

// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 10;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
}
}
}

Und das CSS

#photoholder {
width:980px;
height:200px;
background: #000000;
}
#thephoto {
width:980px;
height:200px;
}

Ich glaube ja das ich beim JS net einfach alles zusammenkopieren darf?^^

CreeTar · 22. Mai 2010

hier nochmal komplett als eine Datei. Copy & Paste und abändern.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#photoholder {
	width:450px;
	height:338px;
	border:1px solid #666;
	background:#000000;
}
#thephoto {
	width:450px;
	height:338px;
}
</style>

<script type="text/javascript">
<!--
document.write("<style type='text/css'>#thephoto {visibility:hidden;}</style>");

function initImage() {
	imageId = 'thephoto';
	image = document.getElementById(imageId);
	setOpacity(image, 0);
	image.style.visibility = "visible";
	fadeIn(imageId,0);
}
function fadeIn(objId,opacity) {
	if (document.getElementById) {
		obj = document.getElementById(objId);
		if (opacity <= 100) {
			setOpacity(obj, opacity);
			opacity += 10;
			window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
		}
	}
}
function setOpacity(obj, opacity) {
	opacity = (opacity == 100)?99.999:opacity;
	// IE/Win
	obj.style.filter = "alpha(opacity:"+opacity+")";
	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;
	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;
	// Safari 1.2, newer Firefox and Mozilla, CSS3
	obj.style.opacity = opacity/100;
}
window.onload = function() {initImage()}
// -->
</script><style type="text/css">#thephoto {visibility:hidden;}</style>
</head><body>
<p id="photoholder">
<img style="opacity: 0.99999; visibility: visible;" 
src="Onload%20image%20fades%20without%20Flash%20_%20clagnut_sandbox-Dateien/ithaka.jpg"
 alt="Picturesque fishing village on Ithaka." id="thephoto">
</p>
</body></html>

Timdaroxxa · 22. Mai 2010

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#photoholder {
width:450px;
height:338px;
border:1px solid #666;
background:#000000;
}
#thephoto {
width:450px;
height:338px;
}
</style>

<script type="text/javascript">

</script><style type="text/css">#thephoto {visibility:hidden;}</style>
</head><body>
<p id="photoholder">
<img style="opacity: 0.99999; visibility: visible;"
src="Onload%20image%20fades%20without%20Flash%20_%20clagnut_sandbox-Dateien/ithaka.jpg"
alt="Picturesque fishing village on Ithaka." id="thephoto">
</p>
</body></html>

Funktioniert bestens ;D Danke
Weist du auch wie ich das ganze ein bischen flüssiger bekomme?
Ich hab mal den markierten Teil da oben verändert (1), aber dann dauert es ne Weile bis das Bild sichtbar wird. Kann ich irgendwie die Pausen zwischen den einzelnen "Transparenz-Verminderungs-Schritten" verkürzen?

CreeTar · 22. Mai 2010

es gibt zwei werte, einmal das Timeout und die Erhöhung der Opacity:

Code:

opacity += 10; // erhöhung um 10 
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100); // alle 100ms

Wenn es nicht flüssig genug ist, dann die 100 bei setTimeout anpassen.
jetzt ist es alle 100ms, +10, also nach einer Sekunde ist das Bild da.
sonst machst 50ms +5, dann ists auch nach einer Sekunde da, aber doppelt so flüssig.

QXARE · 22. Mai 2010

In Zeiten von Frameworks empfehl ich dir jQuery (http://jquery.com/). Einfache Handhabung mit großer Wirkung und noch dazu CrossBrowser kompatibel.

Dein Problem würde man dann so lösen:

Code:

$("#thephoto").fadeIn(ms); //ms = Zeit in ms in der das Bild erscheinen soll.

Timdaroxxa · 2. Juni 2010

So
bis jetzt hat alles geklappt!

Aber jetzt würde ich den Fade-Effekt gerne als Hintergrund benützen (background-image:url(meinBildmitFade.png);

Wies jemand wie ich des mach?^^

CreeTar · 3. Juni 2010

da du's ja lernen sollst ^^ geb ich dir nur mal einen Tip,
das Bild ist in einem IMG-Tag und wird über die ID gefunden,
du musst es nun nur in den Body-Tag und die ID gleich lassen.
Allerdings weiß ich nicht ob das so gut aussieht ^^ musst mal
testen.
Bei Probleme kannst hier für Body unter HTML und für background-image
unter CSS nachschauen:
http://de.selfhtml.org/ (am besten den Syntaxverzeichnis benutzen zum Suchen)

Timdaroxxa · 3. Juni 2010

Ich meinte als Hintergrund Von einem Div

Und wenn du den Code schnell veraendern kannst, dann tu es, den MIT der Loesung hab ich bis her alles am besten gelernt

Ansonsten kapier ich bis jetzt noch net wirklich wie du das meinst

Gruss Tim

Suche

JavaScript Fade Effekt von schwarz nach Bild

Timdaroxxa

Lieutenant

CreeTar

Cadet 4th Year

Timdaroxxa

Lieutenant

CreeTar

Cadet 4th Year

Timdaroxxa

Lieutenant

HansDampf38

Lt. Junior Grade

Timdaroxxa

Lieutenant

CreeTar

Cadet 4th Year

Timdaroxxa

Lieutenant

CreeTar

Cadet 4th Year

QXARE

Lt. Commander

Timdaroxxa

Lieutenant

CreeTar

Cadet 4th Year

Timdaroxxa

Lieutenant

Ähnliche Themen