Dauerhafter FadeOut und FadeIn

DarkRaver

DarkRaver

Erfahrenes Mitglied
Hallo!
Ich brauche ein Javascript, welches ermöglicht dass ein Bild die ganze Zeit über immer ein FadeOut bzw. FadeIn hat. Also über ein Bild soll ein neues gelegt werden, über dieses dann wieder ein neues und über das wiedderum dann wieder das erste. Ist so etwas realisierbar? Ich habe im Internet nur FadeOuts und FadeIns gesehen die einen Hover-FadeIn aufrufen. Da ich leider kein Javascript kann, würde ich mich über ein paar Ansätze freuen. Aber ich bin auf jeden fall lernwillig ;)

Vielen Dank schon einmal im voraus.
 
Also ich setzte jetzt mal die jQuery-Bilbliothek vorraus. Ich nutze sie aber hier nur für den fade-Effekt. Alles andere werde ich ohne jQuery machen, um es möglichst offen zu halten.

Die meiner Meinung nach beste Lösung dafür ist es alle Bilder in eines zu Stecken und nur das Hintergrundbild zu verschieben. Aber das hat natürlich seine Grenzen wenn es sehr viele Bilder sind, denn dann wird die einzelne Datei sehr groß. Die Vorteile sind aber
1. Man müsst sich keine Gedanken darum machen, wie viele Bilder es sind und wann man von vorne beginnen muss, sondern das erledigt der sich wiederholende Hintergrund.
2. Wenn das Bild einmal übertragen ist muss nichts mehr nachgeladen werden.

CSS: 
#container {
	width:500px;
	height:250px;
	background-image:url(bild.jpg);
	background-repeat:repeat-y;
	background-position:0px 0px;
}

HTML: 
<div id="container"></div>

Javascript: 
window.onload = function() {
	var pos = 0;

	var container = document.getElementById("container");
	
	window.setInterval(function() {
	    $(container).fadeOut("slow", function() {
	        pos += 250;
	        this.style.backgroundPosition = "0px " + pos + "px"; 
	        $(this).fadeIn("slow");
	    });
	}, 3000);
};

Hier live zu sehen: http://www.cpoly-design.de/fade/fade.html
 
Hey, danke für die Schnelle Antwort. Es handelt sich um folgendes:
Ich möchte ein Bild haben, welches sich farblich(Übergänge per PS gemacht, daher nicht anders als Javascript oder Flash möglich) ändern soll. Hierzu habe ich, wie eben in den Klammern schon erwähnt, 3 Bilder. Eins Original, und zwei andersfarbige. Diese sollen sich also in einer Schleife immer abwechseln sodass ein "Schimmer" Effekt entsteht. Dh. Langsames Faden und wenn das Faden erledigt ist soll nach ca. einer halben Sekunde das nächste Bild reinfaden. Natürlich sollen die Bilder erst dann weggehen, wenn der Fade-Vorgang abgeschlossen ist, sodass kein weiß oder so entsteht, so wie es bei dir zu sehen ist. Trotzdem vielen dank für die schnelle Antwort.
 
Zuletzt bearbeitet:
DarkRaver hat gesagt.:
und wenn das Faden erledigt ist soll nach ca. einer halben Sekunde das nächste Bild reinfaden. Natürlich sollen die Bilder erst dann weggehen, wenn der Fade-Vorgang abgeschlossen ist, sodass kein weiß oder so entsteht, so wie es bei dir zu sehen ist.
Zum Vergrößern anklicken....

Du schreibst, dass das Bild erst einfaden soll, wenn das andere Weg ist. Was soll denn anstelle von weiß zu sehen sein?

Das müsste jetzt natürlich anders aufgebaut werden. Z-Index und Absolute Positionierung werden hier wohl helfen.
 
Quaese hat gesagt.:
Hi,

ich hätte hier ein Beispiel ohne jQuery.

Ciao
Quaese
Zum Vergrößern anklicken....

Hey, genau das ist soetwas wie ich haben möchte. Ich habe nun versucht es einzubinden mit dem JS Code (url: http://kd10502web.os.gs/css/inc/_templates_/SucceZ/_js/fade.js) und das hier im HTML Code mit drin:
<script type="text/javascript" src="[dir]/_js/jquery.js"></script>
<script type="text/javascript" src="[dir]/_js/fade.js"></script>
Nicht wundern, [dir] gibt in dem falle den Pfad bis "http://kd10502web.os.gs/css/inc/_templates_/SucceZ/" an, also das stimmt soweit.
Also jQuery ist eingebunden, das fade an sich auch aber funktionieren tut es trotzdem nicht. Woran könnte es jetzt liegen?
Der DIV-Container ist so eingebunden wie ein normaler DIV halt:
<div id="clanlogo"></div>

Ich hoffe ihr könnt mir helfen genau das hier zum laufen zu bringen.
Dankeschön schonmal im voraus.
 
Hi,

ersetz mal folgenden Teil
Code: 
window.onload = function(){
  objFader = Fader({
  id: "clanlogo",  // ID des Holderelements
  imgs: arrImgs,     // Array der Bildquellen (src)
  w: 358,            // (integer, optional) Breite der Bilder
  h: 152,            // (integer, optional) H?he der Bilder
  timer: 2000,       // (integer, optional) Zeit zwischen den Fade-Vorg?ngen
  delay: 10,         // (integer, optional) Geschwindigkeit des Fadevorgangs (kleiner = schneller)
  step: 0.01,        // (float, optional) Schrittweite beim Faden (gr?sser = schneller)
  cls_img: 'my_img'  // (string, optional) CSS-Klasse zum Auszeichnen der Bilder
  });
};
durch
Code: 
$(function(){
  objFader = Fader({
  id: "clanlogo",  // ID des Holderelements
  imgs: arrImgs,     // Array der Bildquellen (src)
  w: 358,            // (integer, optional) Breite der Bilder
  h: 152,            // (integer, optional) H?he der Bilder
  timer: 2000,       // (integer, optional) Zeit zwischen den Fade-Vorg?ngen
  delay: 10,         // (integer, optional) Geschwindigkeit des Fadevorgangs (kleiner = schneller)
  step: 0.01,        // (float, optional) Schrittweite beim Faden (gr?sser = schneller)
  cls_img: 'my_img'  // (string, optional) CSS-Klasse zum Auszeichnen der Bilder
  });
});
Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück