2012-03-31 11 views
2

Ich brauche Fly-In-Effekte von Bildsymbolen während der Seite Onload.Jquery Icons Fly-In animierten Effekt Onload

Bitte überprüfen Sie die folgenden Bilder, erste Bild war Symbole sollte in verschiedenen Richtungen während der Seite laden und es sollte animieren und ordnen in den div-Positionen wie zweites Bild.

Jede Idee wäre viel hilfreich ..

enter image description here

enter image description here

+0

Was passiert, wenn sie einen größeren oder kleineren Bildschirm haben? –

+0

danke für die Antwort Aram. Eigentlich ist das Layout nur für 1024X768. Anfangs werden alle Icons irgendwo um das Layout herum aufgeteilt und sobald die Seite onload ist, sollte sie zu ihren Orten einfliegen. – sathish

Antwort

0

Der Effekt selbst ist nicht die wirkliche problem.You alle Elemente festlegen können, in absoluten Positionierung fliegen sollte und stellen ihre positioniere den Bildschirm und animiere ihn dann zur richtigen Position.

Das wirkliche Problem wird sein, es mit verschiedenen Bildschirmgrößen arbeiten zu lassen, ohne das Layout zu zerstören.

+0

Vielen Dank für Ihren Vorschlag sven. Für ein einzelnes Icon kann ich es so machen, dass es sich anfänglich in eine andere Position bewegt [Zum Beispiel, oben links] und dann während des Ladens animiere ich es auf die ursprüngliche Div-Position. Aber, hier gibt es viele Ikonen und ich muss sie zuerst verschiedene Richtungen machen. Das ist, wo ich keine Ahnung habe ... :( – sathish

+0

Sie müssen nicht die Richtung für die Animation festlegen. Sie müssen nur eine Startposition für jedes Symbol festlegen und sie auf die Endposition animieren. Sie könnten für Beispiel: setze jedes Icon auf eine Startposition pro CSS und gebe dem Element selbst data- * -Attribute mit den Endkoordinaten, dann setze man alle Elemente in ein Array, laufe durch und animiere sie vom Startpunkt bis zum Endpunkt du brauchst keine extra animation für jedes icon zu schreiben du brauchst nur eine animation-funktion, die die endpunkte von den daten- * attributen übernimmt –

+0

danke sven diese symbole sind keine fixen, manchmal sind es 12icons [3rows X 4cols] und manchmal 16icons [4X4] oder 9 Icons [3X3] ... – sathish