<body class="darkBg">
<div style="text-align: center;">
<input type="button" id="clear" value="Click to clear">
<input type="button" id="round" value="Rounded">
<input type="button" id="shadows" value="Shadows">
<input type="button" id="roundshadows" value="Rounded Shadows">
<input type="button" id="imgbut" value="Images">
<input type="button" id="collection" value="Snow Collection">
<input type="button" id="deviceorientation" value="Deviceorientation">
</div>
<div class="collectonme" style="display: none;">
<p>Collect on meeeeee!!!</p>
</div>
<div class="collectonme" style="display: none;">
<p>Collect on meeeeee!!!</p>
</div>
<div class="collectonme" style="display: none;">
<p>Collect on meeeeee!!!</p>
</div>
<img style="position:fixed;z-index:9999;top:0;left:0" src="https://bizweb.dktcdn.net/100/005/795/files/enp-top-left.png?v=1499658733950"/>
<img style="position:fixed;z-index:9999;top:0;right:0" src="https://bizweb.dktcdn.net/100/005/795/files/enp-top-right.png?v=1499658733960"/>
<div style="position:fixed;z-index:9999;bottom:-50px;left:0;width:100%;height:104px;background:url(https://bizweb.dktcdn.net/100/005/795/files/enp-footer.png?v=1499658733937) repeat-x bottom left;"></div>
<img style="position:fixed;z-index:9999;bottom:20px;left:20px" src="https://bizweb.dktcdn.net/100/005/795/files/enp-bottom-left.png?v=1499658733930"/>
</body>
html,body{padding:0; margin:0; min-height: 100%; height:100%;}
body{padding-bottom:20px}
.darkBg{background:#2d0f0f url(https://bizweb.dktcdn.net/100/005/795/files/smashing.jpg?v=1499658733970) top center;background-repeat:no-repeat;background-size: auto 100%;}
.lightBg{background : url(https://bizweb.dktcdn.net/100/005/795/files/snow.jpg?v=1499658734977) #b1dde0 top center no-repeat;background-size: auto 100%;}
.collectonme{margin:120px auto; background: red; width:50%; text-align:center; font-size:1.2em; color:#fff;}
$(document).ready(function(){
$('.collectonme').hide();
//Start the snow default options you can also make it snow in certain elements, etc.
$(document).snowfall();
$("#clear").click(function(){
$(document).snowfall('clear'); // How you clear
});
$("#round").click(function(){
document.body.className = "darkBg";
$('.collectonme').hide();
$(document).snowfall('clear');
$(document).snowfall({round : true, minSize: 5, maxSize:8}); // add rounded
});
$("#shadows").click(function(){
document.body.className = "lightBg";
$('.collectonme').hide();
$(document).snowfall('clear');
$(document).snowfall({shadow : true, flakeCount:200}); // add shadows
});
$("#roundshadows").click(function(){
document.body.className = "lightBg";
$('.collectonme').hide();
$(document).snowfall('clear');
$(document).snowfall({shadow : true, round : true, minSize: 5, maxSize:8}); // add shadows
});
$("#collection").click(function(){
$(document).snowfall('clear');
document.body.className = "darkBg";
$('.collectonme').show();
$(document).snowfall({collection : '.collectonme', flakeCount : 250});
});
$("#imgbut").click(function(){
$('.collectonme').hide();
$(document).snowfall('clear');
document.body.className = "darkBg";
$(document).snowfall({image :"https://bizweb.dktcdn.net/100/005/795/files/flake.png?v=1499658733967", minSize: 10, maxSize:32});
});
$("#deviceorientation").click(function(){
$(document).snowfall('clear');
$('.collectonme').hide();
document.body.className = "darkBg";
$(document).snowfall({deviceorientation : true, round : true, minSize: 5, maxSize:8});
});
});
<script src='//bizweb.dktcdn.net/100/005/795/themes/534730/assets/jquery-2.2.4.min.js?1495533194821' type='text/javascript'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js"></script>