Animated aquarium with pure CSS

Here is a pure CSS experimental work to create a aquarium. Image / javascript hasn’t been used for aquarium or it’s animation. I have used jQuery only for random air-bubbles. All these animation is created by Pure CSS. Some times ago, I had written a article about “Animated bubbles upwards continuously with pure CSS“. You can also use this trick for air-bubbles.
read more @ http://www.css-jquery-design.com/…

Animated aquarium with pure CSS

For Creating Aquarium’s water, sand, rocks and plants few lines of HTML required.

The HTML

<div class="bubbles"></div>

<div class="ground"></div>
<div class="rock_1"></div>
<div class="rock_2"></div>
<div class="rock_3"></div>
<div class="rock_4"></div>
<div class="rock_5"></div>
<div class="rock_6"></div>
<div class="rock_7"></div>

<div class="plant_1_wrap">
    <div class="plant_1"></div>
    <div class="plant_2"></div>
    <div class="plant_3"></div>
</div>
<div class="plant_2_wrap">
    <div class="plant_4"></div>
    <div class="plant_5"></div>
</div>

Now, its CSS turn. I had written about 1040 lines only in CSS for creating these elements.
read more @ http://www.css-jquery-design.com/…read-more-button

Advertisements

3D Parallax effect with CSS, javascript or jQuery

Parallax effect is a long-known and widely used animation effect. Lately, the parallax effect has become a wide-spread and quite a trend element in web design, often referred to as “parallax scrolling”. Internet if full on many great examples of application of this effect in web design. As I planned to create a cool parallax animated background, my first goal was to write the shortest and simplest code to achieve maximum awesomeness! I’ll show you how I did it. In this tutorial, I’ll teach you the simplest parallax scrolling technique. Here, I am going to introduce you, a most flexible/responsive slider i.e. Parallaxfx_DG. It is so easy and useful. I have decided that I will post a page dedicated to this slider with it’s features and API later.
read more @ http://www.css-jquery-design.com/…

The idea of the parallax effect it in web design is built around giving a page depth by using several layers of images, all moving at different speeds in response to movement of the mouse or mouse scroller, so that a viewer get a full sense of 3D on the page. Parallax scrolling is an interesting technique, where, as you scroll, the background images translate slower than the content in the foreground, creating the illusion of 3D depth. read more @ http://www.css-jquery-design.com/ …

parallax-effect-with-javascript-css3-jquery-beautiful-place-background

Javascript

I have created a JavaScript plugin for this parallax effect. Plugin writes HTML,  its attributes with CSS animation effect in background read more @ http://www.css-jquery-design.com/….
read-more-button

Animate Full-Page Multiple Background images with fade-in & fade-out effect – jQuery

“How to change multiple background-image of body with effects?” – I think this is a major problem which all designers face. You can fade background colors but not background images. The way to work around this is to have your images as <img> tags and hide them by default display:none;. Give your images position:absolute and z-index:-1 so they act like backgrounds and are behind everything else.

Here’s a quick example of multiple images fading one after the other.

jquery-full-page-animated-background-images

The HTML

Html is very simple. Just add a div with multiple images which you want to animate / change in background with fade effects.

<div id="wrap">
<img class="bgfade" src="http://farm9.staticflickr.com/8526/8668341950_182b74faf2_z.jpg">
<img class="bgfade" src="http://farm9.staticflickr.com/8532/8667337535_6da0a9a261_z.jpg">
<img class="bgfade" src="http://farm9.staticflickr.com/8540/8667244539_d227f8c435_z.jpg">
</div>

The CSS

Now, We will use some CSS Technique which will create an illusion like background-image animation. The way to work around this is to have your images as <img> tags and hide them by default “display:none;”. Give your images “position:absolute” and “z-index:-1” so they act like backgrounds and are behind everything else. Now, set css property of div#wrap which includes these images to “position:fixed” and “top:0; left:0;” so that it will fix with page background.

#wrap{
	position:fixed;; 
	z-index:-1; 
	top:0; 
	left:0; 
	background-color:black
}
#wrap img.bgfade{
	position:absolute;
	top:0;
	display:none;
	width:100%;
	height:100%;
	z-index:-1
}

jQuery

Now, it is java-script’s turn. We will calculate browser window’s height & width. After that we will set width/height of div#wrap to browser so that background cover entire webpage. Now we have to animate our images. We will simple use function of fadeIn() and fadeOut() in images for this.

$(window).load(function(){
$('img.bgfade').hide();
var dg_H = $(window).height();
var dg_W = $(window).width();
$('#wrap').css({'height':dg_H,'width':dg_W});
function anim() {
    $("#wrap img.bgfade").first().appendTo('#wrap').fadeOut(1500);
    $("#wrap img").first().fadeIn(1500);
    setTimeout(anim, 3000);
}
anim();})
$(window).resize(function(){window.location.href=window.location.href})

Updated

I have updated the script. Actually, after re-sizing the browser we have to update the width/height of div#wrap. So, I am going to reload this window, when ever browser will re-size. It will help to re-calculate all these and refresh the animation. Div#wrap will re-size according to browser window and play animation smoothly.

view demo

You may like:

Posted by: Dhiraj kumar

Responsive jQuery Banner Slider with Pagination circles – Responsive_DG_Slider

After working on Responsive_DG_Slider,  which is a most flexible/responsive image slider with different random transition effects. After full-screen example, I am sharing another example with different transition effects. It is very easy to implement.

Here I am showing It’s Pagination circles with the height relative to the width functionality powered by the fantastic java-script library jQuery.

Configuring Your Slider

As we have done earlier, configuring the slider is very simple, you just need to place your images and call the initializer function and your slider is ready. Here’s how you can do this for liquid/responsive images slider with pagination.

responsive-slider-pagination-circle

The HTML

<div class="fluid_container">
        <div class="fluid_dg_wrap fluid_dg_charcoal_skin" id="fluid_dg_wrap_1">
            <div data-thumb="slides/thumbs/1.jpg" data-src="slides/1-1280x720.jpg">
                <div class="fluid_dg_caption fadeFromBottom">
                    Responsive_DG_Slider is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
                </div>
            </div>
            <div data-thumb="slides/thumbs/2.jpg" data-src="slides/2-1280x720.jpg">
                <div class="fluid_dg_caption fadeFromBottom">
                    It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
                </div>
            </div>
            <div data-thumb="slides/thumbs/3.jpg" data-src="slides/3-1280x720.jpg">
                <div class="fluid_dg_caption fadeFromBottom">
                    <em>It's <strong>completely free</strong>, with tons of effects, Prev / next, pager, Start / Stop / Auto control controls and lot of customizable options.</em>
                </div>
            </div>
            <div data-thumb="slides/thumbs/4.jpg" data-src="slides/4-1280x720.jpg">
                <div class="fluid_dg_caption fadeFromBottom">
                    Responsive_DG_Slider slideshow provides many options <em>to customize your project</em> as more as possible
                </div>
            </div>
            <div data-thumb="slides/thumbs/5.jpg" data-src="slides/5-1280x720.jpg">
                <div class="fluid_dg_caption fadeFromBottom">
                    It supports captions, HTML elements and videos and <em>it's validated in HTML5</em> (<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fdemo.web3designs.com%2FResponsive_DG_Slider%2Fresponsive-slider-pagination-circle.htm" target="_blank">have a look</a>)
                </div>
            </div>
            <div data-thumb="slides/thumbs/6.jpg" data-src="slides/6-1280x720.jpg">
                <div class="fluid_dg_caption fadeFromBottom">
                    Different color skins and layouts available, <em><a href="http://demo.web3designs.com/Responsive_DG_Slider/fullscreen-responsive-image-slider.htm">fullscreen</a> ready too</em>
                </div>
            </div>
        </div>
    </div>

The CSS

First we have to link it’s default css file.

<link rel='stylesheet' id='fluid_dg-css'  href='css/fluid_dg.css' type='text/css' media='all'>

Now some customization:

.fluid_container {
			margin: 0 auto;
			width: 100%;
		}

The jQuery

First, We have to add some jQuery library.

 <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.min.js'></script>
    <script type='text/javascript' src='Scripts/jquery.mobile.customized.min.js'></script>
    <script type='text/javascript' src='Scripts/jquery.easing.1.3.js'></script> 
    <script type='text/javascript' src='Scripts/fluid_dg.min.js'></script>

After adding all these library we have to initiate the Responsive_DG_Slider.

jQuery(document).ready(function(){
		jQuery(function(){			
			jQuery('#fluid_dg_wrap_1').fluid_dg({thumbnails: true,height:"25%"});
		}); })

You have done!!

Now enjoy your liquid slider. Please feel free to comment and share your thoughts/ideas about the result.
view demo

Updated

APIs and other options of this wonderful plugin, please click here.

You may like:

Posted by: Dhiraj kumar

Pure CSS3 Animated Polaroid Gallery

Normally, Polaroid Gallery is a CSS3 & jQuery Image Gallery plugin for Media Library. It is used to overlay images as Polaroid pictures on the current page or post.

It’s a sure thing that CSS3 features like transitions, animations and transforms can add extra spice to your designs. In this article you will see how you can build an awesome CSS3 animated  Polaroid pictures gallery with some of these cool features.  This is something I wished to do for a while and I finally made it.css3-animated-polaroid-gallery

The HTML

The HTML structure hasn’t changed at all, simple and minimal. Here’s an excerpt:

<div class="photo-album">
<h2>Dhiraj, Geetu & Atharv at Taj ↦ Agra
  <a class="large polaroid img1" href="#"> 
    <img alt="" src="https://lh3.googleusercontent.com/-73u0oSgSX0w/UQ6PZ0Z1wOI/AAAAAAAADPE/57bc9C0BEG0/s512/Agra-trip%252520112.JPG" /> 
    Camel wants to kiss Atharv. </a> 
  <a class="polaroid img2" href="#"> 
    <img alt="" src="https://lh4.googleusercontent.com/-cPFum21LNBA/UQ6PXyb2ISI/AAAAAAAADPM/kJLhIyvx_2k/s512/Agra-trip%252520147.JPG" /> 
    My dearest one.. Atharv with Geetu. — at Taj Mahal</a> 
  <a class="small polaroid img3" href="#"> 
    <img alt="" src="https://lh6.googleusercontent.com/-Bz8NR-oKxGw/UQ6PguAxrsI/AAAAAAAADNY/B7i8X02vnbg/s512/Agra-trip%252520153.JPG" /> 
    Ferntastic</a> 
  <a class="medium polaroid img4" href="#"> 
    <img alt="" src="https://lh4.googleusercontent.com/-gB3RNt_3aos/UQ6Pmx5egoI/AAAAAAAADKM/lensH9ojFd0/s512/Agra-trip%252520154.JPG" /> 
    My dearest one.. Atharv with Geetu. — at Taj Mahal</a> 
  <a class="polaroid img5" href="#"> 
    <img alt="" src="https://lh5.googleusercontent.com/-YbVIBYilZ-M/UQ6P0w2PC8I/AAAAAAAADNc/kKzFy9k51D8/s512/Agra-trip%252520170.JPG" /> 
    Atharv & Geetu with Dhiraj.. Taj in background</a> 
  <a class="polaroid img6" href="#"> 
    <img alt="" src="https://lh6.googleusercontent.com/-IedPhDIDTcg/UQ6P5NG_hSI/AAAAAAAADKw/frG26WPd_OY/s512/Agra-trip%252520175.JPG" /> 
    Atharv in a cute pose.. Taj mahal in background</a> 
  <a class="polaroid img7" href="#"> 
    <img alt="" src="https://lh6.googleusercontent.com/-fhOKmDe-6S4/UQ6QBnHRDhI/AAAAAAAADPw/StGk4el6PVI/s512/Agra-trip%252520192.JPG" /> 
    Atharv with his papa Dhiraj</a> 
  <a class="small polaroid img8" href="#"> 
    <img alt="" src="https://lh4.googleusercontent.com/-lUXHF4hGxak/UQ6QF_7iZnI/AAAAAAAADOs/-agtNNnnYbU/s512/Agra-trip%252520193.JPG" /> 
    awesome</a> 
  <a class="medium polaroid img9" href="#"> 
    <img alt="" src="https://lh3.googleusercontent.com/-a-kezOzwNR8/UQ6QNJpEa4I/AAAAAAAADNk/FAN4Z3LDy2Y/s512/Agra-trip%252520206.JPG" /> 
    Geetu with Dhiraj</a> 
  <a class="polaroid img10" href="#"> 
    <img alt="" src="https://lh6.googleusercontent.com/-J3Gcspy0HKg/UQ6QXk3ZV9I/AAAAAAAADQE/0PyQD_VvC8o/s512/Agra-trip%252520221.JPG" /> 
    Nice one..</a> 
  <a class="small polaroid img11" href="#"> 
    <img alt="" src="https://lh5.googleusercontent.com/-OLpIvUAwZ6E/UQ6QY9gnPwI/AAAAAAAADNo/00eTz4E3_GI/s512/Agra-trip%252520223.JPG" /> 
    Sulphurous</a> 
  <a class="small polaroid img12" href="#"> 
    <img alt="" src="https://lh6.googleusercontent.com/-V-NJ8w3N5hs/UQ6QYqtZVOI/AAAAAAAADOw/FcjS2sgQXxA/s512/Agra-trip%252520229.JPG" /> 
    Atharv with his papa..</a> <a class="small polaroid img13" href="#"> 
    <img alt="" src="https://lh4.googleusercontent.com/-W1T4Z6_xwlQ/UQ6QAdQwuzI/AAAAAAAADNg/vSiGaoo7_TU/s512/Agra-trip%252520188.JPG" /> 
    Atharv with his papa Dhiraj</a> 
  <a class="small polaroid img14" href="#"> 
    <img alt="" src="https://lh6.googleusercontent.com/-Bz8NR-oKxGw/UQ6PguAxrsI/AAAAAAAADNY/B7i8X02vnbg/s512/Agra-trip%252520153.JPG" /> 
    Nice one..</a> 
  <a class="polaroid img15" href="#"> 
    <img alt="" src="https://lh4.googleusercontent.com/-W1T4Z6_xwlQ/UQ6QAdQwuzI/AAAAAAAADNg/vSiGaoo7_TU/s512/Agra-trip%252520188.JPG" /> 
    Atharv with his papa Dhiraj</a> 
</div>

CSS

a.polaroid {
		display: block;
		text-decoration: none;
		color: #333;
		padding: 10px 10px 20px 10px;
		width: 150px;
		border: 1px solid #d7d7d7;
		background-color: white; background:rgba(255,255,255,.9);
		z-index: 2;
		font-size: 0.7em;
		-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3),inset 0 0 0.7em rgba(0,0, 0, 0.4);;
		-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3),inset 0 0 0.7em rgba(0,0, 0, 0.4);;
		box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3),inset 0 0 0.7em rgba(0,0, 0, 0.4);-webkit-filter: blur(1px); border-radius:5px;
		-webkit-transition: all 0.5s ease-in; text-align:center
	}
	a.polaroid:hover, a.polaroid:focus, a.polaroid:active {
		z-index: 999;
		border-color: #999;
		-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4),inset 0 0 0.7em rgba(0,0, 0, 0.4);
		-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4),inset 0 0 0.7em rgba(0,0, 0, 0.4);
		box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4),inset 0 0 0.7em rgba(0,0, 0, 0.4);
		-webkit-transform: rotate(0deg) scale(1.05);
		-moz-transform: rotate(0deg) scale(1.05);
		transform: rotate(0deg) scale(1.05);-webkit-filter: blur(0px);
	}
	.polaroid img {
		margin: 0 0 15px;
		width: 150px;
		height: 120px;
	}

	a img {
		border: none;
		display: block;
	}

	.photo-album {
		position: relative; width: 80%; margin: 0 auto; max-width: 70em; height: 450px; margin-top:2.5em; min-width: 800px; max-width: 900px;
	}
	.photo-album .polaroid {
		position: absolute;
	}
	.photo-album h2 {
		position: absolute; z-index: 5; top: 150px; text-align: center; width: 100%; line-height: 2; 
	}
	.photo-album h2 span {
		background-color: white; background:rgba(255,255,255,.8);
		font-family: 'Satisfy', cursive;
		padding: 0.4em 0.8em 0.3em 0.8em;
		-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
		-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
		box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
		border-radius: 5px; border:1px solid #CCC
	}
	.photo-album .small {
		width: 75px; padding: 6px 6px 12px 6px; font-size: 0.6em;
	}
	.photo-album .small img {
		width: 75px; height: 60px;
	}
	.photo-album .medium {
		width: 200px; padding: 13px 13px 26px 13px; font-size: 0.8em;
	}
	.photo-album .medium img {
		width: 200px; height: 165px;
	}
	.photo-album .large {
		width: 300px; padding: 20px 20px 30px 20px; font-size: 1em;
	}
	.photo-album .large img {
		width: 300px; height: 250px
	}
	.photo-album .img1 {
		bottom: 10px; right: 365px; 
		-webkit-transform: rotate(10deg);
		-moz-transform: rotate(10deg);
		transform: rotate(10deg);
	}
	.photo-album .img2 {
		top: 50px; right: 20px;
		-webkit-transform: rotate(-4deg);
		-moz-transform: rotate(-4deg);
		transform: rotate(-4deg);
	}
	.photo-album .img3 {
		left: 400px; top: 0;
		-webkit-transform: rotate(-5deg);
		-moz-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}
	.photo-album .img4 {
		top: 10px; left: 495px;
		-webkit-transform: rotate(-20deg);
		-moz-transform: rotate(-20deg);
		transform: rotate(-20deg);
	}
	.photo-album .img5 {
		bottom: 0; right: 0;
		-webkit-transform: rotate(1deg);
		-moz-transform: rotate(1deg);
		transform: rotate(1deg);
	}
	.photo-album .img6 {
		bottom: 10px; right: 156px;
		-webkit-transform: rotate(6deg);
		-moz-transform: rotate(6deg);
		transform: rotate(6deg);
	}
	.photo-album .img7 {
		bottom:0; left:400px;
		-webkit-transform: rotate(-10deg);
		-moz-transform: rotate(-10deg);
		transform: rotate(-10deg);
	}
	.photo-album .img8 {
		bottom: -20px; left: 700px;
		-webkit-transform: rotate(-8deg);
		-moz-transform: rotate(-8deg);
		transform: rotate(-8deg);
	}
	.photo-album .img9 {
		bottom: 0; left: 0;
		-webkit-transform: rotate(-8deg);
		-moz-transform: rotate(-8deg);
		transform: rotate(-8deg);
	}
	.photo-album .img10 {
		top: 0; left: 20px;
		-webkit-transform: rotate(8deg);
		-moz-transform: rotate(8deg);
		transform: rotate(8deg);
	}
	.photo-album .img11 {
		top: 0; right: 0;
		-webkit-transform: rotate(-8deg);
		-moz-transform: rotate(-8deg);
		transform: rotate(-8deg);
	}
	.photo-album .img12 {
		top: 0; left: 680px;
		-webkit-transform: rotate(18deg);
		-moz-transform: rotate(18deg);
		transform: rotate(18deg);
	}
	.photo-album .img13 {
		bottom: -20px; right: 630px;
		-webkit-transform: rotate(4deg);
		-moz-transform: rotate(4deg);
		transform: rotate(4deg);
	}
	.photo-album .img14 {
		top: 90px; left: 430px;
		-webkit-transform: rotate(15deg);
		-moz-transform: rotate(15deg);
		transform: rotate(15deg);
	}
	.photo-album .img15 {
		left:176px; top:20px;
		-webkit-transform: rotate(-8deg);
		-moz-transform: rotate(-8deg);
		transform: rotate(-8deg);
	}	
	a:hover, a:focus {
		z-index: 5;
	}

view demo

Your turn

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

Posted by: Dhiraj kumar

CSS3 3D effect, Shine text with css3 keyframe animation, Scrolling Page Background with jQuery – Happy New Year

On the occasion of New Year 2013, I thought to wish this festival by creating a nice webpage greeting. So, today I created this greeting card using 3D  and shining text effect with the help of CSS3, and scrolling background with JavaScript. I hope you all will enjoy this holiday as well as my web-card too :) .

Introduction

Greeting, today we are going to make a scrolling background effect. This script will move the background of any html tag, either vertically or horizontally. I used this script in one of my greeting card too which has a blue sky with clouds and it makes the whole website came alive. I think that’s pretty impressive. In this card you will find texts with different CSS effects like: 3D emboss, continuous spotlight shine effect, text shadow etc.

3d-shine-text-css3-scrolling-background-happy-new-year

The CSS

I have Used multiple text-shadows to create 3D text on any HTML element. No extra HTML, no extra headaches, just awesomesauce.
Works in the latest builds of Safari, Chrome, Firefox, and Opera.

h1 {
  margin:1.2em auto;
  font: bold 100px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
  -webkit-transition: .2s all linear;
}

Text shine Effect created with WebKit-specific CSS3 properties. You’ll need Safari or Chrome to enjoy key-frame animation.

p.shine{
    font-size: 3em;
    margin: 0 auto; padding:0;
    width: 95%;
}
.shine{
    background: #222 -webkit-gradient(linear, left top, right top, from(#ccc), to(#fff), color-stop(1, #f0f)) 0 0 no-repeat;
    background-size: 400px; -webkit-background-size: 400px; 
    -moz-background-size: 400px; -o-background-size: 400px;    
    color: rgba(255, 255, 255, 0.7);	
    background-clip: text; -webkit-background-clip: text; 
        -moz-background-clip: text; -o-background-clip: text;	
	-webkit-animation: shine 2s infinite;
	-moz-animation: shine 2s infinite;
	-o-animation: shine 2s infinite;
	-ms-animation: shine 2s infinite;
	animation: shine 2s infinite; 
}

@-webkit-keyframes shine{
    0%{background-position: top left;}
    100%{background-position: top right;}
}
@-moz-keyframes shine{
    0%{background-position: top left;}
    100%{background-position: top right;}
}
@-o-keyframes shine{
    0%{background-position: top left;}
    100%{background-position: top right;}
}
@keyframes shine{
    0%{background-position: top left;}
    100%{background-position: top right;}
}

For page background I used cloud in png format.

body{background:url(bg_clouds.png) 0 0}

The HTML

<h1>Happy New Year 2013</h1>
<p class="shine">The New Year is the time of unfolding horizons and the realization of dreams, may you rediscover new strength and garner faith with you, and be able to rejoice in the simple pleasures that life has to offer and put a brave front for all the challenges that may come your way.<br>
Wishing you a lovely New Year..</p>

The JavaScript – jQuery

We have to add jquery library in body first, after that we animate our page background with css background-position properties. I always prefer to use JavaScript files before close of body tag.

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">var scrollSpeed = 70; 
    var current = 0;
    function bgscroll(){
        current -= 1;   
        // move the background with backgrond-position css properties
        $('body').css("backgroundPosition", 1 ? current+"px 0" : "0 " + current+"px");   
    }
     setInterval(bgscroll, scrollSpeed);   </script>

view demo

Happy New Year!

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

Posted by: Dhiraj kumar

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.

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