Inspiration Aquarium

Ich habe einmal angefangen mein jetziges Forendesign (phpBB3) auf ein phpBB2-Forum zu übertragen. Noch ist es zwar nicht ganz fertig wobei ich jedoch glaube, dass man dieses Forum bereits vorzeigen kann.
Für den Header habe ich mich einmal ein wenig inspirieren lassen, da hier vor kurzem einmal ein komplettes Design gefragt war.
Dafür habe ich eine Webseite geschrieben und diese per iFrame in den Header eingesetzt. Um den Header zu testen braucht man nur in den Bereich des Logos zu gelangen und dort mit der linken Maustaste bitte unsere Fische füttern, Danke.

Wie findet ihr meine Umsetzung?
Was könnte man noch anders gestalten?

LG inde

Schöner Gag, wenn man sich mit Grafiken auskennt, effektmässig ist das OK, aber für mein Forum wär das nix, ich denke, auf meiner Startseite sind genügend GIFs eingesetzt, den gesamten Header mit Wolken, Schneeflocken oder Aquarium zu animieren, find ich persönlich zu aufdringlich. ich möchte schliesslich das meine Nutzer und Gäste INS Forum schauen und nicht nur die Startseite bewundern!   

Dieses Forum ist von der Optik der Wahnsinn. Respekt.

Das ja, effektmässig ist das schon ein Hinkucker!   

Die Headeranimation find ich super, auch wenn ich die Grafiken sehr simpel finde (bitte nicht falsch verstehen) Frage mich ob das mit "echten" Fischen auch gehen würde?

Hexekati schrieb:Die Headeranimation find ich super, auch wenn ich die Grafiken sehr simpel finde (bitte nicht falsch verstehen) Frage mich ob das mit "echten" Fischen auch gehen würde?

Nun mit echten Fischen, Du meinst sicherlich ein paar bunte mehr realistische Fische, nein das würde so auch nicht funktionieren.   
Das Flash stammt übrigens auch nicht von mir, es ist ein freies aus dem Netz welches ich dafür verwendet habe und ein wenig auf meine Webseite abgestimmt habe.
Die simplen Grafiken, habe ich so gestaltet..... da die Fische auch nicht gerade realistisch erscheinen. Somit ist die Gestaltung natürlich eher als etwas phantasievolles zu verstehen.
Im Grunde ging es mir auch mehr darum ein Flash in einem kompletten Header einzubinden und das auch einmal bei einer phpBB2-Variante.

Danke für Deine Kritik.  

LG inde

Nun habe ich hier noch einmal, ein für mich etwas älteres Thema aufgegriffen und neu überarbeitet.

Die Animationen habe ich hauptsächlich mit CSS3-Animation umgesetzt, bis auf drei Gif-Grafiken.
1. Den Flügelschlag der Möwen.
2. Die Bewegung der Fischflossen im Wasser.
3. Die Wellen im unteren Bereich des Headers.

Die Summe der zu ladenden Grafiken für den Header beträgt ca. 385kb, der Rest wurde über das CSS animiert.
Insgesamt wurden 17 Grafiken verwendet, davon wurden natürlich etliche gespiegelt, auch skaliert sowie mit der Funktion Repeat wiederholt.
Die Darstellung ist ab IE 10 und den aktuellen Browsern von Firefox, Chrome und Opera möglich.
Auch passen sich hier wieder die Grafiken innerhalb des Headers automatisch an die jeweilige Auflösung des Users an.
Bitte auch den Hover-Effekt über den Header anschauen, schließlich haben wir hier oben im Norden nicht nur schönes Wetter.  

Alles in allem war es eine sehr aufwendige Arbeit, jedoch wollte ich es auch einmal austesten was alleine nur mit CSS3 so alles möglich ist.
Auch mit Flash und erst recht nicht mit Gif-Dateien wäre eine solche Summe an Animation, bei einer solch verhältnismäßig niedrigen Dateimenge, umsetzbar.

@Hexekati: Gefallen die Fische (Ostsee-Heringe) so nun besser bzw. sind diese realistischer/echter?

Über ein gehaltvolles Feedback würde ich mich sehr freuen.

LG inde

Das Wasser find ich super animiert, das passt
Die Fische find ich Klasse, auch wenn sie bissl too much sind, dadurch dass die komplette Ani schon so megagenial ist.
Die Animation find ich allgemein sehr gelungen, die Möwen find ich großartig. Das mit dem Wetterwechsel find ich witzig und kreativ, sehr gelungen.
Kleiner Minuspunkt sind die Woklen, find toll dass sie so schön fluffig sind, aber ich würde mich für eine Richtung entscheiden, denn so wild durcheinander ist doch bissl unrealistisch, oder? Sähe bestimm auch gut aus, wenn sie ähnlich dem Wasser nach oben abziehen, als wenn sie in Richtung des Betrachters fluffen Beim gewitter fehlt nich bissl der Blitz, vielleicht der vom Logo dass der schön grell aufblitzt, oder geht das nicht?

Hoffe das war gehaltvoll, angebracht und konstruktiv   

Sorry das ich sage und bitte nicht falsch verstehen Inde.
Der ganze Flashbanner ist mir zu aufdringlich.
Es ist einfach zu viel Bewegung drin.
Es würde besser wirken, wenn eine kleine Animation für sich alleine drin währe.
Der Header lenkt zu sehr ab und sieht dazu grafisch  sehr amateurhaft aus.
Der weitere Style wirkt auf mich sehr anstrengend.
Farblich zu greller Kontrast und mit den Farbverläufen wird das ganze noch verschlimmert.
Dieses Hellblau dominiert sehr stark...zu stark.
Dazu kommen noch die Effekte die du eingebaut hast ...wenn man mit der Maus drüber geht ...wirkt kitschig auf mich ... und ich denke das braucht keiner
und belastet dazu nur den Pc und die Verbindung ... weil es ruckelt auch wenn ich scrolle.
Irgendwie bist du auf ein Irrweg ...manchmal ist weniger mehr.
Entschuldige...nur meine Meinung.

Hexekati schrieb:Das Wasser find ich super animiert, das passt
Die Fische find ich Klasse, auch wenn sie bissl too much sind, dadurch dass die komplette Ani schon so megagenial ist.
Die Animation find ich allgemein sehr gelungen, die Möwen find ich großartig. Das mit dem Wetterwechsel find ich witzig und kreativ, sehr gelungen.
Kleiner Minuspunkt sind die Woklen, find toll dass sie so schön fluffig sind, aber ich würde mich für eine Richtung entscheiden, denn so wild durcheinander ist doch bissl unrealistisch, oder? Sähe bestimm auch gut aus, wenn sie ähnlich dem Wasser nach oben abziehen, als wenn sie in Richtung des Betrachters fluffen :)Beim gewitter fehlt nich bissl der Blitz, vielleicht der vom Logo dass der schön grell aufblitzt, oder geht das nicht?

Hoffe das war gehaltvoll, angebracht und konstruktiv   

Na damit kann ich doch einmal etwas anfangen. 
Den Minuspunkt mit den Wolken habe ich bereits ausgeräumt, jetzt laufen die Wolken alle in eine Richtung. Die Wolken habe ich in PS mit einem Brush eingesetzt, das waren nur 2 Minuten, die CSS-Animation hingegen schon etwas aufwendiger.
Mit dem Gewitter, das werde ich wohl nicht hin bekommen.... ist immerhin alles nur über CSS animiert..... und soweit bin ich leider noch nicht.  
Was ich noch versuchen möchte, bei Mouse-Over ein wenig Regen mit einzusetzen. Dafür benötige ich jedoch erst noch eine transparente Texture mit Regentropfen.

Ja das war schon etwas gehaltvoller..... Danke.    

LG inde

---

M@tze schrieb:Sorry das ich sage und bitte nicht falsch verstehen Inde.
Der ganze Flashbanner ist mir zu aufdringlich.
Es ist einfach zu viel Bewegung drin.
Es würde besser wirken, wenn eine kleine Animation für sich alleine drin währe.
Der Header lenkt zu sehr ab und sieht dazu grafisch  sehr amateurhaft aus.
Der weitere Style wirkt auf mich sehr anstrengend.
Farblich zu greller Kontrast und mit den Farbverläufen wird das ganze noch verschlimmert.
Dieses Hellblau dominiert sehr stark...zu stark.
Dazu kommen noch die Effekte die du eingebaut hast ...wenn man mit der Maus drüber geht ...wirkt kitschig auf mich ... und ich denke das braucht keiner
und belastet dazu nur den Pc und die Verbindung ... weil es ruckelt auch wenn ich scrolle.
Irgendwie bist du auf ein Irrweg ...manchmal ist weniger mehr. [Sie müssen registriert oder eingeloggt sein, um das Bild sehen zu können.]
Entschuldige...nur meine Meinung.

Nun manch einem gefällt es, einem anderen wiederum nicht, dafür sind die Geschmäcker nun einmal verschieden. Ich stehe nun einmal auf Animationen.  

Hingegen scheinst Du nicht ganz verstanden zu haben worum es dort eigentlich geht. Es geht dort nicht um den Style, sondern nur um den Header und die darin enthaltenen Animationen die nur über das CSS gesteuert werden. Dafür habe ich keinerlei Java und erst recht kein Flash verwendet.   

Wo Du dort ein Flash siehst weiß ich beim besten Willen nicht und verstehe auch nicht warum die Seite bei Dir ruckeln sollte wenn Du scrollst.
Bei einem Ladevolumen von ca. 385kb..... vielleicht stimmt etwas mit Deiner Grafikkarte nicht?

LG inde

Schau mal bei Deviantart nach Regen-Brushes Da findest Du bestimmt das passende

Toll gemacht. Habe heute schon 3x deine Fische gefüttert   
Das Forum und die Farben sind ein Hit. Ich würde auf den Regen verzichten, damit es nicht zu überladen ist.
Das einzige was mich stört, ist der komische Pinsel am Cursor aber das ist Geschacksache.
Ansonsten TOP!

julie3 schrieb:Toll gemacht. Habe heute schon 3x deine Fische gefüttert   
Das Forum und die Farben sind ein Hit. Ich würde auf den Regen verzichten, damit es nicht zu überladen ist.
Das einzige was mich stört, ist der komische Pinsel am Cursor aber das ist Geschacksache.
Ansonsten TOP!

Danke julie3, die Fische hatten aber auch wieder sehr großen Hunger wie Du sicherlich bemerkt hast, leider hatte ich heute noch keine Zeit sie zu füttern.  

Der Header mit den Fischen ist derzeit in meinem Stammforum.

Nun geht es mit dem Regen leider um einen anderen Header hier in einem meiner Testforen, wenn Du dort einmal schauen magst. Dort versuche ich die Animationen nur über das CSS umzusetzen, ohne Java und Flash. Das bereit schon ein wenig Aufwand mehr.

LG inde

Aja, hab gerade angeschaut. Kannst du die Wolken nicht ein bisschen langsamer scrollen lassen? Ist halt meine Meinung. Wenn jetzt noch der Regen dazu kommt, wird man sonst schwindlig oder?
Sonst gefällt mir das Banner auch sehr gut.
Am besten ist das im Stammforum.
Jedenfalls alles super gemacht. Ich wünschte ich könnte sowas auch   

julie3 schrieb:Aja, hab gerade angeschaut. Kannst du die Wolken nicht ein bisschen langsamer scrollen lassen? Ist halt meine Meinung. Wenn jetzt noch der Regen dazu kommt, wird man sonst schwindlig oder?
Sonst gefällt mir das Banner auch sehr gut.
Am besten ist das im Stammforum.
Jedenfalls alles super gemacht. Ich wünschte ich könnte sowas auch   

Die Wolken ein wenig langsamer.... nun das liegt an der jeweiligen Auflösung.
Wenn man eine etwas größere Auflösung hat ziehen die Wolken etwas schneller und bei kleiner Auflösung etwas langsamer vorbei. Rührt daher, dass sich das Forum in der Breite automatisch an die Auflösung anpasst. Gibt man z.B. einen Zeitwert für eine Animation von 1 Sekunde von Links nach Rechts an, so wird dieser Weg auch in einer Sekunde zu 100% bestritten. Somit läuft die Anime auf einer kleineren Auflösung z.B. bei einer Breite von 1024px langsamer, als bei einer großen Auflösung von beispielsweise 1920px ab.
Komplizierte Mathematik, ich hoffe Du verstehst was ich meine. Etwas anderes wäre es bei einem Forum mit fester Breite, dort wäre das Tempo dann bei allen Auflösungen gleich schnell bzw. langsam.

---

Der Regen soll auch nur erscheinen, wenn man mit der Maus über den Header fährt. Bisher ist es so, dass sich der Hintergrund ein wenig verdunkelt (das Wetter verschlechtert sich) und das Logo ein wenig nach unten fährt sowie einen zusätzlichen Hintergrund erhält.

"Ich wünschte ich könnte sowas auch." So etwas kannst Du auch, man muss sich nur ein wenig mit CSS3 insbesondere CSS-Animation beschäftigen.
Auch für mich ist es noch Neuland und eigentlich auch noch ein wenig Zukunftsmusik, da immer noch nicht alle Browser das Selbe machen wie man es ihnen eigentlich sagt. Vor allem die Abwärtskompatibilität insbesondere beim Internet-Explorer lässt sehr zu wünschen übrig. Immerhin laufen derzeit noch 4 Versionen IE8/9/10/11 die sich zu sehr unterscheiden.
Ab Version 10 sind dann solche Animationen auch dort möglich, wobei die Version 8 für WinXP leider eingeschränkt ist da man auf XP keine höhere Version als die 8er installieren kann. Das hängt damit zusammen, dass Microsoft lieber neue Betriebssysteme und PC's verkaufen möchte, anstatt auch den Usern eine höhere Version als Upgrade/Update anbietet.

Also belese Dich einmal ein wenig im Netz und dann bekommst Du wie auch andere so etwas auch hin.

LG inde

Ich habe mir das auch gestern mal angesehen.
Ist schon nicht schlecht gemacht. Und ich muss sagen, das die Idee garnicht so schlecht ist.
Die meisten der eingesetzten CSS Regeln kennt man ja mehr oder weniger, aber diese so auf diese Weise einzusetzen, ist schon eine gute Idee.
Wenn man dann auch so bewandert ist, sich die benötigten Grafiken zu erstellen, ist es eigentlich ganz einfach.
Du solltest darüber nachdenken dir das schützen zu lassen.
Ich denke das das eine vollkommen neue Art ist diese Technik zu nutzen, aber das könnte in absehbarer Zeit schon ein Standart werden.
Wenn man nun auch noch ein Online Editor dafür entwickelt, dann kann man damit durchaus den Vogel abschießen.

So nun muss ich erst einmal schauen, dass ich hier niemanden im "Fred" mit meiner Antwort übersehe. Auch wenn ich hier heute bereits gelesen und noch nicht geantwortet habe, so ist dies keinesfalls so dass ich etwas ignorieren möchte, vielmehr wollte ich auch ein Ergebnis präsentieren.  

---

---

Hexekati schrieb:Schau mal bei Deviantart nach Regen-Brushes :)Da findest Du bestimmt das passende

Brushes für ein paar Regentropfen hatte ich bereits, trotzdem Danke.  
 
Mir ging es eher um eine transparente Texture oder ein Pattern, leider habe ich dazu im Netz nichts finden können, deshalb musste ich mir selbst eine erstellen.

Nun hat der Header noch einmal 5,77kb als Texture für den Regeneffekt bei Mouseover dazu bekommen. Nun setzt dann auch der Regen ein.   
Zugegeben hätte ich den Regeneffekt noch gerne etwas anders gehabt, dies wäre wiederum dann nur mit Java möglich gewesen. Aber Java wollte ich ja wegen der Ladezeit und anderen Störungen ausschließen und es komplett über das CSS lösen. Und das war doch eine recht anspruchsvolle Aufgabe den Regen umzusetzen.

Auch wird der Regen, wenn dieser von oben fällt nach unten zum Wasser hin etwas transparenter, bis er dann ganz abtaucht.  

LG inde

---

---

#Frank schrieb:Ich habe mir das auch gestern mal angesehen.
Ist schon nicht schlecht gemacht. Und ich muss sagen, das die Idee garnicht so schlecht ist.
Die meisten der eingesetzten CSS Regeln kennt man ja mehr oder weniger, aber diese so auf diese Weise einzusetzen, ist schon eine gute Idee.
Wenn man dann auch so bewandert ist, sich die benötigten Grafiken zu erstellen, ist es eigentlich ganz einfach.
Du solltest darüber nachdenken dir das schützen zu lassen. [Sie müssen registriert oder eingeloggt sein, um das Bild sehen zu können.]
Ich denke das das eine vollkommen neue Art ist diese Technik zu nutzen, aber das könnte in absehbarer Zeit schon ein Standart werden.
Wenn man nun auch noch ein Online Editor dafür entwickelt, dann kann man damit durchaus den Vogel abschießen.

Schützen lassen, ..... nun was ist heute zu Tage denn noch sicher. Auch kann man alles umgehen und kommt dann doch wieder an die Codes heran.  
So sehr neu ist das auch nicht, immerhin gibt es im Netz auch schon einige kleine Beispiele zu finden. So komplex allerdings einen Header zu gestalten, welcher sich dann auch noch an die jeweilige Desktop-Auflösung anpasst ..... nun auf die Idee bin ich alleine gekommen. 
Selbst einen Editor dafür entwickeln..... das wäre dann eine Arbeit.... die ich mir wohl eher nicht antun möchte.

Allerdings gibt es bereits eine teure Software auf dem Markt, mit der man Ansatzweise für einige Animationen nutzen kann. Zu dem recht teuren Anschaffungspreis kommen dann noch Jahres-Lizenzgebühren von fast 400,-€ pro Jahr hinzu. Auch werden bei dieser Software zusätzliche Javascripte erstellt die einige Aufgaben übernehmen.
Um solche Arbeiten nur mit CSS umzusetzen, dafür ist mir leider noch nichts im Netz begegnet.

Auch weißt Du sicherlich selbst aus eigener Erfahrung, dass es übt einen Code selbst zu schreiben.... als wenn man diesen generieren lässt.

Danke auch Dir für Dein Feedback.  

LG inde

---

EDIT: Link zur Seite

Manchmal staune ich schon sehr, wie schreibfaul man manchmal sein kein.    

Hier im Forum habe ich gelesen, dass jemand ein Script für ein paar fallende Kirschblüten sucht.  Leider darf ich dort nicht antworten.  

Nun habe ich mir gedacht, dass wäre zu einfach es über Java zu lösen, anstelle dessen habe ich es einmal versucht nur mit Hilfe von CSS-Animation umzusetzen. Sicherlich kann man diese CSS-Vorlage später dann auch für eine Schneeflocke, Laub o.ä. nutzen.
Das einmalige Ladevolumen für die Grafik beträgt lediglich 4,79kb und die Animation passt sich der entsprechenden Desktop-Auflösung an. In meinem Beispiel habe ich den entsprechenden Code dafür in ein Modul gepackt, jedoch sollte es auch in der Nachricht auf der Startseite möglich sein.
Ich hätte die HTML-Klassen zwar gerne in der Beschreibung der Webseite untergebracht, jedoch ist dort leider die Anzahl der Zeichen zu sehr begrenzt. 
Die Animation läuft im Hintergrund, direkt auf dem Body, sodass es auch möglich ist entsprechende Links im Forum anzuklicken.

Ohne die gesamte Seite zu bewerten (Ich weiß selber das dort zu viel Animationen laufen, ist ja immerhin auch nur ein Testforum.), würde ich gerne einmal erfahren was ihr so von der CSS-Animation mit den Kirschblüten haltet. Für den Internet-Explorer gilt wie immer, lauffähig erst ab Version IE10. 

Der Link zur Seite.

LG inde

Schaut ja Klasse aus.
Mich würde es aber beim Lesen und Schreiben stören, wenn dauern irgendwas herunterschneit. Trotzdem, eine gute Idee, wenn es wer mag. 

julie3 schrieb:Schaut ja Klasse aus.
Mich würde es aber beim Lesen und Schreiben stören, wenn dauern irgendwas herunterschneit. Trotzdem, eine gute Idee, wenn es wer mag. 

Danke.
Das stört aber auch wenn es als Java-Script läuft. Nun handelt es sich bei diesem Forum jedoch auch noch um ein transparentes. Wenn die Animation in ein normales Design ohne Transparenz eingefügt wäre, ....dann wären die Blüten auch nur an den Seiten zu sehen.

Übrigens funktioniert es nicht nur mit dem runter-schneien, sondern auch mit etwas was entgegengesetzt aufsteigen könnte, z.B. ein paar Blubberblasen o.ä..  

Danke für Dein Feedback. 

LG inde

Ja verstehe schon aber wenn man schon sowas einsetzt egal wie, soll es das Forum nicht treffen. Könnte mir vorstellen, seitwärts und nur paar Blätter über dem Banner. Auch als Hintergrundgrafik könnte das schön ausschaun, wenn es nicht zusehr von eigentlichen Sinn eines Forums ablenkt. Nur so als nette Beilage und zur Farbenauffrischung. Weisst was ich meine?
Sonst gefällt es mir sehr gut. Man vergisst einfach das Forum und bleibt am Bild hängen - und wie. So sollte es aber eher nicht sei.  

julie3 schrieb:Weisst was ich meine?

Ja ich weiß was Du meinst.   
Ich wollte es auch nur einmal über das CSS probieren, da dies die Ressourcen an Rechenleistung doch erheblich mehr als ein Java-Script schont.  

LG inde

Das ist ja das grösste Problem, dass die Rechenleistung nicht beachtet oder vergessen wird.
Meistens haben die User schon mehrere Scripte im Forum und so die Gefahr besteht, dass ein Script das andere aushebelt und irgendwann gar nix mehr läuft.
Über CSS wäre das mal eine willkommene Alternative.
Wäre ja toll, wenn es dazu auch den Code gibt   

Frag mal nach, ob du den hier posten darfst?

julie3 schrieb:Wäre ja toll, wenn es dazu auch den Code gibt   

Frag mal nach, ob du den hier posten darfst?

Den CSS-Code dazu habe ich verschlüsselt, sodass dieser nicht mehr gelesen und verändert werden kann.   
Wie dieser eingefügt werden muss, dazu müsste ich dann erst noch eine Anleitung schreiben. 

Wer fragt nach ob der Code hier gepostet werden darf, Du oder ich?

LG inde

DU frag nach beim Admin. Wäre schon für viele interessant.

War gerade deine Fische füttern, brauchst also heute nicht mehr