Seite animieren -jQuery

[bbm1]

@Jan-Frederik Stieler klar werde ich nicht nur div-s Benutzern, sondern nav und andere Elemente


@SpiceLab werde ausprobieren

@ComFreek Das wäre auch eine Option und es braucht bestimmt mit CSS weniger Ladezeit wie zb. jQuery.

Es wäre nur noch geil zu wissen, wie kann ich es "verbinden" wenn auf einen Button geklickt wird, dann soll Dreheffekt starten, werde aber ausprobieren


Danke @all

 

[Jan-Frederik Stieler]

Hallo,

Es wäre nur noch geil zu wissen, wie kann ich es "verbinden" wenn auf einen Button geklickt wird, dann soll Dreheffekt starten, werde aber ausprobieren

Das kannst du nicht per CSS realisieren, oder nur mit ganz kruden Html-Konstrukten welche bei einer gesamten Webseite nicht hilfreich wären.

Ansonsten per Javascript, dort musst du bei dem Klick-Event eine Funktion aufrufen welche die Animation auslöst.
Als Beispiel für jQuery: http://jsbin.com/cuzitilabi/2/edit

Grüße

 

[bbm1]

Ich habe schon bsp. gefunden ...

Eine von denen ist:

http://nnattawat.github.io/flip/

Werde probieren so nachzubauen, und in WordPress zu integrieren.

 

[Jan-Frederik Stieler]

Hi,
also grundsätzlich brauchst du dafür nicht ein ganzes Plugin einzubinden. Ich habe mal für ein kleines Projekt diesen Effekt mittels CSS3 umgesetzt gehabt: http://jsbin.com/sazupu/2/edit
In der Form funktioniert dies natürlich nicht für den IE10.

Grüße

 

[bbm1]

@Jan-Frederik Stieler das sieht Hammer aus so etwas brauche ich, muss noch was editieren aber mehr oder weniger so etwas habe ich gesucht...kann für die ganze Webseite benutzen.

Was ist das für CSS File Adresse www.bootstrapcdn.com ? hat es was mit Framework www.getbootstrap.com zusammen oder?


Die Frage ist nur noch wie kann ich es für IE10 (oder generell für IE) funktionsfähig machen ? Da ich Mac benutze, habe ich sehr wenig mit IE (zum Glück?) zu tun.


Danke

 

[SpiceLab]

Was ist das für CSS File Adresse www.bootstrapcdn.com ? hat es was mit Framework www.getbootstrap.com zusammen oder?

Jip CDN -> http://de.wikipedia.org/wiki/Content_Delivery_Network

Die Frage ist nur noch wie kann ich es für IE10 (oder generell für IE) funktionsfähig machen ?

Ich gehe davon aus, dass ein adäquates jQuery-Plugin existiert, das im IE abwärts kompatibel ist.

 

[bbm1]

@SpiceLab dann muss ich mich mit BootstrapCdn (www.bootstrapcdn.com) vertraut machen, bis jetzt habe ich nur Bootstrap (www.getbootstrap.com) benutzt.

Ich hoffe, ich finde einen jQuery Plugin, für IE ...falls jemand einen kennt einfach schreiben, vielen Dank


@Jan-Frederik Stieler : in deinem Beispiel wird der Logo auch gedreht sobald man auf das Bild (rote Quadrat) klickt, wie kann ich das verhindern, es sollte nur per Button möglich sein, und nicht wenn auf das Bild geklickt wird. Ansonsten Top Beispiel.

 

[ComFreek]

Mit dem IE 11 funktioniert es. Ich könnte mir vorstellen, dass du noch das ms-* Namenspräfix bei einigen CSS-Eigenschaften brauchst.

@SpiceLab dann muss ich mich mit BootstrapCdn (www.bootstrapcdn.com) vertraut machen, bis jetzt habe ich nur Bootstrap (www.getbootstrap.com) benutzt.

Da muss man sich eigentlich mit gar nichts vertraut machen Es geht nur darum, woher du die JS- bzw. CSS-Dateien beziehst. Wenn du die Dateien bei einem CDN auslagerst und dies viele Webseitenbetreiber tun, dann steigt für mich als Endnutzer Wahrscheinlichkeit, dass ich dieselbe Datei nicht mehrfach von Servern herunterladen muss, sondern schon im Cache habe (da die CDN-URI gemeinsam genutzt wird).

 

[SpiceLab]

Alternativ zu dem möglichen jQuery-Plugin könnte hier auch schon ie7.js oder html5shiv behilflich sein.

 

[SpiceLab]

Ich gehe davon aus, dass ein adäquates jQuery-Plugin existiert, das im IE abwärts kompatibel ist.

http://lab.smashup.it/flip/

Compatibility:
Flip is compatible with:
Firefox, Chrome/Chromium, Opera, Safari and even IE (6,7,8)