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


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


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.


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!


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

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

Ending Soon
Free SitePoint Premium

Get one free year of unlimited book and course downloads on SitePoint Premium!