Page Transition

[louthi]

Hallo an alle!

suche für Contao ein Modul, ähnlich wie es dieses schon für WP gibt. Ich möchte gerne Seitenübergänge mit Animsition (Page Transition) animieren .
Oder kann mir jemand dabei helfen, wie ich solche Funktionen in Contao einbauen kann, vielleicht ist das ja ganz einfach.

Danke vorab schon mal für die Hilfe!

[Spooky]

Probier's mal mit https://github.com/miguel-perez/smoothState.js - nur leider ist die Demo und Documentation site nicht erreichbar.

[Samuell]

Wenn ich das hier richtig sehe: http://git.blivesta.com/animsition/

mußt Du dem Wrapper in fe_page ne Klasse mitgeben (animsition) und das Navigationstemplate so bearbeiten, dass Du jeden Link um eine Klasse (animsition-link) erweiterst.
Hab ich allerdings selbst noch nicht getestet.

[Spooky]

Bei der Initialisierung kann man den Selektor auch festlegen, muss nicht unbedingt .animisition-link sein.

[louthi]

danke für die interessanten Infos. Werde die nun testen, bin gespannt ... Melde mich wieder, wenn es funktioniert hat.

[louthi]

Bei der Initialisierung kann man den Selektor auch festlegen, muss nicht unbedingt .animisition-link sein.

So, da bin ich wieder. Habe das Thema die ganze Zeit nicht testen können. Ein Problem habe ich, was meinst Du mit "Initialisierung kann man den Selektor ..."
Stelle mich wahrscheinlich etwas ungeschickt an, ich komme nicht drauf

[Spooky]

Hm, ich weiß eigentlich auch nicht mehr was ich damit gemeint habe . Wo genau haperts? Hast du dir die Dokumentation angesehen?

[louthi]

Hm, ich weiß eigentlich auch nicht mehr was ich damit gemeint habe . Wo genau haperts? Hast du dir die Dokumentation angesehen?

es hapert eigentlich nur daran, dass ich leider nicht weiß, wie ich im Navigationstemplate innerhalb von PHP dem a-element die Klasse "animsition" zuweise. Bin da leider nicht von Fach :-)

[Spooky]

Du brauchst, wie gesagt, nicht unbedingt eine eigene CSS Klasse setzen. Siehe "Step 3: Call the animsition":

$(".animsition").animsition({
    …
    linkElement: '.animsition-link',
    …
}); 

Idealerweise gibst du deiner Navigation eine ID und machst dann bspw. einfach folgendes:

$("#deineNavigation").animsition({
    linkElement: 'a'
}); 

[toto]

Klingt sehr interessant dieses Feature.

Mich würde grundsätzlich auch interessieren welche Files man wirklich alle benötigt von der runtergeladenen GitHub-Datei.

Wie es aussieht nur animsition.min.css und animsition.min.js sowie jQuery aktivieren und dazu das script aus Step 3 im contao-layout integrieren? Ist das richtig?

Gruß toto