Spidersfalling
This is a theme based on the xmas theme originally created by Dc_Yerko for the Spanish Translation Site and adapted by stormbreath. Code for the snow flakes adapted by EstrellaYoshte.
Modified by Mooagain to be more fitting for Halloween, also drew the spider image.
Use it on your own article with the following:
[[include theme:spidersfalling
|spidersfalling-spiders= --]]]
Likewise, to use with Black Highlighter:
[[include theme:black-highlighter-theme]]
[[include theme:spidersfalling
|spidersfalling-spiders-bhl= --]]]
/* 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; } }
page revision: 2, last edited: 22 Oct 2022 22:18