Anzeige

Animation für Webseite

Animation für Webseite | PSD-Tutorials.de

Erstellt von Anina, 31.08.2010.

  1. Anina

    Anina Pixelschubserin Kreativ-Flatrate-User

    Dabei seit:
    21.02.2005
    Beiträge:
    1.985
    Geschlecht:
    weiblich
    Ort:
    Unterfranken
    Software:
    Photoshop CC, InDesign CC, Dreamweaver CC, Corel 13,...
    Animation für Webseite
    Hi!

    Habe da mal eine Frage: Habe bis jetzt noch nie Animationen gemacht - bin deswegen etwas ratlos, wie ich das (möglichst unkompliziert ;) ) machen kann.

    Habe hier eine Webseite:
    Webseite

    Auf der Startseite möchte ich ein "Autochen" von links nach rechts fahren lassen.
    Hier mal das Auto (es wäre dann freigestellt und ein gif oder was auch immer):
    [​IMG]
    Uploaded with ImageShack.us

    Am genialsten wäre es, wenn das Auto unter den Flaschen (unten links) auftauchen und dann nach rechts fahren würde (dort kann es dann verschwinden). Die Flaschen sind als AP-Element angelegt. Vielleicht hilft das.

    Sollte das zu kompliziert sein, würde es auch reichen, wenn das Auto einfach von links nach rechts fährt. Die Seite selbst ist mit Dreamweaver gemacht.

    Wäre super, wenn mir jemand weiter helfen könnte.

    Liebe Grüße
    Anina
     
    #1      
  2. maxtehpg

    maxtehpg Nicht mehr ganz neu hier

    Dabei seit:
    01.05.2006
    Beiträge:
    56
    Animation für Webseite
    AW: Animation für Webseite

    Mal vorher eben was ganz Anderes.

    Lightbox Gallery : Steuer Weinbau

    Auf dieser Seite gibt es ganz unten einen Darstellungsfehler mit den Flaschen.
    Ist mir gerade auf gefallen. Mit der Animationsanleitung musst du leider auf den
    nächsten Schreiberling warten sorry.

    Gruß, Max
     
    #2      
  3. Anina

    Anina Pixelschubserin Kreativ-Flatrate-User

    Dabei seit:
    21.02.2005
    Beiträge:
    1.985
    Geschlecht:
    weiblich
    Ort:
    Unterfranken
    Software:
    Photoshop CC, InDesign CC, Dreamweaver CC, Corel 13,...
    Animation für Webseite
    AW: Animation für Webseite

    Hi!

    Danke fürs durchschauen... komisch, bei mir gehts... welchen Browser hast du? Firefox?
    Weil ich glaube da stimmt es noch nicht (Seite ist ja noch am entstehen) ... seltsam. Schaue mal, wie ich das hinbekomme.
    Danke dir!
     
    #3      
  4. proximate

    proximate Nicht mehr ganz neu hier Kreativ-Flatrate-User

    Dabei seit:
    21.07.2009
    Beiträge:
    139
    Geschlecht:
    männlich
    Ort:
    Churwalden
    Software:
    Photoshop / After Effects / Dreamweaver -> Adobe Kind ;)
    Kameratyp:
    Canon EOS 50D
    Animation für Webseite
    AW: Animation für Webseite

    Also ich würds jetzt mit Flash machen, Hintergrund Slicen ins Flash pappen (gesamte Page breite) dann das Auto freistellen und einfach von links nach rechts mittels Tweening durchfahren lassen... ist wohl der einfachste weg, wenn du ein bisschen Zeit hast kannst du soger die Flaschen einzeln ausschneiden und am richtigen Ort in der Flash Datei platzieren..

    sieh dir mal die Flash Basics hier auf der Page an Stichwort tweening

    Mit einem Gif würd ich was in dieser Grösse nicht lösen
     
    #4      
  5. Vanimelda

    Vanimelda der mit dem Feuer tanzt

    Dabei seit:
    12.11.2008
    Beiträge:
    258
    Geschlecht:
    männlich
    Ort:
    Collenberg
    Software:
    CS6 Master Collection, Lightroom 4
    Kameratyp:
    Canon EOS 450D
    Animation für Webseite
    #5      
  6. Anina

    Anina Pixelschubserin Kreativ-Flatrate-User

    Dabei seit:
    21.02.2005
    Beiträge:
    1.985
    Geschlecht:
    weiblich
    Ort:
    Unterfranken
    Software:
    Photoshop CC, InDesign CC, Dreamweaver CC, Corel 13,...
    Animation für Webseite
    AW: Animation für Webseite

    Also das mit den Flaschen schaue ich mir mal an (die machen aber grad gar nicht, was ich will...).

    @proximate:
    Flash ist ein Problem - da hatte ich noch nie etwas zu tun mit...
    Gibt es evtl. eine andere Lösung...?
     
    #6      
  7. pessi55

    pessi55 ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥

    1
    Dabei seit:
    15.02.2010
    Beiträge:
    2.752
    Geschlecht:
    männlich
    Ort:
    Klagenfurt am Wörthersee
    Software:
    Photoshop, InDesign, Illustrator – CS6
    Kameratyp:
    Panasonic DMC
    Animation für Webseite
    Zuletzt bearbeitet: 31.08.2010
    #7      
  8. Manfred62

    Manfred62 Nicht mehr ganz neu hier

    Dabei seit:
    09.05.2010
    Beiträge:
    73
    Geschlecht:
    männlich
    Animation für Webseite
    Zuletzt bearbeitet: 31.08.2010
    #8      
  9. Anina

    Anina Pixelschubserin Kreativ-Flatrate-User

    Dabei seit:
    21.02.2005
    Beiträge:
    1.985
    Geschlecht:
    weiblich
    Ort:
    Unterfranken
    Software:
    Photoshop CC, InDesign CC, Dreamweaver CC, Corel 13,...
    Animation für Webseite
    AW: Animation für Webseite

    Hi!

    Danke schön für die Tipps - das schaue ich mir alles mal an...

    Hm.. das mit den Fehlern ist ja komisch... was programmiert mir Dreamweaver denn da zusammen...? Schaue mal das ich die alle gelöst kriege.

    Werde jetzt mal die Links durchforsten... und hoffen, dass ich als "Dreamweaver-Ausweicherin" alles verstehe... :)
     
    #9      
  10. efeu22

    efeu22 Aktives Mitglied

    Dabei seit:
    14.04.2008
    Beiträge:
    470
    Animation für Webseite
    AW: Animation für Webseite

    huhu.leider ist der besagte flaschenfehler auch im crome browser. und dort besonders auffällig beim menü kontakt/impressum. die untermenüs zerreißt es und die bezeichnungen ragen über den hintergrund vom button raus.

    Yfrog Image : yfrog.com/j9zwischenablage1vj
     
    #10      
  11. Anina

    Anina Pixelschubserin Kreativ-Flatrate-User

    Dabei seit:
    21.02.2005
    Beiträge:
    1.985
    Geschlecht:
    weiblich
    Ort:
    Unterfranken
    Software:
    Photoshop CC, InDesign CC, Dreamweaver CC, Corel 13,...
    Animation für Webseite
    AW: Animation für Webseite

    Oje, aber wenn ich die Position ändere, dann stimmt es ja im IE und Firefox wieder nicht.

    Kann ich da im CSS die Positionen browserspezifisch eingeben?
     
    #11      
  12. Anina

    Anina Pixelschubserin Kreativ-Flatrate-User

    Dabei seit:
    21.02.2005
    Beiträge:
    1.985
    Geschlecht:
    weiblich
    Ort:
    Unterfranken
    Software:
    Photoshop CC, InDesign CC, Dreamweaver CC, Corel 13,...
    Animation für Webseite
    AW: Animation für Webseite

    Oder gibt es eine Lösung, dass das gar kein AP-Element ist sondern irgendwie "anders"?

    Sorry für mein blödes Rumgefrage.
     
    #12      
  13. schnullerbacke

    schnullerbacke Aktives Mitglied

    Dabei seit:
    22.03.2006
    Beiträge:
    268
    Animation für Webseite
    AW: Animation für Webseite

    Ich vermute jetzt mal dass sich die Probleme erledigen, wenn du deine Tabellen rausschmeißt.
    Die brauchst du nicht!
    Z.B. hast du im Footer-Div eine Tabelle mit einer einzigen Zelle, das ist (sorry) Quatsch.
    Das ist doch ein simples 2-spaltiges Layout, mit 2 gefloateten Divs hast du den content-Bereich definiert.
    Oder 1 Div mit nem großen linken padding.

    Gibt es in Dreamweaver nicht sogar fertige Vorlagen für diese Layouts?



    Ansonsten: Zerschneide das Flaschenbild nicht. Dann kann das auch nicht auseinandergerissen werden. Du hast das Div ja absolut positioniert, du kannst es also eh über den footer-Rand legen.
     
    #13      
  14. Manfred62

    Manfred62 Nicht mehr ganz neu hier

    Dabei seit:
    09.05.2010
    Beiträge:
    73
    Geschlecht:
    männlich
    Animation für Webseite
    AW: Animation für Webseite

    Hallo Anina

    Sorry, nicht böse sein... ;) Ich hab mal hinter die "Fassade" geschaut.
    Das ist schon grenzwertig bzw. Murks!

    Nur mal als Bsp: du hast 2 charsets angegeben (utf-8 und iso...).
    Massig ids und class. CSS im head und extern. Dieses Adobe Spry Zeugs...
    Deine Seite bzw. Navi sieht in jedem Browser anders aus.

    EDIT: deine Bilder sind zu groß. Besser komprimieren bzw. mit PS "für Web und Geräte speichern"

    Ich denke, da solltest du noch mal grundlegend neu aufbauen.
    Guter Link zum lernen:
    Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS

    Gruß Manfred
    [​IMG]

    Uploaded with ImageShack.us
    [​IMG]

    Uploaded with ImageShack.us
     
    Zuletzt bearbeitet: 01.09.2010
    #14      
x
×
×