Christmas Overlays 🎄

 

Copy and paste one, or both of the code snippets below, into the Header Code Injection area of the page or Index on which you'd like them to display.

 
snowoverlay.gif

Snowfall Overlay

Based on code written by Chenpy

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <div id="snowoverlay"></div><style>#snowoverlay{background-color:rgba(0,0,0,0.02);height:100vh;width:100vw;position:fixed;top:0;left:0;z-index:99999;pointer-events:none;background-image:url('https://static1.squarespace.com/static/56fe5ba420c64743836b25e3/t/5c0011d021c67ca694cbcdb6/1543508432588/snow1.png'), url('https://static1.squarespace.com/static/56fe5ba420c64743836b25e3/t/5c0011dd575d1fa3e66f2a85/1543508445323/snow2.png'), url('https://static1.squarespace.com/static/56fe5ba420c64743836b25e3/t/5c0011e6cd8366eb6ce97ad1/1543508454529/snow3.png');-webkit-animation:snow 20s linear infinite;-moz-animation:snow 20s linear infinite;-ms-animation:snow 20s linear infinite;animation:snow 20s linear infinite}@keyframes snow{0%{background-position:0px 0px, 0px 0px, 0px 0px}100%{background-position:1000px 1000px, 400px 400px, 300px 300px}}@-moz-keyframes snow{0%{background-position:0px 0px, 0px 0px, 0px 0px}100%{background-position:500px 1000px, 400px 400px, 300px 300px}}@-webkit-keyframes snow{0%{background-position:0px 0px, 0px 0px, 0px 0px}100%{background-position:500px 1000px, 400px 400px, 300px 300px}}@-ms-keyframes snow{0%{background-position:0px 0px, 0px 0px, 0px 0px}100%{background-position:500px 1000px, 400px 400px, 300px 300px}}</style>
 

christmascountdown.gif

Christmas Countdown

Based on code written by keveloper

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script>$(document).ready(function(){function daysUntilNext(month,day){var tday=new Date(),y=tday.getFullYear(),next=new Date(y,month-1,day);tday.setHours(0,0,0,0);if(tday>next)next.setFullYear(y+1);return Math.round((next-tday)/8.64e7);} var d=daysUntilNext(12,25);if(d===0){$('h1').show();$('h2').show();$('.santa').hide();}else{var text=d+' day'+(d>1?'s':'')+' until <span>Christmas!</span>';$('.until').html(text).show();} setInterval(draw,33);});</script> <div id="santa-box"><div class="santa"><div class="santa-head"> <span class="eyes"></span> <span class="eyebrows"></span> <span class="nose"></span> <span class="blush"></span> <span class="hat"></span> <span class="eyebrows"></span></div><div class="hat-top"></div></div><div class="container"><h1 hidden>Today is</h1><h2 hidden>Christmas!</h2> <span class="until"></span></div></div><style>#santa-box{position:fixed;bottom:30px;right:10px;z-index:9999}.container{display:flex;justify-content:center;align-items:center;z-index:999}.until{display:none;color:white;font-size:20px;padding:0.5em;background:#df2935;border-radius:10px;z-index:999999}.until span{color:#3f7d20;background:white;border-radius:7px;padding:0.2em}h2{padding:0.2em 0.4em;font-size:20px;margin-left:0.2em;color:green;background-image:linear-gradient(to bottom, white 50%, red 50%);background-size:100% 200%;border-radius:1em;animation:bg-swipe 5s ease-in-out infinite}h2:after{content:"";position:absolute;margin-left:-4em;margin-top:0.5em;height:0;width:0;border-radius:50%;background:#df2935;animation:bg-grow 2s ease-in-out forwards;z-index:-1}@keyframes bg-grow{100%{width:4000px;height:4000px;margin-top:-1800px;margin-left:-2000px}}.santa{position:relative;margin:4em 0 1em 0;display:flex;justify-content:center;animation:bounce 2s ease-in-out infinite;z-index:9999}.santa-head{position:relative;width:100px;height:100px;border-radius:50%;background-image:linear-gradient( to bottom, #df2935 30%, #f0e5d8 30%, #f0e5d8 67%, white 67% );overflow:hidden}.santa-head:before,.santa-head:after{content:"";position:absolute;width:15px;height:15px;top:100px;border-radius:50%;background:#fc6f88}.santa-head:before{left:5px}.santa-head:after{right:5px}.eyes:before,.eyes:after{content:"";position:absolute;width:7.5px;height:7.5px;border-radius:50%;background:#406e8e;top:42px}.eyes:before{left:25px}.eyes:after{right:25px}.eyebrows:before,.eyebrows:after{content:"";background:white;width:25px;height:7.5px;position:absolute;top:32px}.eyebrows:before{right:12.5px;border-radius:20px 0 20px 0}.eyebrows:after{left:12.5px;border-radius:0 20px 0 20px}.nose{position:absolute;width:7.5px;height:7.5px;border-radius:50%;background:#fc6f88;top:60px;left:46px}.nose:before,.nose:after{content:"";background:#d5dbd0;width:30px;height:10px;position:absolute;top:6px}.nose:before{right:2.5px;border-radius:20px 0 20px 0}.nose:after{left:2.5px;border-radius:0 20px 0 20px}.hat{position:absolute;top:15px;height:15px;width:100%;background:white}.hat-top{position:absolute;background-color:#df2935;width:65px;height:15px;margin-left:0;top:-2.5px;left:calc(50% - 32.5px);border-radius:200px 0 100px 0}.hat-top:after{content:"";position:absolute;background:white;height:10px;width:10px;margin-top:-5px;margin-left:60px;border-radius:50%}@keyframes bounce{10%{transform:translateY(-7.5px) rotate(15deg)}20%{transform:translateY(0)}30%{transform:translateY(0)}40%{transform:translateY(-4px) rotate(-15deg)}50%{transform:translateY(0)}}width: 100%;height:100%;position:fixed;background:transparent}.container{display:flex;justify-content:center;align-items:center}h1{font-size:20px;color:white}.until{display:none;color:white;font-size:20px;padding: .5em;background:#DF2935;border-radius:10px}.until span{color:#3F7D20;background:white;border-radius:7px;padding: .2em}h2{padding: .2em .4em;font-size:20px;margin-left: .2em;color:green;background-image:linear-gradient(to bottom, white 50%, red 50%);background-size:100% 200%;border-radius:1em;animation:bg-swipe 5s ease-in-out infinite}h2:after{content:'';position:absolute;margin-left:-4em;margin-top: .5em;height:0;width:0;border-radius:50%;background:#DF2935;animation:bg-grow 2s ease-in-out forwards;z-index:-1}@keyframes bg-grow{100%{width:4000px;height:4000px;margin-top:-1800px;margin-left:-2000px}}.santa{position:relative;margin:4em 0 1em 0;display:flex;justify-content:center;animation:bounce 2s ease-in-out infinite}</style>
Blog-settings.jpg