Snow-Fall Effect with JavaScript – Creating Merry Christmas Greetings

On the occasion of Christmas and winter Holidays, I thought to wish this festival by create a nice webpage greetings. So, today I had created this Christmas greeting card using snow-fall effect with help of CSS3 and JavaScript. I hope you all will enjoy this holiday and my web-card too :).

Today we will create a Christmas greeting card using CSS3 and jQuery. There are many things we can do with CSS3 and javascript. We’ll use snowfall.dg.js for creating these snow.

Features and Principle

Note: Snowfall Plugin is Less than 12Kb in size. There are many options for customize and use this plugin as per your requirement. Some features are:

• No need to add any image for snow.
• No need to add any JavaScript library.
• You can use any html element in place of snow.
• Change the Color of Snow by using hexadecimal value.
• Also support in iPhone, iPad and Mobile devices.
• Snow-fall movement with mouse/cursor.
• Stick on bottom.
• Snow melt effect.
• Twinkle effect – you can use this also if you want star-fall 🙂
• More options..

What this script does is adds snow-fall to the body. You can find more options in snowfall.dg.js.

The CSS

No special css required for snow fall effect. But in this greeting card, I have used css for background and my greeting message.

body{
         font-size:18px; 
         background:#badaf3 url(merry_chirstmas-wide.jpg) 100% 0 no-repeat; 
         background-size:cover; 
         font-family: 'IM Fell Double Pica', georgia, serif;
}
#welcome{
         font-size:2em; 
         width:40%; 
         margin:4%; 
         text-align:center; 
         background-color:#fff; 
         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
         background:rgba(255,255,255,.75); 
         border-radius:10px; 
         box-shadow:4px 4px 10px 0 rgba(20,20,20,.6); 
         text-shadow: 2px 2px 3px #fff; 
         font-style:italic; 
         padding:1em; 
         color:#700; 
         color:rgba(120,0,20,.9)
}

The Html

<div id="welcome">May the miracle of Christmas fill your heart with 
warmth & love. 
Christmas is the time of giving and sharing.
It is the time of loving and forgiving. 
Hope you and your family have
wonderful Holiday... &... Merry Christmas to Everyone! </div>

Snowfall – The javascript

We have to add this snowfall.dg.js in body. I always prefer to use JavaScript files before close of body tag.

<script type="text/javascript" src="snowfall.dg.js"><script>

Updated!

I have updated this greetings with Jingle bells music and Html5 audio tags. now our Html is

<div id="welcome">May the miracle of Christmas fill your heart with 
warmth & love. 
Christmas is the time of giving and sharing.
It is the time of loving and forgiving. 
Hope you and your family have
wonderful Holiday... &... Merry Christmas to Everyone! </div>
 <audio autoplay="true" loop="true">
   <source src="jingle_bells_merry.ogg" type="audio/ogg">
   <source src="jingle_bells_merry.mp3" type="audio/mpeg">
Your browser does not support the audio element (HTML5). Please update your Browser.
 </audio>

Merry Christmas

I hope you like the result and don’t hesitate to share your thoughts about it. Thanks for reading!

Posted by: Dhiraj kumar

Simple and Easy Tooltip Using jQuery & CSS3

I love jQuery and the way it makes web-designer’s/developer’s life easier.  Although it took all a while to accept it. I still prefer to write my own stuff, I can’t deny its advantages.   Today I will show you a “Tool-Tip” examples of using the same very, very simple script.

Features and Principle

Note: Tooltip Plugin is Less than 1Kb in size.
What this script does is adds an element to the body when you roll over a certain object. That element’s appearance is predefined with css (positioned absolute and styled) so all we need to do is fill the element with content, calculate mouse position and make it move accordingly. When cursor is moved over he object, element moves with it and when cursor roll out, the element is deleted.

Here is a  example where you can see this script in action.

The Simplest jQuery Tooltip Ever

The script takes a title attribute of an A tag and place it inside the popup element.

The Html

<a href="https://dhirajkumarsingh.wordpress.com" class="tooltip" title="Latest Techonology Updates in Web Technology">Roll over for tooltip</a>

The CSS

#tooltip{
	position:absolute; 
        color:#fff; 
        display:none;
	border:1px solid #333; 
        border-radius:4px;
	background-color:#222; background:rgba(2,2,2,.8);
	padding:2px 5px; 
        box-shadow:2px 2px 5px 0 rgba(2,2,2,.8);
}

jQuery – The javascript

First of all, we have to add jQuery library.
after adding jQuery library we have to add this tooltip plugin.
In this plugin you will got :

this.tooltip = function(){	
	/* CONFIG */		
		xOffset = 10;
		yOffset = 20;		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result		
	/* END CONFIG */		
	$("a.tooltip").hover(function(e){											  
		this.t = this.title;
		this.title = "";								  
		$("body").append("

“+ this.t +”

"); 
                $("#tooltip") .css("top",(e.pageY - xOffset) + "px") 
                              .css("left",(e.pageX + yOffset) + "px") 
                              .fadeIn("fast"); 
         }, function(){ this.title = this.t; 
                  $("#tooltip").remove(); 
         }); 
         $("a.tooltip").mousemove(function(e){ 
                $("#tooltip") .css("top",(e.pageY - xOffset) + "px") 
               .css("left",(e.pageX + yOffset) + "px"); 
}); 
}; 
// starting the script on page load 
$(document).ready(function(){ 
              tooltip()
});

Your turn

I hope you enjoyed this article and the techniques I used. Please share your comments and questions below!

Posted by: Dhiraj kumar