Snefald

I denne artikel:


    Kom i julestemning med snefald på din webshop

    Med denne app kan du indsætte "snefald" og skabe julestemning på din webshop. Snefaldet har indbygget datofunktion og vises kun i december måned.

     

    Sådan kommer du i gang

    For at installere denne app på din webshop, skal du blot kopiere en lille stump kode (JavaScript) og sætte den ind i dit design. Vi gennemgår indsætning af JavaScript trin for trin i denne artikel.

    Gå ind i Design manager og find den ønskede design template. Klik på knappen Ret design, og klik derefter på knappen Indsæt JavaScript i toppen af siden. Indsæt herefter nedenstående kodestump i redigeringsfeltet med titlen "Til indsættelse i bunden af <body:>":

    1. Indsæt koden under "Til indsættelse i bunden af <body:>". Bemærk: Hvis koden indsættes i <head:> tagget vil dokumentet endnu ikke være færdiggenereret når scriptet afvikles, og vil derfor ikke fungere efter hensigten
    2. Husk at gemme dine ændringer

    Koden finder du her:

    
    <script>var currentTime=new Date,monthInt=currentTime.getMonth();11===monthInt&&function(e,n,t,o){var r=32,l="#ffffff",i=0,a=8,s=8,d=.4,f=.8,c=n.createDocumentFragment(),u=null,h=[],y=null,v=null,m=null,x=null,p=1;function g(e,n){return Math.random()*e+n}function b(){var e;e=g(d,.2),m=Math.random()>=.5?-1*e:e,x=g(f,.2)}function w(){y=e.innerWidth-a,v=e.innerHeight-s}function M(){var e=this;e.x=g(y-a,0),e.y=-1*g(v,10),e.vX=null,e.vY=null,e.o=n.createElement("div"),e.o.style.background=l,e.o.style.position="fixed",e.o.style.zIndex="inherit",e.o.style.top=e.o.style.left=0,e.o.style.width=e.o.style.height=Math.floor(g(a,2))+"px",e.o.style.borderRadius="50%",u.appendChild(e.o),e.refresh=function(){var n,t,o;n=e.o,t=e.x,o=e.y,n.style.transform="translate("+(t-a)+"px,"+(o-s)+"px)"},e.move=function(){e.x+=e.vX*p,e.y+=e.vY,e.x>=y-a||y-e.x<a?e.x=0:e.vX*p<0&&e.x-i<-a&&(e.x=y-a-1),e.refresh(),e.y>v&&e.recycle()},e.recycle=function(){e.o.style.display="none",e.x=g(y-a,0),e.y=-1*g(v,10),e.vX=m/Math.abs(m)*(Math.abs(m)+g(d,.1)),e.vY=x+g(f,.1),e.refresh(),e.o.style.display="block"},e.recycle(),e.refresh()}function E(){for(var n=0;n<h.length;n++)h[n].move();e.requestAnimationFrame(E)}w(),b(),(u=n.createElement("div")).id="snow",u.style.zIndex="9999",u.style.pointerEvents="none",c.appendChild(u),n.body.appendChild(c),function(e){for(var n=0;n<e;n++)h[h.length]=new M}(r),E(),e.addEventListener("resize",w)}(window,document);</script>
        

    Bemærk: Så snart du klikker gem vil snefaldet være online.

    Ændring af periode: Hvis du ønsker at snefaldet f.eks. skal starte i November måned, så kan du ændre "11===monthInt" til "(11===monthInt || 10===monthInt)" i scriptet. Da kollektioner i JavaScript er 0-indekseret er November lig med "10" og December "11".

     

    Nyttige links

    • Læs mere om hvordan du klargør shoppen til Black Friday og andre mærkedage i denne artikel
    • Du kan læse mere om tilpasning af design her
    • Læs mere om ændring af design med CSS i denne artikel
    • Læs mere om sikker redigering af design templates i denne artikel