Skapa fallande snöflingor över en bild

Inför jul kan det vara trevligt att skapa lite vinterkänsla i webbshopen. Den här guiden visar hur man enkelt kan skapa fallande snö över en bild på startsidan. 

Visa exempel i demoshopen

På webbplatsen CodePen finns en uppsjö av kodexempel och väldigt många kan användas med hjälp av widgeten "Fri HTML-kod". En sökning på "snow" i CodePen ger över 20.000 träffar! I det här exemplet kommer följande snöeffekt användas: 

Gör så här i admin:

1. Gå till Webbplats -> Sidor -> Startsida (eller välj en testsida först att jobba med)
2. Klicka på knappen Lägg till Widget.
3. Välj widgeten Fri HTML-kod och klicka på knappen Nästa.
4. Under fliken Allmänna inställningar ska Rubrik, Bakgrundsbild och Höjd anges.
   • Rubrik ska vara något som beskriver widgeten i admin, t.ex. "Julhälsning" (visas ej i webbshopen).
   • Bakgrundsbild är själva bilden som snön faller över, t.ex. en julhälsning, kampanjbild eller liknande.
   • Höjd ska anges i pixlar och ska vara exakt samma som bakgrundsbildens höjd.
5. Under fliken Widgetinställningar ska följande kod kopieras och klistras in:
   

   <canvas id="snow"></canvas>
   <script type="text/javascript">
   var canvas = document.getElementById('snow'),
       ctx = canvas.getContext('2d'),
       width = ctx.canvas.width = document.body.offsetWidth,
       height = ctx.canvas.height = document.body.offsetHeight,
       animFrame = window.requestAnimationFrame ||
                   window.mozRequestAnimationFrame ||
                   window.webkitRequestAnimationFrame ||
                   window.msRequestAnimationFrame,
       snowflakes = [];
   
   window.onresize = function() {
     width = ctx.canvas.width = document.body.offsetWidth,
       height = ctx.canvas.height = document.body.offsetHeight;
   }
   
   function update() {
     for (var i = 0; i < snowflakes.length; i++) {
       snowflakes[i].update();
     }
   }
   
   function Snow() {
     this.x = random(0, width);
     this.y = random(-height, 0);
     this.radius = random(0.5, 3.0);
     this.speed = random(1, 3);
     this.wind = random(-0.5, 3.0);
   }
   
   Snow.prototype.draw = function() {
     ctx.beginPath();
     ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
     ctx.fillStyle = '#fff';
     ctx.fill();
     ctx.closePath();
   }
   
   Snow.prototype.update = function() {
     this.y += this.speed;
     this.x += this.wind;
   
     if (this.y > ctx.canvas.height) {
       this.y = 0;
       this.x = random(0, width);
     }
   }
   
   function createSnow(count) {
     for (var i = 0; i < count; i++) {
       snowflakes[i] = new Snow();
     }
   }
   
   function draw() {
     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
     for (var i = 0; i < snowflakes.length; i++) {
       snowflakes[i].draw();
     }
   }
   
   function loop() {
     draw();
     update();
     animFrame(loop);
   }
   
   function random(min, max) {
     var rand = (min + Math.random() * (max - min)).toFixed(1);
     rand = Math.round(rand);
     return rand;
   }
   
   createSnow(150);
   loop();
   </script>
   
   

6. Klicka på Spara.

Hur gör jag för att länka bilden?

Skapa en länk runt <canvas>-taggen i koden på första raden. Exempel:

<a href=""><canvas id="snow"></a>

Ange din länk mellan "", t.ex. "/sv/articles/3220/jackor".

Hur kan jag visa fler / mindre snöflingor?

Öka/minska värdet 150 i följande kodrad (nästan längst ned):

createSnow(150);