XF2.1 Smoke , animation in den header?

BlackBurn

BlackBurn

Aktives Mitglied
Registriert
4. Okt. 2017
Beiträge
103
Punkte
43
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

  • Unbenannt-6.jpg
    Unbenannt-6.jpg
    128,7 KB · Aufrufe: 10
ich glaub ne gif wäre die einfachst möglichkeit
 
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?

bg_header.gif

@edit: habs mal getestet als gif, leider enorm Qualität weg :(
 
Zuletzt bearbeitet:
Was hast du mit der gif gemacht das du quali verlierst? Normal sind gif sehr qualitativ hochwertig.
 
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.
 
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:
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
 
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.
 
Kann geclosed werden , hab es per HTML / Java Script geschaft :)
 
Dann zeig mal bitte her :)
 
Sehr cool :)
 
V0RT3X schrieb:
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 ;)
Zum Vergrößern anklicken....

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 :)
 
Hmm ... ich seh mit Chrome keinen bewegten Rauch. Funzt das noch?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben