ComputerBase Menü
Aktuelles

JavaScript Fade Effekt von schwarz nach Bild

T

Timdaroxxa

Lieutenant
Registriert
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
 
hey
danke

irgendiwe funktionierts net, oder ich kapiers net

Kannste mir ma den ganzen Code am Stück hierrein schreiben!
??
 
Der code is genau der selbe wie in deinem link! Nur alles zusammenkopiert und als Js eingebunden
 
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
 
Im Header

<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="fade.js"></script>
Zum Vergrößern anklicken....

Html/Php

<div id='photoholder'>
<img src='<?php echo $bild; ?> ' alt='Photo' id='thephoto' />
</div>
Zum Vergrößern anklicken....

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);
}
}
}
Zum Vergrößern anklicken....

Und das CSS

#photoholder {
width:980px;
height:200px;
background: #000000;
}
#thephoto {
width:980px;
height:200px;
}
Zum Vergrößern anklicken....

Ich glaube ja das ich beim JS net einfach alles zusammenkopieren darf?^^
 
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>
 
<!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>
Zum Vergrößern anklicken....

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?
 
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.
 
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.
 
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?^^
 
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)
 
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
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

Q
[js] Banner rotator mit Fade effekt
Antworten
5
Aufrufe
1.639
quicksilver
Q
FreeLiner_GX
Was für einen Effekt hat Schwarzlicht ?
2
Antworten
20
Aufrufe
11.125
FreeLiner_GX
FreeLiner_GX
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 160 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz