A cool Snow Effect on your site with PREFERENCES!

  • 1
  • Idea
  • Updated 7 years ago
Hey everyone! I have got some pretty good feedback on my Christmas Site's feature the "Snow Options/Preferences" so I decided to post the code so you can put it on your site!

Here is the code, add this code after your current snow storm code:

<!--

<style type="text/css">
#options_box {
background-color:white;
border-right:1px solid black;
border-left:1px solid black;
border-top:none;
border-bottom:1px solid black;
width:300px;
padding-top:10px;
padding-bottom:10px;
padding:3px;
position:fixed;
top:12.8%;
right:18%;
border-top-left-radius:10px;
-moz-border-top-left-radius:10px;
-webkit-border-top-left-radius:10px;
border-bottom-right-radius:10px;
-moz-border-bottom-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
-moz-border-bottom-left-radius:10px;
-webkit-border-bottom-left-radius:10px;

z-index:2000;

}

#options_div {
position:fixed;
top:10%;
right:18%;
}

#options_text {
color:black;
}

#options_text:hover {
text-decoration:none;
color:grey;

}

#options_link {
background-color:white;
padding:5px;
border-top:1px solid black;
border-right:1px solid black;
border-left:1px solid black;
border-top-left-radius:10px;
border-top-right-radius:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-moz-border-top-left-radius:10px;
-moz-border-top-right-radius:10px;
-o-border-top-left-radius:10px;
-o-border-top-right-radius:10px;
}

.highlight {
width:100%;
height:30px;
cursor:pointer;
color:black;
}

.highlight:hover {
background-color:#B3DCFC;
width:100%;
height:30px;

}

a.options_link:link, a.options_link:visited {
text-decoration:none;
color:#0095FF;
border-bottom:1px dashed #59BAFF;
}

a.options_link:hover {
text-decoration:none;
color: #0078A1;
border-bottom:1px dashed navy;

}
</style>

<script type="text/javascript">
//JS for turning the snow on and off

function hideSnow() {
document.getElementById('turn_off_snow').style.display='none';
document.getElementById('turn_on_snow').style.display='block';
snowStorm.toggleSnow();
}

function showSnow() {
document.getElementById('turn_off_snow').style.display='block';
document.getElementById('turn_on_snow').style.display='none';
snowStorm.toggleSnow();
}

</script>

<script type="text/javascript">
//Change the "►" arrow to a "▼" arrow and vice-versa

oldTextAry = new Array();
function changeText (fieldObj, newTexStr) {
if (newTexStr == fieldObj.innerHTML) {
fieldObj.innerHTML = oldTextAry[fieldObj.id];
} else {
oldTextAry[fieldObj.id] = fieldObj.innerHTML;
fieldObj.innerHTML = newTexStr;
}
}
</script>

<div id="options_toggler" style="cursor:arrow;" >
<div id="options_div" >
<div id="options_link">
<font size="2" face="arial"> <span id="options_text" title="Click here to change your settings" style="cursor:pointer;" onclick="changeText(this,'▼ Preferences');$('#options_box').slideToggle(800);">► Preferences</span>
</font>
</div>
</div>
</div>
<div id="options_box" style="display:none;">
<br>
<font color="black" face="arial" size="3"><span style="padding-left:20px;"></span>Preferences</font> <br><br><br>
<div>
<div class="highlight" id="turn_off_snow" onclick="hideSnow();"><span style="padding-left:20px;"></span>Turn the Snow off </div>
<div class="highlight" id="turn_on_snow" onclick="showSnow();" style="display:none;"><span style="padding-left:20px;"></span>Turn the Snow back on</div>
<div class="highlight" onclick="snowStorm.randomizeWind();"><span style="padding-left:20px;"></span>Change Wind Direction</div>
<div class="highlight" id="turn_off_music" onclick="hideMusic();"><span style="padding-left:20px;"></span>Turn the Music off</div>
<div class="highlight" id="turn_on_music" onclick="showMusic();" style="display:none;"><span style="padding-left:20px;"></span>Turn the Music back on </div><br>

</div>

-->

Yeah, I know it is kind of long but every part of it makes it all work together! It is almost exactly like on this site: http://www.santas-workshop.tk But on that site I am going to make it a little different so mine doesn't look the same as everyone else's and so it doesn't look like I took it from people even though I built it from scratch! :)

So I hope you like this code, and I am sure lots of you have been waiting for this code to be released!

I hope this helps!

Sincerely,
Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
  • happy

Posted 7 years ago

  • 1
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Thanks for sharing this with the community Nathan!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
No problem, Laura! Hopefully it helps out some people here.

Cheers!