Abgefahrene Navigation

**kischd** · 13.05.2014, 10:26

Kann mir zufällig jmd sagen wie das umgesetzt ist?

http://www.hugeinc.com/case-study/american-express

Ich bin auf die Seite gekommen, da wurde was über SVG animations erklärt.
http://tympanus.net/codrops/2014/04/...ading-effects/

Kapier das leider nicht ganz wie das einzubinden ist. Kann mir jmd bisschen auf die Sprünge helfen?

**one12** · 13.05.2014, 10:35

Ich habe auch keine Ahnung...
Aber hast du mal einen modul eigenem HTML Code versucht?

Mit diesem Inhalt:

Code:

 
<div id="loader" class="pageload-overlay" data-opening="M 0,0 80,-10 80,60 0,70 0,0" data-closing="M 0,-10 80,-20 80,-10 0,0 0,-10">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none">
        <path d="M 0,70 80,60 80,80 0,80 0,70"/>
    </svg>
</div>

Und dann noch die css natürlich in dein stylesheet

Gesendet von meinem SM-N9005 mit Tapatalk

***hofff*** · 13.05.2014, 10:51

Also ich denke, das ist nur mit CSS und ein bisschen JS gemacht, soweit wie ich das aus dem Quellcode erkennen kann.

fg
nicky

**kischd** · 13.05.2014, 12:01

Hast du herauslesen können welches js dafür zuständig sein könnte?

**ctnew** · 13.05.2014, 12:48

Wenn du diese "Mobile Navi" meinste, dann hast du hier genau den richtigen Link: http://tympanus.net/Development/Full...OverlayStyles/

SVG´s brauchst du da nicht wirklich.

**BugBuster** · 13.05.2014, 13:21

coole Seite, ne Menge cooler Effekte, auch für Bilder. Gefällt mir.

**schman** · 13.05.2014, 13:42

Wow, wirklich eine coole Seite. Ich könnte mir das ganze Stundenlang anschauen

**kischd** · 13.05.2014, 13:58

Dachte ich mir auch. Jeder Effekt macht hier Spaß.
Ein Tutorial wäre nice... naja muss man bei Zeit mal testen, welches js hier was tut :-(

**andreasisaak** · 13.05.2014, 14:31

Ist etwas tricky aber wir konnten es bereits erfolgreich in die syncCto Website einbauen (auf das Video klicken, dann kommt der Effekt):

http://contao-synccto.com/

Zum Schluss sind wir sogar komplett ohne Templateanpassungen ausgekommen. Also das Script macht sehr Spaß

**kischd** · 13.05.2014, 15:14

Hallo Andreas,
wie kann man an die einzelnen JS kommen? Oder sind die komplett in einer JS?

http://tympanus.net/Development/Full...es/index3.html
Hier find ich über Firebug noch nicht richtig was geladen wird ;-(