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
You can support this website by sharing. Thank you!http://www.css-jquery-design.com/2012/12/snow-fall-effect-with-javascript-creating-mary-christmas-greetings/CSS - 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...DhirajDhiraj Kumarmr.dhirajkumar@gmail.comAdministratorA Warm Welcome & Thanks for Visiting my Website!Dhiraj kumar is an Information Technology graduate who loves learning new things. A very popular and colorful individual, he has a particular passion for people, blogs, and the use of technology for social progress. He spends the whole day sitting in front of the computer, making himself updated with the new updates in technologies going on around him. He has more than 15 years of experience in the field of Website designing and Accessibility. He has a strong hand in Flash animation, 2D and 3D Presentation, UI web softwares in Flash with Action Scripting 2.0 / 3.0, Video Presentations, Flash Presentations, HTML, CSS, JavaScript, jQuery, Photoshop, 3Ds Max, Maya etc. read more..ALSO, TO SAVE BOTH OF US SOME TIME, YOU SHOULD KNOW THAT: Currently, I am not available for any type of freelance projects. Follow @dhiraj_kumarHTML5, CSS3 & jQuery - Web Design / Development

Leave a Reply