JavaScript Fade Effekt von schwarz nach Bild

Timdaroxxa

Lieutenant
Dabei seit
März 2009
Beiträge
954
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
 

Timdaroxxa

Lieutenant
Ersteller dieses Themas
Dabei seit
März 2009
Beiträge
954
hey
danke

irgendiwe funktionierts net, oder ich kapiers net

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

Timdaroxxa

Lieutenant
Ersteller dieses Themas
Dabei seit
März 2009
Beiträge
954
Der code is genau der selbe wie in deinem link! Nur alles zusammenkopiert und als Js eingebunden
 

HansDampf38

Lt. Junior Grade
Dabei seit
Jan. 2008
Beiträge
381
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 :D
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

Lieutenant
Ersteller dieses Themas
Dabei seit
März 2009
Beiträge
954
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.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;
}
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

Cadet 4th Year
Dabei seit
Mai 2007
Beiträge
121
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

Lieutenant
Ersteller dieses Themas
Dabei seit
März 2009
Beiträge
954
<!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>
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

Cadet 4th Year
Dabei seit
Mai 2007
Beiträge
121
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

Lt. Commander
Dabei seit
Aug. 2008
Beiträge
1.340
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

Lieutenant
Ersteller dieses Themas
Dabei seit
März 2009
Beiträge
954
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

Cadet 4th Year
Dabei seit
Mai 2007
Beiträge
121
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

Lieutenant
Ersteller dieses Themas
Dabei seit
März 2009
Beiträge
954
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
 
Top