Making it Snow on SharePoint

By MarionGeneral, jQuery, SharePoint

snowflakeEvery once in a while I like to bring some additional holiday spirit here to INPO. I saw this as an opportunity to liven up the place a little. Since Georgia doesn’t get as much snow, I decided to bring a little snow to us. I found a plugin that allows me to quickly add snowfall to my SharePoint 2010 site.

To reduce the distraction of flurries falling all over the place, I only added the snow fall to the home page of our site. With a 3rd party jQuery plugins and jQuery 1.7.1, I was able to add the snowy effect.

Granted, this was only added to a single page. You can add this same plugin to your Master Page and get the same effect on every page. I just chose to not have it all over my farm.

Demo

http://www.jqueryrain.com/?LeiRAVGW

 

What you’ll need to make it snow on a page:

  • At LEAST jQuery 1.7.1
  • jQuery Snowing Effect Plugin – by jQueryRain
  • Content Editor Web Part

The first thing you’re going to want to do is add the jQuery file somewhere you can access it from the page you want to add the snow effect on. Or you could use the CDN from Google. You must use at least jQuery 1.7.1 or newer.

When you have your CDN link, add the source code as well as the CDN to the HTML side of the Content Query Web Part. If all goes well, you should start seeing flurries across your screen.

There are options for the snowflake that you can adjust

minSize – min size of snowflake, 10 by default

maxSize – max size of snowflake, 20 by default

newOn – frequency in ms of appearing of new snowflake, 500 by default

flakeColor – color of snowflake, #FFFFFF by default

Source Code

 

<script type=”text/javascript”>

$(document).ready(function() {

var $flake = $('

').css({'position': 'absolute', 'top': '-50px'}).html('❄'),




documentHeight              = $(document).height(),
documentWidth               = $(document).width(),
defaults                               = {
minSize                                : 10,
maxSize                               : 20,
newOn                 : 500,
flakeColor           : "#FFFFFF"
},

options  = $.extend({}, defaults, options);

var interval = setInterval( function(){

var startPositionLeft   = Math.random() * documentWidth - 100,
startOpacity               = 0.5 + Math.random(),
sizeFlake                   = options.minSize + Math.random() * options.maxSize,
endPositionTop          = documentHeight - 40,
endPositionLeft          = startPositionLeft - 100 + Math.random() * 200,
durationFall                = documentHeight * 10 + Math.random() * 5000;


$flake.clone().appendTo('body').css(
{


left: startPositionLeft,
opacity: startOpacity,
'font-size': sizeFlake,
color: options.flakeColor


}).animate(
{


top: endPositionTop,
left: endPositionLeft,
opacity: 0.2


},


durationFall,
'linear',
function() {
$(this).remove()
});


}, options.newOn);
});

</script>

 

Demo

http://www.jqueryrain.com/?LeiRAVGW

 

References

  • jQuery Snow plugin – http://www.jqueryrain.com/?LeiRAVGW
  • jQuery – http://jquery.com/download/