Jquery Animation Bild

Dieses Thema im Forum "Webentwicklung" wurde erstellt von leex, 28. November 2013 .

  1. 28. November 2013
    Hallo Leute,
    ich würde gerne ein "Auto" auf einer Deutschlandkarte von einem Ort zum anderen Fahren lassen. Zb. von München nach Hamburg.
    Ihr kennt das vielleicht von Fersehserien wo das manchmal gemacht wird um zu demonstrieren von wo nach wo man fährt.

    Ist das mit Jquery möglich? Oder habt ihr bessere Vorschläge?

    Hintergrund ist, dass ich für meine Freundin ein kleines Video oder Animation erstellen möchte in der Das Auto mit unseren Köpfen darauf nach Hamburg fährt und dann die Karte ausgeblendet wird und eine Bild/Seite/Animation erscheint in der ich ihr ihr eigentliches Geschenk präsentiere (König der Löwen Musical).


    Freue mich über jeden Hinweis und unterstützung

    lg
    leex
     
  2. 29. November 2013
    AW: Jquery Animation Bild

    Check. Ist mit jQuery möglich.

    Jetzt ist die Frage -->> Layout statisch oder responsive?

    Ich hab mal für einen Kunden, eine zoombare Deutschlandkarte erstellt wo der selber Pins setzten konnt, das Script könnte ich recyceln, also ohne Pin- und Zoomfunktion. Dann eine Animationsfuktion an der du nur noch einen Koordinatenmap übergeben musst. Ich schau mal nach, versprechen kann ich aber nix. ;-)

    Falls du es selbst machen willst, schau dir mal den folgenen Befehl genauer an. .animate() | jQuery API Documentation

    Gruß Hulk
     
  3. 29. November 2013
    AW: Jquery Animation Bild

    was meinst du mit layout statisch oder responsiv

    wäre super wenn du das nochmal finden würdest oder jemand ein anderes Beispiel hätte wo so etwas gemacht wird.

    Bin nicht so super fit in jquery
     
  4. 2. Dezember 2013
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Jquery Animation Bild

    Hi,

    also ich fande die Idee ganz nett und hab da auch so eine Idee für meine Freundin
    Da habe ich mich mal hingesetzt und was gefunden: https://github.com/caitriona/draw-route

    Es zeichnet Dir eine Route auf einer Karte. Bis jetzt nur rote Punkte, das musst Du gegebenfalls anpassen. Die Route "fährt" er nach Pixelkoordinaten deines Bildes ab.

    Ich werde da was für meine Freundin basteln; habe Dir mal eine Demo erstellt mit deinen Beispiel Angaben, dass Du dir gleich ein Bild davon machen kannst. Ich habe als Notlösung mal eine poblige Javascript Weiterleitung gemacht, die auf ein Bild leitet, nachdem die Route abgefahren ist (bekommt man halt Probleme mit Popupblockern und so^^).
    Ich bin mir auch noch nicht sicher, in welcher Form ich ihr es dann präsentiere (Bild/Video...).

    Wenn Du oder andere Interesse an dem Script habt und Veränderungen/Verbesserungen anbringen möchtet, gerne doch. Hier die Links:

    DEMO ANSEHEN

    SCRIPT HERUNTERLADEN

    Hoffe Ihr hattet einen schönen ersten Advent
     
    1 Person gefällt das.
  5. 4. Dezember 2013
    Zuletzt bearbeitet: 5. Dezember 2013
    AW: Jquery Animation Bild

    Ich denke du suchst sowas oder?
    Roadtrip

    Wie habe ich das gemacht?
    Ich habe mir die Pfade entsprechend notiert (jeweils Y und X). Diese Pfade jage ich anschließend durch eine Funktion die mir mehrere CSS-Animationen erstellt.

    Anschließend wird jede Animation der Reihe nach auf das Auto angewandt.

    Für den Richtungswechsel habe ich mir einen Array erzeugen lassen.

    Komplexere Animationen wären auch möglich (Kurven), doch dazu hat ich letztendlich keine Lust, da der Aufwand des Übersetzens um einiges höher gewesen wäre

    - Kein jQuery verwendet
    - Animationen komplett auf CSS-Basis (Idr. Hardwarebeschleunigt auch auf Tablets/Handys)

    Quellcode:
    http://putc.me/etc/rr/anim/css/main.css
    http://putc.me/etc/rr/anim/js/main.js
     
  6. 5. Dezember 2013
    AW: Jquery Animation Bild

    ja genau sowas suche ich, nur das mein auto eben auf der karte fahren soll aber die kann ich ja als hintergrund machen.
    werde das mal probieren.

    danke.
     
  7. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.