XF2.1 Smoke , animation in den header?

Dieses Thema im Forum "Style und Design" wurde erstellt von BlackBurn, 8. Nov. 2019.

  1. BlackBurn

    BlackBurn Mitglied Lizenzinhaber

    Hallo,
    ich möchte was versuchen. Ich möchte gerne eine Smoke / Rauch animation im header hinzufügen.
    Wie könnte ich das am besten machen?
    Also ich glaube das einfachste wäre wenn ich per Advertising die Grafik einfüge.
    Nur wo könnte ich den CSS & den Javascript hinzufügen?

    Gerne möchte ich auf dem bild, die Schornsteine, mit rauch beleben.
    Hier das würde ich nutzen bzw, natürlich verkleinern:

    Smoke Effects in CSS and JavaScript - Codepad

    Hättet ihr sonst eine idee wie ich es nutzen könnte ? oder was besseres?

    Danke
     

    Anhänge:

  2. Tealk

    Tealk Bekanntes Mitglied Lizenzinhaber

    ich glaub ne gif wäre die einfachst möglichkeit
     
  3. BlackBurn

    BlackBurn Mitglied Lizenzinhaber

    Das Stimmt, aber bei einer GIF habe ich Bildqualität verlust, oder meinst du eine GIF erstellen und diese auf den schornstein setzen?
    Kann man eigentlich auf swf datein oder so was abspielen lassen?

    [​IMG]
    @edit: habs mal getestet als gif, leider enorm Qualität weg :(
     
    Zuletzt bearbeitet: 8. Nov. 2019
  4. Tealk

    Tealk Bekanntes Mitglied Lizenzinhaber

    Was hast du mit der gif gemacht das du quali verlierst? Normal sind gif sehr qualitativ hochwertig.
     
  5. V0RT3X

    V0RT3X Bekanntes Mitglied Lizenzinhaber

    Hochwertige gifs sind aber auch ganz schöne Speicherfresser (hier geht es ja anscheinend um den kompletten Header einer Seite), ausserdem ist dieses Format auf 256 Farben + Transparenz beschränkt. Und Flash-Dateien kannst du heutzutage komplett vergessen, da das mehr oder weniger tot ist. Da kannst du besser ein html5 Video nehmen, aber auch da kannst du Probleme haben, dass das nicht auf allen Devices vernünftig angezeigt wird (alte Apple Handys afaik).

    Die eleganteste Lösung ist fast immer CSS. Wie das geht steht in deinem Beispiel ja schon drin. Den Effekt musst du nur optisch anpassen und entsprechend auf deiner Grafik positionieren. Wo du den Code an sich letztendlich reinschmeisst, ist dabei so ziemlich egal, Werbeslot, Widget, oder wie es sich gehört in ein Template.

    Aber wie neulich schon beim GTA-Forum, gib einfach den Link wo du was gesehen hast, dann wird man dir auch sagen können, wie die das umgesetzt haben.
     
  6. BlackBurn

    BlackBurn Mitglied Lizenzinhaber

    Also eigentlich möchte ich nur ein Schornstein, Smoke dran hauen.
    Das Banner wäre aber 2000px breit. hm ja also habe es per Web gespeichert und so mit 256 farben.
    Wenn ich die animation einzeln als gif speicher, wird das überhaubt nichts.
    Ich hatte damals irgendwo auch ne seite gesehen, von einem spiel (Entwickler Page) die auch so was hatten, denke da aber noch mit flash.

    Naja der Link ist oben was ich dachte^^ nur müsste ich das irgendwie so klein hinkriegen, wo jetzt in meiner animation.
    Natürlich wäre die animation wie auf dem GIF banner am besten, aber das funkt. leider nicht mit der Qualität, schade.


    @edit: also ich denke ich habe da was gefunden was man nutzen könnte :
    Demo:smoke.js | A Small But Good JavaScript Smoke Effect
    bijection/smoke.js

    Jetzt müsste ich das natürlich irgendwie verkleinern und wie könnte ich das im header einsetzen?
    was ich auch leider gesehen habe, startet erst mit mouseover :/
    was muss ich fürn code verwenden :/ eventuell kann mir ja einer helfen, dass wäre super:)
     
    Zuletzt bearbeitet: 9. Nov. 2019
  7. V0RT3X

    V0RT3X Bekanntes Mitglied Lizenzinhaber

    Den hier, da steht wie das eingebaut, bzw positioniert wird. Und das hier ist der Effekt an sich.
     
    otto gefällt das.
  8. BlackBurn

    BlackBurn Mitglied Lizenzinhaber

    Danke, dass hatte ich so weit. aber leider wie gesagt startet es via onmousemove , dass alles zu ändern fehlt mir leider auch das wissen , hm naja muss ich mal weiter suchen.
    hatte das noch gefunden: Dynamic Cloud Effect Preview - CodeCanyon

    aber mal schauen
     
  9. V0RT3X

    V0RT3X Bekanntes Mitglied Lizenzinhaber

    Nunja, einen fertigen Code den du nur noch ein dein Template reinkopieren musst, wird dir hier niemand geben können, da der individuell an deine Seite anpasst werden muss. Eigentlich steht da oben alles drin, nur CSS beizubringen würde den Rahmen dieses Threads sprengen. Über Google wirst du aber genug Seiten finden, wo du sowas lernen kannst.
     
  10. BlackBurn

    BlackBurn Mitglied Lizenzinhaber

    Kann geclosed werden , hab es per HTML / Java Script geschaft :)
     
  11. ehd

    ehd Aktives Mitglied Lizenzinhaber

    Dann zeig mal bitte her :)
     
  12. BlackBurn

    BlackBurn Mitglied Lizenzinhaber

    Wird noch etwas verändert aber das Gerüst steht , der Kegel von unten wird noch etwas mehr Rauch hoch geben , aber kannst es sehen auf: Die Sielder FanForum - Dein Forum nur für Siedler!
     
    V0RT3X gefällt das.
  13. V0RT3X

    V0RT3X Bekanntes Mitglied Lizenzinhaber

    Looks nice und war doch bestimmt gar nicht mal so schwer, oder? :)

    Jetzt würde ich nur noch das Themehouse Branding unten rausnehmen, ist erlaubt und kostet nichts ;)
     
  14. ehd

    ehd Aktives Mitglied Lizenzinhaber

    Sehr cool :)
     
  15. BlackBurn

    BlackBurn Mitglied Lizenzinhaber

    Coole sache, dass wusste ich bisher nicht . Danke für die Info.
    Naja , ohne fremde Hilfe , wäre das mit Java Script nicht möglich gewesen, aber es klappt :)
     
  16. otto

    otto Bekanntes Mitglied Lizenzinhaber

    Hmm ... ich seh mit Chrome keinen bewegten Rauch. Funzt das noch?
     
  17. BlackBurn

    BlackBurn Mitglied Lizenzinhaber

    Ich teste noch etwas rum, deswegen geht es manchmal nicht ^^, nun läuft es aber gerade wieder
     
    otto gefällt das.
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden