News- bzw. Portfolio-Slider wie auf 3xn.com

Hallo zusammen,

ich möchte einen News- bzw. Portfolio-Slider wie auf www.3xn.com (Startseite) erstellen.
Dieser sollte beim öffnen der Website nach rechts raus "fahren" und anschließende beim Klick
wieder erscheinen.

Kann mir hier jemand weiter helfen bzw. eine Quelle nennen die mir Licht ins Dunkle bringt, bin
gerade föllig überfragt?

Viele Grüße & Dank vorab
Mirko

Hallo Mirko,

so eine Lösung ist sehr individuell, weshalb man hier wahrscheinlich nicht einfach eine Quelle ranziehen kann.

Die Umsetzung erfordert eigentlich nur gut koordinierte CSS Transitions oder Keyframe Animationen und etwas JavaScript. Vom Prinzip her müsste es so ablaufen:

1. Einen Slider ganz normal oben auf der Website einbinden, so wie der spätere Standard Zustand sein wird.
2. Beim Laden der Seite befindet sich am HTML Element eine State Klasse, welche den Slider Absolute über der kompletten Seite anzeigt (hier muss man etwas Tricksen, um keinen Reflow zu erzeugen), und per Keyframe Animation o.ä. nach rechts animiert.
3. Bei Klick auf den Slider am rechten Rand wird eine weitere Zustands Klasse hinzugefügt, die den Slider an seine ursprüngliche/gewünschte Ausgangs Position bewegt.
4. Nach den Animationen sollte man dann alle Zustands Klassen wieder entfernen.

Falls du das Theme DESIGN Plus verwendest, können wir dir bei der Implementierung gerne behilflich sein. Schreib uns in dem Fall gerne an kontakt@think-digital.agency :-)

Liebe Grüße
Raphael

Hallo Raphael,

vielen Dank für Deine ausführliche Antwort.

Viele Grüße
Mirko

Da gab's mal den CarouFredsel-Slider, der hatte soetwas im Script mit dabei.
Ich glaube aber, dass sich rund um die Entwicklung des Sliders in Richtung Lizenzierung bei kommerziellen Projekten einiges getan hat. Und ob das Script dazu noch unter CarouFredsel läuft kann auch nicht beantworten.

Da gab's dazu aber mal eine Erweiterung - dk_caroufredsel ... vielleicht da mal mit den Recherchen anfangen