Spidersfalling

Link to article: Spidersfalling.


div#container-wrap 

#top-bar div.open-menu a {
    color: #993300;
    border-color: #993300;
}

#header-extra-div-1, #header-extra-div-2, #header-extra-div-3 {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0));
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0));
}
/* ---- SNOWFALL, adapted from https://github.com/elena-in-code/Css-Snow-Fall-Animation ---- */

#header-extra-div-1 {
    height: 270px;
    width: 99.4vw;
    position: absolute;
    left: calc((-100vw + 100%)/2);
    background: url('http://scp-sandbox-3.wikidot.com/local--files/mooagain/Spider.png');
    background-repeat: repeat;
    background-size: 230px;
    z-index: 2;
    pointer-events: none;
    animation: snowOne 83s infinite linear;
    filter: blur(1.3px);
}
#header-extra-div-2 {
    height: 270px;
    width: 99.4vw;
    position: absolute;
    left: calc((-100vw + 100%)/2);
    background: url('http://scp-sandbox-3.wikidot.com/local--files/mooagain/Spider.png');
    background-repeat: repeat;
    background-size: 370px;
    z-index: 2;
    pointer-events: none;
    animation: snowTwo 39s infinite linear;
    filter: blur(0.4px);
}
#header-extra-div-3 {
    height: 270px;
    width: 99.4vw;
    position: absolute;
    left: calc((-100vw + 100%)/2);
    background: url('http://scp-sandbox-3.wikidot.com/local--files/mooagain/Spider.png');
    background-repeat: repeat;
    background-size: 720px;
    z-index: 2;
    pointer-events: none;
    animation: snowThree 21s infinite linear;
    filter: blur(2.4px);
}
@keyframes snowOne{
    0%
    {
     background-position: 0px 0px;
            opacity: 0;
    }
    10%
    {
            opacity: 0.6;
    }
    90%
    {
            opacity: 0.5;
     }
    100%
    {
     background-position: 100px 750px;
     opacity:0;
    }
}
@keyframes snowTwo{
    0%
    {
     background-position: 0px -100px;
     opacity: 0;
    }
    8%
    {
            opacity: 0.74;
    }
    90%
    {
            opacity: 0.65;
     }
    100%
    {
     background-position: -50px 700px;
     opacity: 0;
    }
}
@keyframes snowThree{
    0%
    {
     background-position: 0px 100px;
     opacity: 0;
    }
    13%
    {
            opacity: 0.9;
    }
    91%
    {
            opacity: 0.8;
    }
    100%
    {
     background-position: 240px 750px;
     opacity: 0;
    }
}

:root 
#extra-div-1 {
    height: 2rem;
    width: 100%;
    top: 9rem;
    position: absolute;
    background: url('http://scp-sandbox-3.wdfiles.com/local--files/mooagain/Spider.png');
    background-repeat: repeat-x;
    background-size: 6.2rem;
    pointer-events: none;
    z-index: 9;
   animation: lightOne 3s infinite steps(1, end);
}
#extra-div-2 {
    height: 2rem;
    width: 100%;
    top: 9rem;
    position: absolute;
    background: url('http://scp-sandbox-3.wdfiles.com/local--files/mooagain/Spider.png');
    background-repeat: repeat-x;
    background-size: 6.2rem;
    pointer-events: none;
    z-index: 9;
   animation: lightTwo 3s infinite steps(1, end);
}
@keyframes lightOne {
    0%
    {
       opacity: 0;
    }
    50%
    {
       opacity: 1;
    }
    100%
    {
       opacity: 0;
    }
}
@keyframes lightTwo {
    0%
    {
       opacity: 1;
    }
    50%
    {
       opacity: 0;
    }
    100%
    {
       opacity: 1;
    }
}


#extrac-div-1, #extrac-div-2, #extrac-div-3 {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0));
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0));
}

#extrac-div-1 {
    height: 24rem;
    width: 100%;
    position: absolute;
    background: url('http://scp-sandbox-3.wdfiles.com/local--files/mooagain/Spider.png');
    background-repeat: repeat;
    background-size: 230px;
    z-index: 10;
    pointer-events: none;
    animation: snowOne 83s infinite linear;
    filter: blur(1.3px);
}
#extrac-div-2 {
    height: 24rem;
    width: 100%;
    position: absolute;
    background: url('http://scp-sandbox-3.wdfiles.com/local--files/mooagain/Spider.png');
    background-repeat: repeat;
    background-size: 370px;
    z-index: 10;
    pointer-events: none;
    animation: snowTwo 39s infinite linear;
    filter: blur(0.4px);
}
#extrac-div-3 {
    height: 24rem;
    width: 100%;
    position: absolute;
    background: url('http://scp-sandbox-3.wdfiles.com/local--files/mooagain/Spider.png');
    background-repeat: repeat;
    background-size: 720px;
    z-index: 10;
    pointer-events: none;
    animation: snowThree 21s infinite linear;
    filter: blur(2.4px);
}
@media (max-width: 767px) {
   #extrac-div-1, #extrac-div-2, #extrac-div-3 {
       height: 10.5rem;
   }
  #extra-div-1, #extra-div-2 {
       top: 10.2rem;
  }
}
@keyframes snowOne{
    0%
    {
     background-position: 0px 0px;
            opacity: 0;
    }
    10%
    {
            opacity: 0.6;
    }
    90%
    {
            opacity: 0.5;
     }
    100%
    {
     background-position: 100px 750px;
     opacity:0;
    }
}
@keyframes snowTwo{
    0%
    {
     background-position: 0px -100px;
     opacity: 0;
    }
    8%
    {
            opacity: 0.74;
    }
    90%
    {
            opacity: 0.65;
     }
    100%
    {
     background-position: -50px 700px;
     opacity: 0;
    }
}
@keyframes snowThree{
    0%
    {
     background-position: 0px 100px;
     opacity: 0;
    }
    13%
    {
            opacity: 0.9;
    }
    91%
    {
            opacity: 0.8;
    }
    100%
    {
     background-position: 240px 750px;
     opacity: 0;
    }
}

(none)

theme:black-highlighter-theme

```
code
```
```
code
```

[[iftags +theme]]
[[>]]
[[module Rate]]
[[/>]]

This is a theme based on [https://scp-wiki.wikidot.com/theme:xmas the xmas theme] originally created by [[*user Dc_Yerko]] for the [[[http://lafundacionscp.wikidot.com|Spanish Translation Site]]] and adapted by [[*user stormbreath]]. Code for the snow flakes adapted by [[*user EstrellaYoshte]].

Modified by [[*user Mooagain]] to be more fitting for Halloween, also drew the spider image.

Use it on your own article with the following:

[[div class="code"]]
@@[[include theme:spidersfalling@@
@@|spidersfalling-spiders= --]]]@@
[[/div]]


Likewise, to use with Black Highlighter:

[[div class="code"]]
@@[[include theme:black-highlighter-theme]]@@
@@[[include theme:spidersfalling@@
@@|spidersfalling-spiders-bhl= --]]]@@
[[/div]]



------

[[module CSS show="true"]]
/*
    Spiders Theme
    [2020 Wikidot Theme]
       Originally made by Dc_Yerko for the Spanish Branch
       Ported to -EN by stormbreath
       Modified by Mooagain
*/

#top-bar div.open-menu a {
    color: #993300;
    border-color: #993300;
}

#header-extra-div-1, #header-extra-div-2, #header-extra-div-3 {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0));
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0));
}

/* ---- SNOWFALL, adapted from https://github.com/elena-in-code/Css-Snow-Fall-Animation ---- */

#header-extra-div-1 {
    height: 270px;
    width: 99.4vw;
    position: absolute;
    left: calc((-100vw + 100%)/2);
    background: url('http://scp-sandbox-3.wdfiles.com/local--files/mooagain/Spider.png');
    background-repeat: repeat;
    background-size: 230px;
    z-index: 2;
    pointer-events: none;
    animation: snowOne 83s infinite linear;
    filter: blur(1.3px);
}
#header-extra-div-2 {
    height: 270px;
    width: 99.4vw;
    position: absolute;
    left: calc((-100vw + 100%)/2);
    background: url('http://scp-sandbox-3.wdfiles.com/local--files/mooagain/Spider.png');
    background-repeat: repeat;
    background-size: 370px;
    z-index: 2;
    pointer-events: none;
    animation: snowTwo 39s infinite linear;
    filter: blur(0.4px);
}
#header-extra-div-3 {
    height: 270px;
    width: 99.4vw;
    position: absolute;
    left: calc((-100vw + 100%)/2);
    background: url('http://scp-sandbox-3.wdfiles.com/local--files/mooagain/Spider.png');
    background-repeat: repeat;
    background-size: 720px;
    z-index: 2;
    pointer-events: none;
    animation: snowThree 21s infinite linear;
    filter: blur(2.4px);
}

@keyframes snowOne{
    0%
    {
     background-position: 0px 0px;
            opacity: 0;
    }
    10%
    {
            opacity: 0.6;
    }
    90%
    {
            opacity: 0.5;
     }
    100%
    {
     background-position: 100px 750px;
     opacity:0;
    }
}
@keyframes snowTwo{
    0%
    {
     background-position: 0px -100px;
     opacity: 0;
    }
    8%
    {
            opacity: 0.74;
    }
    90%
    {
            opacity: 0.65;
     }
    100%
    {
     background-position: -50px 700px;
     opacity: 0;
    }
}
@keyframes snowThree{
    0%
    {
     background-position: 0px 100px;
     opacity: 0;
    }
    13%
    {
            opacity: 0.9;
    }
    91%
    {
            opacity: 0.8;
    }
    100%
    {
     background-position: 240px 750px;
     opacity: 0;
    }
}
[[/module]]
[[/iftags]]


[!-- {$spidersfalling-header}
[[module css]]

div#container-wrap 

#top-bar div.open-menu a {
    color: #993300;
    border-color: #993300;
}
[[/module]]
[!----]


[!-- {$spidersfalling-spiders}
[[module css]]
#header-extra-div-1, #header-extra-div-2, #header-extra-div-3 {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0));
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0));
}
/* ---- SNOWFALL, adapted from https://github.com/elena-in-code/Css-Snow-Fall-Animation ---- */

#header-extra-div-1 {
    height: 270px;
    width: 99.4vw;
    position: absolute;
    left: calc((-100vw + 100%)/2);
    background: url('http://scp-sandbox-3.wikidot.com/local--files/mooagain/Spider.png');
    background-repeat: repeat;
    background-size: 230px;
    z-index: 2;
    pointer-events: none;
    animation: snowOne 83s infinite linear;
    filter: blur(1.3px);
}
#header-extra-div-2 {
    height: 270px;
    width: 99.4vw;
    position: absolute;
    left: calc((-100vw + 100%)/2);
    background: url('http://scp-sandbox-3.wikidot.com/local--files/mooagain/Spider.png');
    background-repeat: repeat;
    background-size: 370px;
    z-index: 2;
    pointer-events: none;
    animation: snowTwo 39s infinite linear;
    filter: blur(0.4px);
}
#header-extra-div-3 {
    height: 270px;
    width: 99.4vw;
    position: absolute;
    left: calc((-100vw + 100%)/2);
    background: url('http://scp-sandbox-3.wikidot.com/local--files/mooagain/Spider.png');
    background-repeat: repeat;
    background-size: 720px;
    z-index: 2;
    pointer-events: none;
    animation: snowThree 21s infinite linear;
    filter: blur(2.4px);
}
@keyframes snowOne{
    0%
    {
     background-position: 0px 0px;
            opacity: 0;
    }
    10%
    {
            opacity: 0.6;
    }
    90%
    {
            opacity: 0.5;
     }
    100%
    {
     background-position: 100px 750px;
     opacity:0;
    }
}
@keyframes snowTwo{
    0%
    {
     background-position: 0px -100px;
     opacity: 0;
    }
    8%
    {
            opacity: 0.74;
    }
    90%
    {
            opacity: 0.65;
     }
    100%
    {
     background-position: -50px 700px;
     opacity: 0;
    }
}
@keyframes snowThree{
    0%
    {
     background-position: 0px 100px;
     opacity: 0;
    }
    13%
    {
            opacity: 0.9;
    }
    91%
    {
            opacity: 0.8;
    }
    100%
    {
     background-position: 240px 750px;
     opacity: 0;
    }
}
[[/module]]
[!----]

[!-- {$spidersfalling-header-bhl}
[[module css]]
:root 
#extra-div-1 {
    height: 2rem;
    width: 100%;
    top: 9rem;
    position: absolute;
    background: url('http://scp-sandbox-3.wdfiles.com/local--files/mooagain/Spider.png');
    background-repeat: repeat-x;
    background-size: 6.2rem;
    pointer-events: none;
    z-index: 9;
   animation: lightOne 3s infinite steps(1, end);
}
#extra-div-2 {
    height: 2rem;
    width: 100%;
    top: 9rem;
    position: absolute;
    background: url('http://scp-sandbox-3.wdfiles.com/local--files/mooagain/Spider.png');
    background-repeat: repeat-x;
    background-size: 6.2rem;
    pointer-events: none;
    z-index: 9;
   animation: lightTwo 3s infinite steps(1, end);
}
@keyframes lightOne {
    0%
    {
       opacity: 0;
    }
    50%
    {
       opacity: 1;
    }
    100%
    {
       opacity: 0;
    }
}
@keyframes lightTwo {
    0%
    {
       opacity: 1;
    }
    50%
    {
       opacity: 0;
    }
    100%
    {
       opacity: 1;
    }
}
[[/module]]
[!----]

[!-- {$spidersfalling-spiders-bhl}
[[module css]]

#extrac-div-1, #extrac-div-2, #extrac-div-3 {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0));
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0));
}

#extrac-div-1 {
    height: 24rem;
    width: 100%;
    position: absolute;
    background: url('http://scp-sandbox-3.wdfiles.com/local--files/mooagain/Spider.png');
    background-repeat: repeat;
    background-size: 230px;
    z-index: 10;
    pointer-events: none;
    animation: snowOne 83s infinite linear;
    filter: blur(1.3px);
}
#extrac-div-2 {
    height: 24rem;
    width: 100%;
    position: absolute;
    background: url('http://scp-sandbox-3.wdfiles.com/local--files/mooagain/Spider.png');
    background-repeat: repeat;
    background-size: 370px;
    z-index: 10;
    pointer-events: none;
    animation: snowTwo 39s infinite linear;
    filter: blur(0.4px);
}
#extrac-div-3 {
    height: 24rem;
    width: 100%;
    position: absolute;
    background: url('http://scp-sandbox-3.wdfiles.com/local--files/mooagain/Spider.png');
    background-repeat: repeat;
    background-size: 720px;
    z-index: 10;
    pointer-events: none;
    animation: snowThree 21s infinite linear;
    filter: blur(2.4px);
}
@media (max-width: 767px) {
   #extrac-div-1, #extrac-div-2, #extrac-div-3 {
       height: 10.5rem;
   }
  #extra-div-1, #extra-div-2 {
       top: 10.2rem;
  }
}
@keyframes snowOne{
    0%
    {
     background-position: 0px 0px;
            opacity: 0;
    }
    10%
    {
            opacity: 0.6;
    }
    90%
    {
            opacity: 0.5;
     }
    100%
    {
     background-position: 100px 750px;
     opacity:0;
    }
}
@keyframes snowTwo{
    0%
    {
     background-position: 0px -100px;
     opacity: 0;
    }
    8%
    {
            opacity: 0.74;
    }
    90%
    {
            opacity: 0.65;
     }
    100%
    {
     background-position: -50px 700px;
     opacity: 0;
    }
}
@keyframes snowThree{
    0%
    {
     background-position: 0px 100px;
     opacity: 0;
    }
    13%
    {
            opacity: 0.9;
    }
    91%
    {
            opacity: 0.8;
    }
    100%
    {
     background-position: 240px 750px;
     opacity: 0;
    }
}
[[/module]]
[!----]

Spidersfalling

Module Styles

Inline Styles

Includes

CSS Classes

Page Source