Prototype/Script.aculo.us Background Image Fade (In) Effect

VOLKAN

Trainee

Posts: 18

Monday, April 20th 2009, 9:02pm

Prototype/Script.aculo.us Background Image Fade (In) Effect

Hallo Gemeinde!
Bräuchte mal wieder euere Hilfe

Hab auf einer Webseite einen netten Hintergrund Image-Fade-Effect entdeckt den ich gerne selbst benutzen möchte.
Das Problem ist, bei mir läuft alles über Prototype, der nette Herr arbeitet aber mit JQuery. Hab danach gegooglet, aber nichts entdeckt, ausser einen Wiki-Eintrag bei Script.aculo.us

Das ist der Effekt, denn ich gerne benutzen würde: http://www.thijsvisser.nl/
Und das ist der Wiki-Eintrag, aber ich denke das ganze muss irgendwie modifiziert werden: http://wiki.github.com/madrobby/scriptaculous/effect-fade

Oder wenn ihr eine möglichkeit kennt/wisst, wie ich das ganze ohne diese Frameworks schaffe, sprich mit kleinen JS Script, wäre ich auch dankbar.

Danke Leute!

Snowflake

Professional

Posts: 370

Monday, April 20th 2009, 10:22pm

Hey
Wenn du das ganze ohne Framework machen willst, kannst du dir ein kleines Script basteln, dass die opacity eines Elements mit einem timeout erhöht.

Ich würd den Script.acolo.us Appear Effekt auf ein Element (mit der Grafik die erscheinen soll) anwenden. Das ganze macht er ja auch.

	HTML Code
1 2 3 4	<body> <div id="one"></div> <div id="two"></div> <div id="content">

Und dann lässt er die opacity von dem Element Two langsam ansteigen. (scriptacolous Apper Effekt bei ihm halt Jquery)

VOLKAN

Trainee

Posts: 18

Monday, April 20th 2009, 10:45pm

Mir ist total schleierhaft, wie ich das anstellen soll

JavaScript Code

$(function() {
	$('#two').css('opacity',0);			
	var img = new Image();
 
	$(img).load(function(){		
		$('#two').fadeTo(1250,1).css('visibility','visible');
	}).attr('src','http://link.zum.hintergrund.bild.jpg');
 
});

So sieht seine background.js aus. Kann ich das vielleicht mit dem scriptacolous Apper Effekt verbinden?
Wüßte ehrlich gesagt nicht wie ich das anstellen soll.

Lg