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.

snowfall-effect-javascript-christmas-greetings

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>

view demo

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

You may also like:

You can support this website by sharing. Thank you!DhirajCSS - Cascading Style SheetsHTMLJAVASCRIPTjQueryMobile Web TechnologyTutorialsadvance web technology,angle brackets,Animated Background,animated card,Animated image,animation delay,animation direction,animation effect,apple,audio,audio tag,blogging,christmas,christmas card,Christmas greeting,christmas greeting card,christmas website,configurable settings,core code,CSS,CSS 3,CSS 4,CSS framework,css namespaces,CSS technique,CSS trick,css3,css3 box shadow,CSS3 gradients,doctype html,elements,enterprise-it,free open source,gaming,graphical user interface,grid,grid system,html and xhtml,html basics,html elements,html snow,html5,html5 tag,interactive web applications,javascript,javascript functions,javascript library,javascript programmers,jquery,jQuery animation,jquery snow,jquery snowfall,keyframe animation,line tag,loading animation,merry chirstmas,mobile,ms filter,open source javascript,page elements,paragraph text,plugin,project workflow,science,snow,snow fall animation,snow javascript,snow-fall script,snowfall,snowfall javascript,software-development,style,technology,tips and tricks,transparent background image,visual transition,window loadsOn 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...Web design / development tutorials covering HTML, jQuery & CSS. Cool tips and tricks of web designing using HTML5, CSS3 & jQuery Library. Latest updates in responsive or mobile web technology.