Antworten auf deine Fragen:
Neues Thema erstellen

JQuery Bildwechsel-Effekt mit transparenten Verlauf

eLem3ntx

back again

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
 
Zuletzt bearbeitet:

Duddle

Posting-Frequenz: 14µHz

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

Hat es drauf

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

Aktives Mitglied

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 :)
 
Zuletzt bearbeitet:

cebito

undefined

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.
 
Zuletzt bearbeitet:

eLem3ntx

back again

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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.615
Beiträge
1.538.352
Mitglieder
67.528
Neuestes Mitglied
Links Stream es
Oben