Animated bubbles upwards continuously with pure CSS

Here is a pure CSS experimental work to create floating bubbles without using JavaScript. These animated bubbles are also with popping effect. All these animation is created by Pure CSS.

For our little demo, we use a simple image for the conical flask and then create the bubbles entirely with markup and CSS. read more @ http://www.css-jquery-design.com/…

The HTML

<div id="beaker">
  <span class="bubble">
    <span class="glow"> </span>
  </span>
</div>

With our bubbles all made, now we need them to act like bubbles. We could use JavaScript but that’s no fun. Just use CSS! read more @ http://www.css-jquery-design.com/…

Animated 3D Background Pattern using HTML5 < canvas >

Hi friends, today we are going to see a cool example of animated 3D Background using HTML5 <canvas> and javascript. The <canvas> element is part of HTML5 and allows for dynamic, script-able rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap and does not have a built-in scene graph. The <canvas> element is only a container for graphics… read more @ http://www.css-jquery-design.com/…

What is canvas element in HTML?

Canvas was initially introduced by Apple for use inside their own Mac OS X WebKit component in 2004 read more @ http://www.css-jquery-design.com/…

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/ …

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/….

CSS Techniques – Absolute Horizontal And Vertical Centering In CSS

We’ve all seen margin: 0 auto; for horizontal centering, but margin: auto;has refused to work for vertical centering… until now! But actually (spoiler alert!)

I’m not the pioneer of this method, and it may even be a common technique, however, most vertical centering articles never mention it and I had never seen it until I dug through the comments section of  read more @ http://www.css-jquery-design.com/…

1. Absolute Center

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

ADVANTAGES:

• Cross-browser (including IE8-10)
• No special markup, minimal styles
• Responsive with percentages and min-/max-
• Use one class to center any content…   read more @ http://www.css-jquery-design.com/…
  

CSS3 Modal Window Popups – sliding forms with fancybox effect

Today, I will describe you how to create cool CSS3 modal popup windows (or boxes). Literally, not so long ago, in order to achieve such effects, we used jQuery. But, as it turned out, CSS3 has all the necessary tools for making modal windows too. In our demonstration I have prepared single page with two popup elements: join form and login form. Welcome to test results (domo) and understand how it was made. read more @ http://www.css-jquery-design.com/…

HTML

First, lets create the main HTML markup. As you can see – the structure is quite easy. Here are one panel with buttons and two popups. Each of them contains own overlay DIV element and popup DIV element with some content inside and ‘close’ button.  read more @ http://www.css-jquery-design.com/…

Creating a Puzzle game using jQuery

Today we are making a simple puzzle game called “Doraemon Puzzle”. The purpose of the game is to slide 15 square blocks around to form an image. The goal of this tutorial is to look at this simple browser-based game and explain how it was made line by line. It’s a great way to learn jQuery. For this tutorial, We will use a 2D image of kid’s favorite cartoon “Doraemon” for square-sliding game.  I will go over each line of code to demonstrate the train of thought. I really do believe that breaking this game up into explanations on per-line basis will help you understand how to use jQuery in your own projects.

Concept about creating a Game as a jQuery Plugin

A jQuery plugin is a perfect way to create image slideshows, custom user interface controls and of course browser-based games. We won’t just write JavaScript code here, we will create a jQuery plugin.

A plugin is nothing more than our own custom jQuery method. You know how we have jQuery’s methods .css() and .animate()? Well, jQuery gives us the ability to extend its own functionality with custom methods that we create ourselves. Like the existing jQuery methods, we can apply the method we will create to a jQuery selector.

Well, the game is called “Doraemon Puzzle”, and we want to make our game “embeddable” inside an arbitrary HTML element like <div id=”game_area”>here</div> so we can move it around anywhere on the page.

The jQuery

We will actually create our own jQuery method and call it .puzzle_dg(). I have already created the plugin “puzzle_dg.min.js“.  Therefore, in order to launch the game inside an HTML element with id “#game_area” we will call this command:

$(window).load(function(){
    $('#game_area').puzzle_dg(140)
});

This will create and attach the game board to the div whose id is “game_area.” Also, each square will become 140 by 140 pixels in width and height based on the only passed parameter. You can re-size the game blocks and area easy by just changing this parameter.

In this tutorial I used the image of a Doraemon cartoon. You can replace it with any image you want.

Executing a custom method as shown in the code above will pass the selector string “#game_area” to our plugin function which grabs the DIV. Inside our custom method, we can refer to that selector/element using the this keyword. And we can also enable jQuery methods on it by passing it to the new jQuery object like so: $(this); — inside the extended function I have created.

The HTML

First, let’s prepare HTML markup for our game.  We have only call <div id="game_area"></div> for creating game area.

We have to include the awesome jQuery library. After including the jQuery library we have to include “puzzle_dg.min.js”  file as game plugin.

<!-- This is where the game will be injected -->
<div id="game_object"></div>

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">$(window).load(function(){
    $('#game_area').puzzle_dg(140)
});</script>

CSS

There are a few styles for our game:

#game_area {
	background-color: #ffffff;
	height: 550px;
	margin: 20px auto;
	position: relative;
	width: 550px;
}
#board div {
	background: url("images/doraemon.jpg") no-repeat scroll 0 0 #ffffff;
	cursor: pointer;
	height: 140px;
	line-height: 140px;
	position: absolute;
	text-align: center;
	width: 140px;
	/* css3 shadow */
    -moz-box-shadow: inset 0 0 20px #2caae7;
	-webkit-box-shadow: inset 0 0 20px #2caae7;
	-ms-box-shadow: inset 0 0 20px #2caae7;
	-o-box-shadow: inset 0 0 20px #2caae7;
	box-shadow: inset 0 0 20px #2caae7;
}

Conclusion

I tried to explain the code to the best of my ability here but some details were skipped because there is so much more to JavaScript. I hope you enjoyed this article. Thanks for reading!

You may like:

• Hot Tea / Coffee with Animated Smoke Effect – jQuery & CSS
• Cool Typography Effects With CSS3 and jQuery
• Hover and Click Trigger For CIRCULAR Elements With jQuery
• Random 3D Explosions, 3D clouds – Effects with CSS 3D and jQuery
• Cool Animated Fire Effects with CSS3 and jQuery
• jQuery Plugin for Cartoon-like Background Image Sprite Animation – AniDG – (alernative to animated Gif)
• DG_Slider – An Ultimate jQuery Content Slider Plugin
• Full-Screen Responsive jQuery Banner Slider – Responsive_DG_Slider
• Responsive jQuery Banner Slider with Pagination circles – Responsive_DG_Slider
• Animate Full-Page Multiple Background images with fade-in & fade-out effect – jQuery

Posted by: Dhiraj kumar

Animated Color wheel spinning with CSS3 Keyframes animation, Transform and Transition

I have done some experimental work to create CSS3 Animation without using JavaScript. I end up creating some animations using CSS3 Keyframes and Transform and like to share. I have done this animation using border-color tricks and CSS Transform: i.e. CSS scale and CSS3 rotation.

Note: Before going I like to make something clear, Internet Explorer 10, Firefox, and Opera supports the @keyframes rule and animation property. Chrome and Safari requires the prefix -webkit- in css.

Important: Internet Explorer 9, and earlier versions, does not support the @keyframe rule or animation property.

The HTML

<div id="colorWheel">
    <span class="color01"></span>
    <span class="color02"></span>
    <span class="color03"></span>
    <span class="color04"></span>
    <span class="color05"></span>
    <span class="color06"></span>
    <span class="color07"></span>
    <span class="color08"></span>
    <span class="color09"></span>
    <span class="color10"></span>
</div>

The CSS

Now, We will use some CSS Technique using border-color tricks and CSS3 rotation. I have created this color cycle without using any image.  I have done a cool rotating wheel animation  using @keyframes animation.

#colorWheel {
    height: 100px;
    width: 100px;
    margin: 40px auto ;
    position: absolute; left:10%;
    -webkit-transform-origin: 50px 150px;
    -moz-transform-origin: 50px 150px;
    -ms-transform-origin: 50px 150px;
    -o-transform-origin: 50px 150px;
    transform-origin: 50px 150px;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    animation: wheel 10s ease-in-out infinite alternate;
    -moz-animation: wheel 10s ease-in-out infinite alternate;
    -webkit-animation: wheel 10s ease-in-out infinite alternate;
    -ms-animation: wheel 10s ease-in-out infinite alternate;
}

@keyframes wheel{
    0%{
    opacity:1;
    left:-10%;
    transform:scale(.6) rotate(0deg);
}
50%{
    opacity:.7}
100%{
    left: 90%;
    opacity:1;
    transform:scale(1) rotate(2160deg);
}
}
@-webkit-keyframes wheel{
    0%{
    opacity:1;
    left:-10%;
    -webkit-transform:scale(.6) rotate(0deg);
}
50%{
    opacity:.7;}
100%{
    left: 90%;
    opacity:1;
    -webkit-transform:scale(1) rotate(2160deg);
}
}
@-moz-keyframes wheel{
0%{
    opacity:1;
    left:-10%;
    -moz-transform:scale(.6) rotate(0deg);
}
50%{
    opacity:.7;}
100%{
    left: 90%;
    opacity:1;
    -moz-transform:scale(1) rotate(2160deg);
}
}
@-ms-keyframes wheel{
0%{
    opacity:1;
    left:-10%;
    -ms-transform:scale(.6) rotate(0deg);
}
50%{
    opacity:.7;}
100%{
    left: 90%;
    opacity:1;
    -ms-transform:scale(1) rotate(2160deg);
}
}

#colorWheel:hover {}
#colorWheel span {
    position: absolute;
    -webkit-transform-origin: 50% 50%;
    border-style: solid;
    border-width: 150px 50px;
    box-sizing: border-box;
}
#colorWheel span.color01 {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    border-color: #43a1cd transparent transparent transparent;
}
#colorWheel span.color02 {
    -webkit-transform: rotate(36deg);
    -moz-transform: rotate(36deg);
    -ms-transform: rotate(36deg);
    -o-transform: rotate(36deg);
    transform: rotate(36deg);
    border-color: #639b47 transparent transparent transparent;
}
#colorWheel span.color03 {
    -webkit-transform: rotate(72deg);
    -moz-transform: rotate(72deg);
    -ms-transform: rotate(72deg);
    -o-transform: rotate(72deg);
    transform: rotate(72deg);
    border-color: #9ac147 transparent transparent transparent;
}
#colorWheel span.color04 {
    -webkit-transform: rotate(108deg);
    -moz-transform: rotate(108deg);
    -ms-transform: rotate(108deg);
    -o-transform: rotate(108deg);
    transform: rotate(108deg);
    border-color: #e1e23b transparent transparent transparent;
}
#colorWheel span.color05 {
    -webkit-transform: rotate(144deg);
    -moz-transform: rotate(144deg);
    -ms-transform: rotate(144deg);
    -o-transform: rotate(144deg);
    transform: rotate(144deg);
    border-color: #f7941e transparent transparent transparent;
}
#colorWheel span.color06 {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    border-color: #ba3e2e transparent transparent transparent;
}
#colorWheel span.color07 {
    -webkit-transform: rotate(216deg);
    -moz-transform: rotate(216deg);
    -ms-transform: rotate(216deg);
    -o-transform: rotate(216deg);
    transform: rotate(216deg);
    border-color: #9a1d34 transparent transparent transparent;
}
#colorWheel span.color08 {
    -webkit-transform: rotate(252deg);
    -moz-transform: rotate(252deg);
    -ms-transform: rotate(252deg);
    -o-transform: rotate(252deg);
    transform: rotate(252deg);
    border-color: #662a6c transparent transparent transparent;
}
#colorWheel span.color09 {
    -webkit-transform: rotate(288deg);
    -moz-transform: rotate(288deg);
    -ms-transform: rotate(288deg);
    -o-transform: rotate(288deg);
    transform: rotate(288deg);
    border-color: #272b66 transparent transparent transparent;
}
#colorWheel span.color10 {
    -webkit-transform: rotate(324deg);
    -moz-transform: rotate(324deg);
    -ms-transform: rotate(324deg);
    -o-transform: rotate(324deg);
    transform: rotate(324deg);
    border-color: #2d559f transparent transparent transparent;
}
#colorWheel:before {
    content: "";
    width: 300px;
    height: 300px;
    overflow: hidden;
    position: absolute;
    top: -30px;
    left: -130px;
    border-radius: 100%;
    border: 30px solid #ffffff;
    z-index: 100;
    box-shadow:0px 0px 2px 12px rgba(180,180,180,.5)
}
#colorWheel:after {
    content: "";
    width: 100px;
    height: 100px;
    overflow: hidden;
    position: absolute;
    top: 100px;
    left: 0px;
    border-radius: 100%;
    box-shadow:0px 0px 2px 12px rgba(250,250,250,.5);
    background: #444 url(Dhiraj.png); background-size:contain
}

Your turn

I had already posted some articles of css3 @keyframes animation examples.  Please check some of these beautiful animation with demo below:

• CSS3 3D effect, Shine text with css3 keyframe animation, Scrolling Page Background with jQuery – Happy New Year Greetings
• Rotating Words With CSS Animations – CSS3 Keyframes Animation Example
• Animated 3D Bouncing Ball with CSS3, Html5
• Creating CSS Starbursts Design with CSS3 Transform
• Animated Notification bubble icon with CSS3 keyframe animation
• How to create a simple CSS3 loading animation

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

Posted by: Dhiraj kumar

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.

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.

You may like:

• Hot Tea / Coffee with Animated Smoke Effect – jQuery & CSS
• Cool Typography Effects With CSS3 and jQuery
• Hover and Click Trigger For CIRCULAR Elements With jQuery
• Random 3D Explosions, 3D clouds – Effects with CSS 3D and jQuery
• Cool Animated Fire Effects with CSS3 and jQuery
• jQuery Plugin for Cartoon-like Background Image Sprite Animation – AniDG – (alernative to animated Gif)
• DG_Slider – An Ultimate jQuery Content Slider Plugin
• Full-Screen Responsive jQuery Banner Slider – Responsive_DG_Slider
• Responsive jQuery Banner Slider with Pagination circles – Responsive_DG_Slider

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.

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.

Updated

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

You may like:

• Hot Tea / Coffee with Animated Smoke Effect – jQuery & CSS
• Cool Typography Effects With CSS3 and jQuery
• Hover and Click Trigger For CIRCULAR Elements With jQuery
• Random 3D Explosions, 3D clouds – Effects with CSS 3D and jQuery
• Cool Animated Fire Effects with CSS3 and jQuery
• jQuery Plugin for Cartoon-like Background Image Sprite Animation – AniDG – (alernative to animated Gif)
• DG_Slider – An Ultimate jQuery Content Slider Plugin
• Full-Screen Responsive jQuery Banner Slider – Responsive_DG_Slider
• Responsive jQuery Banner Slider with Pagination circles – Responsive_DG_Slider
• Animate Full-Page Multiple Background images with fade-in & fade-out effect – jQuery

Posted by: Dhiraj kumar

Full-Screen Responsive jQuery Banner Slider – Responsive_DG_Slider

After working on responsive or flexy designs, I found some serious issues about fixed width in most of images/banner sliders which I have got online. So, I thought to develop a liquid/responsive images slider with different transition effects. Here, I am going to introduce you, a most flexible/responsive slider i.e. Responsive_DG_Slider. 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.

Here I am showing It’s full screen responsive image slider functionality powered by the fantastic java-script library jQuery. With a nice and simple design it adjusted automatically to the width of your browser screen. Image sliders add life and interactivity to your web contents. But creating an image slider from scratch is not that easy. You need some good programming skills to create your own slider. If you are not the programmer or you just don’t want to re-invent the wheel, Responsive_DG_Slider is for you. Previously, I have already developed a very simple and useful slider i. e. jQuery – DG_Slider.

Configuring Your Slider

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 full-screen.

The HTML

For develping a Full-Screen Background image slider you need to create the necessary HTML markups for your slider and then add references to necessary script files.

<div class="fluid_container">
        <div class="fluid_dg_wrap fluid_dg_emboss pattern_1 fluid_dg_white_skin" id="fluid_dg_wrap_4">
            <div data-thumb="slides/thumbs/1.jpg" data-src="slides/1-1280x720.jpg"></div>
            <div data-thumb="slides/thumbs/2.jpg" data-src="slides/2-1280x720.jpg"></div>
            <div data-thumb="slides/thumbs/3.jpg" data-src="slides/3-1280x720.jpg"></div>
            <div data-thumb="slides/thumbs/4.jpg" data-src="slides/4-1280x720.jpg"></div>
            <div data-thumb="slides/thumbs/5.jpg" data-src="slides/5-1280x720.jpg"></div>
            <div data-thumb="slides/thumbs/6.jpg" data-src="slides/6-1280x720.jpg"></div>
        </div>
</div>

The CSS

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'>

After attaching the default CSS, now we will customize it according to our requirement.

.fluid_container {
	bottom: 0; height: 100%; left: 0; position: fixed; right: 0; top: 0; z-index: 0;
}
#fluid_dg_wrap_4 {
	bottom: 0; height: 100%; left: 0;
	margin-bottom: 0 !important;
	position: fixed; right: 0; top: 0;
}
.fluid_dg_bar {
	z-index: 2;
}
.fluid_dg_prevThumbs, 
.fluid_dg_nextThumbs, 
.fluid_dg_prev, 
.fluid_dg_next, 
.fluid_dg_commands, 
.fluid_dg_thumbs_cont {
	background: #222;
	background: rgba(2, 2, 2, .7);
}
.fluid_dg_thumbs {
	margin-top: -100px; position: relative; z-index: 1;
}
.fluid_dg_thumbs_cont {
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
}
.fluid_dg_overlayer {
	opacity: .1;
}

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. In this slider’s API we have several customization options. Here we are customizing some options according to this full-screen slider.

jQuery(document).ready(function(){
	jQuery(function(){			
		jQuery('#fluid_dg_wrap_4').fluid_dg({height: 'auto', loader: 'bar', pagination: false, thumbnails: true, hover: false, opacityOnGrid: false, imagePath: ''});
	}); 
})

Done!

That’s all, I hope you liked this article. Please feel free to comment and share your thoughts/ideas about the result.

Updated

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

You may like:

• Hot Tea / Coffee with Animated Smoke Effect – jQuery & CSS
• Cool Typography Effects With CSS3 and jQuery
• Hover and Click Trigger For CIRCULAR Elements With jQuery
• Random 3D Explosions, 3D clouds – Effects with CSS 3D and jQuery
• Cool Animated Fire Effects with CSS3 and jQuery
• jQuery Plugin for Cartoon-like Background Image Sprite Animation – AniDG – (alernative to animated Gif)
• DG_Slider – An Ultimate jQuery Content Slider Plugin
• Full-Screen Responsive jQuery Banner Slider – Responsive_DG_Slider
• Responsive jQuery Banner Slider with Pagination circles – Responsive_DG_Slider
• Animate Full-Page Multiple Background images with fade-in & fade-out effect – jQuery

Posted by: Dhiraj kumar