JQuery Bildwechsel-Effekt mit transparenten Verlauf

[eLem3ntx]

Hallo PSD'ler

Ich suche ein JQery Slide Effekt, der nach und nach durch ein Array von Bildern wechselt, jedoch mit dem Effekt, dass das nächste Bild sich über dem anderem aufbaut.
Dies soll in eine Rutsch am besten von links nach rechts passieren.
An sich ist das kein Problem und mit JQuery auch einfach zu realisieren, wäre da nicht das Problem mit dem "transparenten Verlauf".
Denn es soll bei dem Effekt keine harte Kante geben sondern ein weicher Verlauf.

[ Link entfernt ]

Vielen Dank im Voraus
Marc

 

[Duddle]

AW: JQuery Bildwechsel-Effekt mit transparenten Verlauf

Ich behaupte, das ist nicht möglich. jQuery kann nur auf Eigenschaften zugreifen und sie verändern, die vom Browser in Form von HTML- oder CSS-Mitteln angeboten werden.

Die auf Webkit basierten Browser (Chrome und Safari) haben zwar das -webkit-mask-Attribut, mit dem man mglw. deinen Wunsch umsetzen könnte - aber eben nur diese Browser. Alle Anderen haben keine Möglichkeiten, Teile von Elementen auszublenden.

Du könntest also entweder zu Flash o.ä. greifen, oder deine Wunsch-Features zurück schrauben.


Duddle

 

[Myhar]

AW: JQuery Bildwechsel-Effekt mit transparenten Verlauf

Theoretisch hast du Recht Duddle.
Es gibt jedoch Leute, die sich die Mühe gemacht haben, solche speziellen Fade-Effekte in jQuery zu realisieren. Teilweise wird hier das Bild in viele einzelne Divs gelegt und dann jedes Div seperat ausgeblendet. Gibt sicher auch andere Techniken, einfach mal die Codes ansehen. Mir wäre so etwas zu viel Arbeit, es selber zu realisieren.
Findet man auch recht schnell, wenn man nach "jQuery fading image" oder ähnlichem sucht.
So habe ich nach 10 sek folgende Beispiele gefunden:
8 jQuery image sliders
23 jQuery Fade in Fade out Effect

Da muss etwas brauchbares dabei sein.

 

[exo]

AW: JQuery Bildwechsel-Effekt mit transparenten Verlauf

Ich glaub dafür kannst du ganz einfach jedes x-beliebige jquery Slider-plugin benutzen (zb. den populären nivo-slider).

Oder auch mit jQuery Board-mitteln z.b.: http://api.jquery.com/fadeIn/


Hier hast du schonmal ein kleines, aber gutes Beispiel was geht:
http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/

Dort wird jedoch noch nicht von links nach rechts gefaded, sondern nur komplett, aber ist ja alles relativ anpassbar

 

[cebito]

AW: JQuery Bildwechsel-Effekt mit transparenten Verlauf

Hier als Beispiel aus dem Netzt...

Bitte nur Links posten wenn die Bilder nicht von dir sind, nicht irgendwas einfach kopieren und ins Forum stellen!

Du könntest also entweder zu Flash o.ä. greifen, oder deine Wunsch-Features zurück schrauben.

Ich schätze mal mit "o.ä." meinst du bspw. das HTML5-Canvas, damit, und mit JavaScript/jQuery ließe sich das sicherlich auch realisieren. Bleibt die Frage, welche Browsergenerationen der TE abdecken will/muss.

 

[eLem3ntx]

AW: JQuery Bildwechsel-Effekt mit transparenten Verlauf

Okay erstmal danke für die schnellen Antworten
Wie bereits von euch erwähnt, bin ich schlussendlich bei den JQuery Slidern liegen geblieben und habe das Bild einfach in sehr viele "Slices" gesteckt, die dann nach und nach einfaden und das neue Bild überdecken.
Diese Methode war mir bereits schon vorher bewusst, jedoch wollte ich schließlich einen sanften Verlauf haben ohne das Bild zu stark aufteilen zu müssen, da z.B. ältere Rechner mit zu vielen Javascript Animationen Probleme haben.

Trotzdem vielen Dank für eure Unterstützung.
Ich habe tatsächlich den Nivo-Slider, mit dem "sliceDown" Effect genutzt. Das Bild habe ich dann in 50 Streifen geschnitten, die nach und nach einblenden.

Und sorry für das Bild aus dem Netz, wird gleich entfernt

Viele Grüße und ein Dankeschön
Marc