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

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

Animated 3D Perspective Background Patterns using HTML5 Canvas

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

read-more-button

Analog clock using css3 and jquery

Hi guys! Today we are going to see another great example of analog clock using the power of CSS3 and most advanced library jQuery. We will start by creating a very cool and realistic analog wall clock with pure CSS3 properties, and add a little smooth rotation for giving the clock handles a rotating effect. read more @ http://www.css-jquery-design.com/…

analog clock using css jquery javascript

BROWSER COMPATIBILITY:

As we mentioned before, this technology is developed with jQuery so it is supported by almost all major browsers. it is possible that the syntax and behavior can be changed in future versions of browsers. For today, it is supported by next browsers: read more @ http://www.css-jquery-design.com/…

  • Chrome 15+
  • Firefox 9+
  • Safari 4+
  • IE9+
  • Opera 12+

read-more-button

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

Javascript or jQuery Fullscreen browser window – Html5 technology

The new html5 technology – fullscreen API gives us an easy way to present a web page content in full-screen mode. We are about to give you detailed information about the fullscreen mode. Just try to imagine about all possible advantages which you can get using this technology – full-screen photo albums, videos, and even games. But before we describe this new technology, I have to note that this technology is experimental, and not all the browsers support it.
read more @ http://www.css-jquery-design.com/…

javascript-jquery-fullscreen-browser-window-html5-technology

Starting the full-screen mode

Due to the fact that this mode is supported by different browsers differently, we have to foresee all the cases: read more @ http://www.css-jquery-design.com/…

read-more-button

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

css3-modal-window-popup

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

read-more-button

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.

creating-puzzle-game-with-jquery

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;
}

view demo

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:

Posted by: Dhiraj kumar