Sneeuw achtergrond

Jurrian Nijland

07/12/2011 17:34:16

Ben een tijdje gestopt, maar nu toch weer bezig met mijn website TeenFM. Nu de kerst er al een beetje aan zit te komen, wil ik ongeveer 1 week van te voren een leuke kerst achtergrond. Mijn idee was om witte sneeuwvlokjes over de al bestaande blauwe achtergrond vallen:

http://www.uploadplaatjes.nl/plaatjes/8/302941.png

Dus over de blauwe achtergrond wil ik witte sneeuwvlokken. Hoe kan ik dit het beste doen in CSS? De juiste sneeuwvlokken kan ik zo vinden, bijvoorbeeld op deze site http://www.scri8e.com/h/xmas/CICED/SnoAni/ :P

Maar hoe moet ik het in de CSS inpakken, dus de huidige blauwe achergrond houden maar de gif er over heen.

Groeten,
Jurrian

PHP hulp

25/05/2012 18:06:39

Gesponsorde koppelingen:

Vincent Huisman

07/12/2011 17:41:25

je kan css3 gebriuken voor een dubbele achtergrond afbeelding:
http://www.css3.info/preview/multiple-backgrounds/

Jacco Brandt

07/12/2011 17:48:26

en dan een .gif als 2e achtergrond.

Milo S

07/12/2011 18:20:23

Ja theoretisch gezien wel ja. Let wel op dit is nog niet crossbrowser...

- Aar -

07/12/2011 18:38:09

Ik zou in iedergeval zeker niet aan javascriptjes beginnen die sneeuwvlokken naar beneden laten dwarrelen. Gezien de berekeningen die er gemaakt worden om ze omlaag te laten komen * het aantal sneeuwvlokken, gaat dit zeker wel wat rekenkracht van de CPU vereisen.

Resultaat, de browser krijgt het behoorlijk druk en video's kunnen schokken (ook in ander tabblad) en je browser wordt wat trager. Op een single-core processor is het helemaal om te huilen dan op een quad-core omdat je echt 90% van de CPU zit op te vreten aan zo iets onnodigs. En met zulke onnodige traagheid wil je toch niet je bezoekers opzadelen?

Maar goed, je gebruikt een gif'je, niks mis, maar vinden je bezoekers dit ook tof? Het kan ook erg afleidend zijn.

Dit geheel is geschreven voor anderen die ook iets dergelijks van JS van plan zijn. Maar ik raad wel aan (jQuery is een mooie) om de sneeuw togglebaar te maken :P.

Gewijzigd op 07/12/2011 18:41:37 door - Aar -

Wouter J

07/12/2011 19:16:36

Of gebruik CSS3 animations: http://tinkerbin.com/Q47HVjkD :D

Je kan ook -als je geen multiple backgrounds wilt gebruiken- kiezen om een extra divje (of span of i of wat voor tag dan ook) aan te maken. Geef deze dan position: absolute; mee, zet het met z-index op de achtergrond en maakt de volledige breedte (top:0;right:0;bottom:0;left:0;)

Jurrian Nijland

07/12/2011 19:19:33

Bedankt voor de reacties allemaal!
Even als reactie op Aar, ik was het niet van plan om het met javascript te doen ;). Je hebt wel gelijk. Hoe dan ook, ik wou iets doen om mijn site in kerst sferen te brengen en heb wat rond gevraagd, waar dan toch wel iets als "waarom doe je geen sneeuw op de achtergrond" uit kwam. Wou het dus even uitproberen, misschien is het wel niks aan, dan haal ik het ook zo weer weg.

Nogmaals bedankt, ik ga is wat experimenteren met alles :) Jullie horen snel weer of het gelukt is :)

Tobias Tobias

07/12/2011 20:07:09

Ik denk dat dingen als je logo 'ondersneeuwen', zoals hier op phphulp, en andere winter-zaken op de achtergrond, beter bevallen dan irritante bewegende sneeuwvlokjes. Ik persoonlijk wordt er in ieder geval geïrriteerd van al die bewegingen

php knipper

07/12/2011 20:43:42

onderaan een berg sneeuw leggen kan ook niet slecht zijn ;)

Ger van Steenderen

07/12/2011 20:50:29

Php knipper op 07/12/2011 20:43:42:

onderaan een berg sneeuw leggen kan ook niet slecht zijn ;)

Ligt eraan wie erbij ligt :P

Francis van den Dobbeklsteen

18/12/2011 13:07:32

Ik zou graag hulp willen, ook ik wil graag op mijn forum iets aan de kerstsfeer doen.
http://www.private-eye.nl.
Op de hoofdpagina zou ik wat liggend sneeuw willen en onder logo is er ruimte voor een plaatje, maar hoe doe ik dat?

PHPhulp is een Nederlandstalige PHP community sinds 2002. Je vindt hier PHP tutorials, PHP scripts, PHP boeken en nog veel meer. Alles is geheel gratis!