10 jQuery and JavaScript Christmas Effects

Sam Deering
Tweet

Christmas is (once again) just around the corner, has it been that long? Well, I guess time really flies fast when your coding! In this post find some Christmas spirit and put some jQuery and JavaScript made Christmas decorations on your websites. Happy holidays! lol :)

1. JavaScript Christmas Countdown Digital Clock

In this article we are going to design a JavaScript Christmas Countdown digital clock using the time of the visitor’s computer for counting down to Christmas events. This script is extremely flexible it will work as per time zone.


JavaScript Christmas Countdown Digital Clock

Source
Demo

2. Flashing Lights

To place flashing lights on your website paste the following code into an HTML widget on your site.


Flashing Lights

Source + Demo

3. Google’s Christmas Doodle

With the holiday behind our back, we can put the calories from that lavish diner into good use, and try to get in shape for the following week. So let’s try to recreate Google’s animated logo with the help of jQuery and a bit of CSS!


Google's Christmas Doodle

Source
Demo

4. Snow Effect

Decorate your webpage with this great animated document effect! Watch as snow gently trickles down the page, and then disappear. The image used is changeable, so snow definitely isn’t the only effect this script can render…


Snow Effect

Source + Demo

5. Snowstorm

Snowstorm is a JavaScript-driven snow effect that can be easily added to web pages. It is free for use, and easy to set up. A single JavaScript file provides the functionality required. No images are used for the snow effect.


Snowstorm

Source + Demo

6. jQuery Snowfall 1.5 update now with snow buildup!

Added snow buildup to the plugin, so now you can pass a jQuery selector in the collection option and the snow will collect on top of all the elements matched. It uses the canvas tag so the snow won’t collect in IE8 or lower.


jQuery Snowfall 1.5 update now with snow buildup!

Source
Demo

7. Xmas Tree Generator

This JavaScript code helps you to generate an Xmas tree. The Xmas tree is randomly sized with the lights placed at random places.


Xmas Tree Generator

Source + Demo

8. Santa Trailing Cursor or Christmas Cursor

This is a great trailing cursor with a Christmas theme. Santa is speeding behind your mouse cursor leaving little images of himself behind where-ever he goes. Fantastic trailing cursor effect to brighten up your Christmas page.


Santa Trailing Cursor or Christmas Cursor

Source + Demo

9. Create a Floating Christmas Scroller with JavaScript

Charming little Xmas scroller with snowing animation and eye catching shadow font.


Create a Floating Christmas Scroller with JavaScript

Source + Demo

10. Create ASCII Christmas Tree Animation Using JavaScript

Create an Animated ASCII Character Christmas Tree using JavaScript with this JavaScript code.


Create ASCII Christmas Tree Animation Using JavaScript

Source + Demo

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.