# Seite animieren -jQuery



## bbm1 (20. November 2014)

Hallo zusammen

Ich habe lange überlegt, und ich hoffe hier passt die Thema?

Ich würde gerne einen Logo sozusagen über die ganze Seite "zeigen" lassen, links und rechts kommt noch die Navigation (je 2 == 4 Buttons) das alles sollte animiert sein, also Logo sollte am Anfang als Explosion erscheinen und ein paar Sekunden später sollten die Buttons sichtbar sein.

Siehe Foto 1

_(Das sollte Logo darstellen, von oben bis unten....1.min Arbeit)_





Und wenn jemand auf einen Button klickt (egal links oder rechts) dann sollte sich der Logo um 180 Grad drehen und der Inhalt (News, Gallery, Kontaktformular..) sollten im Rahmen von der Logo erscheine.

Siehe Foto 2







Und das alles noch in einem CMS bzw. in WordPress (weil die News sollten editierter sein + 10 Mitglieder (Accounts erstellen für geschützten Bereich)

Hier noch eine Bild was ich möchte erstellen (grob)  http://postimg.org/image/xnrcn13qd/

Ich habe Logo im .AI Format (Illustrator)


Meine Fragen:
- Wie kann ich das am besten realisieren, mir ist klar für die Animationen am besten jQuery benutzen, die Frage ist welche Animationen und wie ....habe leider so etwas mit Bilder nie gemacht ...wie anfangen ?

- Ist das mir jQuery gut kombinierbar oder soll ich andere Animationen nehmen ?

Danke


----------



## Cromon (20. November 2014)

Hallo bbm1

Wie genau stellst du dir die Explosionsanimation vor? Eine Explosion braucht man oft halt eher zum ausblenden eines Elements, indem man es in kleine Stücke explodieren lässt, die dann verschwinden. Hast du vielleicht ein Beispiel, das dem was du als Animation haben willst ungefähr entspricht?

Viele Grüsse
Cromon


----------



## bbm1 (20. November 2014)

Hallo Cromon, 

Es muss nicht zwingend "Explosions" sein, es kann auch eine andere schöne Effekt sein (eben wenn die Webseiten aufgerufen wird) leider kenne ich nicht viele verschiedene Effekte, deswegen haben ich geschrieben "sollte als Explosion erscheinen", aber ich bin auch für andere Effekten offen.


----------



## SpiceLab (20. November 2014)

http://jqueryui.com/effect/ oder auch http://jqueryui.com/show/ demonstrieren u.a. den Animationseffekt "Explode" 

Mit einem Suchbegriff wie "jquery animations" oder "jquery animations plugin" lassen sich via google weitere Effekte aufstöbern


----------



## Jan-Frederik Stieler (20. November 2014)

Hallo,
ich würde dir raten die Seite erst einmal ohne Animation aufzubauen. Auch weil es sich ja um ein CMS handeln soll.
Wenn das funktioniert kannst du dir Gedanken um die Animation machen.

So wie ich das sehe musst du die Inhalte per AJAX versteckt laden um dann im folgenden Schritt z.B. das Schild zu drehen.


Grüße


----------



## bbm1 (20. November 2014)

@SpiceLab kann man die Effekte auch für Bilder (Logo) benutzen, wie verhaltet sich nachher ....werde ich ausprobieren...

@Jan-Frederik Stieler ich habe gedacht, eine bestehende WP Theme bearbeiten (oder selber erstellen, ist k.p) und dann sozusagen bei leee Seite mit nur div's anfangen die Animation per jQuery ..und ev. AJAX um die Unterseiten laden zu können.


----------



## Sempervivum (21. November 2014)

Meinst Du mit Explosion, dass die Grafik von einem Punkt aus größer wird bis zu endgültigen Größe? Das kann man sehr leicht mit jQuery-animate machen, indem man die Größe animiert.
180-Grad-Drehung habe ich ein paar in meinen Lesezeichen:
https://github.com/yemM/flippy
http://jonraasch.com/blog/quickflip-2-jquery-plugin


----------



## Jan-Frederik Stieler (21. November 2014)

Hi,
grundsätzlich ist dir die Herangehensweise selbst überlassen, aber ich bin der Meinung das keine Seite rein auf Animationen funktionieren sollte.
Deshalb würde ich das Template erst einmal ohne diese Animation und Ajax bauen. Dann kannst du dir nämlich sicher sein das sie auch so funktioniert.

Auch wenn du das wahrscheinlich so nicht meinst, aber bitte verwende nicht nur divs , sondern entsprechend semantische Elemente.
Divs nur dort wo es keine entsprechenden HTML-Elemente gibt.

Grüße


----------



## SpiceLab (21. November 2014)

bbm1 hat gesagt.:


> @SpiceLab kann man die Effekte auch für Bilder (Logo) benutzen


Ja, die Animationen sind gleichermaßen auf *<img>*-Elemente und CSS-Hintergrundbilder anwendbar


----------



## ComFreek (21. November 2014)

Für den Dreheffekt selbst lässt sich auch CSS 3 verwenden: http://davidwalsh.name/css-flip
Um den per Klick / Hashtag / History State zu starten, müsstest du JS verwenden.


----------



## bbm1 (22. November 2014)

@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 (22. November 2014)

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 (23. November 2014)

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 (23. November 2014)

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 (23. November 2014)

@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 (23. November 2014)

bbm1 hat gesagt.:


> 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


bbm1 hat gesagt.:


> 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 (23. November 2014)

@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 (23. November 2014)

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



bbm1 hat gesagt.:


> @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 (23. November 2014)

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


----------



## SpiceLab (23. November 2014)

SpiceLab hat gesagt.:


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


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


			
				Flip! A jQuery plugin v0.9.9 hat gesagt.:
			
		

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


----------



## bbm1 (23. November 2014)

SpiceLab hat gesagt.:


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




Wurde aber letztes mal vor 5 Jahren aktualisiert. 

https://github.com/roncioso/Flip-jQuery


----------



## SpiceLab (23. November 2014)

Anyway, Hauptsache es funktioniert in allen IE-Versionen


----------



## Sempervivum (23. November 2014)

> Wurde aber letztes mal vor 5 Jahren aktualisiert.


Flippy vor 6 Monaten.
https://github.com/yemM/flippy


----------



## SpiceLab (23. November 2014)

Kleiner Unterschied: die Kompatibilität reicht herunter bis IE8. Falls dies von Interesse sein sollte.


----------



## Jan-Frederik Stieler (24. November 2014)

Hi,
Bootstrap benötigst du für das funktionieren des Effektes nicht. 
Ich verwende das in JsBin nur der Einfachhalberkeit um schnell was halbwegs gut aussehendes zu erzeugen .

Das benötigte CSS befindet sich bei JSBIn unterhalb der Kommentarzeile, aber du brauchst hier auch nicht alles.



> @@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.


Hier findest du das Beispiel ohne Möglichkeit des Drehens bei Klick auf die Visitenkarte: http://jsbin.com/sazupu/4/edit

Grüße


----------



## staklorazac (24. November 2014)

https://developer.cdn.mozilla.net/m...-3d-card-f_1415119527_demo_package/index.html


----------



## bbm1 (24. November 2014)

@Jan-Frederik Stieler  dein Bsp. http://jsbin.com/sazupu/4/edit ist schön und gut, nun ich habe probiert mit mehreren Buttons auf verschiedene "Hinterseiten/Rückseiten" zugreifen.

<button class="btn btn-default switch" name="switch">Rückseite</button>
<button class="btn btn-default switch" name="switch">Rückseite_2</button>


ich habe mal probiert in jQuery Funktion mit elseif noch zusätzliche Buttons (Rückseite_2, Rückseite_3) anzusprechen , die auf verschiedne Bereiche zugreifen ...leider ohne Erfolg ...

Also wenn ich auf Button "Rückseite" klicke dann sollte auf der Hinterseite etwas anderes erscheinen wie zb wenn ich auf Button "Rückseite_2" klicke usw...

Ich weiss nicht was mache ich falsche, wenn ich es nicht mit elseif ansprechen kann.  Oder muss ich neue Funktion definieren, obwohl das auch nicht funktioniert.


----------



## Jan-Frederik Stieler (25. November 2014)

Hi,
kannst du deine Änderungen in JSBin anlegen? Also du kannst direkt an dem Projekt arbeiten.
Wenn gespeichert wird, wird sozusagen ein neuer Fork angelegt und jeder kann die Arbeit nachvollziehen.

So muss ich jetzt irgendwie erraten, in Bezug auf den Quellcode, was du eigentlich machen willst oder gemacht hast .

Grüße


----------



## bbm1 (25. November 2014)

@Jan-Frederik Stieler

Ich habe weiter an der Script gearbeitet, und es sieht jetzt so aus: www.mamp.hol.es 

Jetzt zwei Fragen:

*1)* Wie kann ich es machen, das mein Text nicht unterhalb von Bilderrahmen steht, sondern im Bildrahmen => Auf Unterseiten wie: Nav2, Nav3 etc.. es sollte nur im Rahmen Text,Formular. usw.. stehen, ich weiss es ist IMG aber wie kann ich innerhalb IMG Text ausgeben?

*2) *Wie kann ich es optimieren für IE, auf IE 11 sieht es komisch aus (Nav2 zeigt was im Nav1 steht und Nav4 zeigt was im Nav3 steht) 

Es wäre schön IE 11,10,9 => Hingegen im Firefox,Safari und Chrome sieht es anständig aus.


Übrigens: ich habe es so gemacht wie du gesagt hast, in JSBin Dateien angelegt. 

http://jsbin.com/guxapoyiga/1/edit?html,css,js,output


Für jede weitere Hilfe bin ich Dankbar. 

P.S. Am iPad 2 sieht es auch nicht schlecht aus...werde später noch für iPhone korrigieren.


----------



## bbm1 (26. November 2014)

Das mit Hintergrund hat sich erledigt, war mein Fehler.

Hmm aber weiss jemand wie kann ich es auch für IE optimieren?

webkit/ms taugt nicht


----------

