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

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

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

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