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

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • 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: thijsvisser.nl/
    Und das ist der Wiki-Eintrag, aber ich denke das ganze muss irgendwie modifiziert werden: 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!

  • 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.

    Quellcode

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


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

  • Mir ist total schleierhaft, wie ich das anstellen soll ;(

    Quellcode

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


    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