The parallax effect is an illusion that is created when the viewer is moving and the objects being viewed may seem to move slower in the distance while objects that are closer to the viewer seem to move a lot faster. A practical example would be when one is riding in a car looking out the window on a highway, and then you notice the objects nearest you like a fence moving by quickly while horses in a field move slower and objects beyond them like a hill won't seem to move at all. There is a difference in the orientation of the objects you see. Web designers have begun using this effect on various websites and it's an interesting graphic illusion that adds a point of interest on your website when resizing the browser window. To create the 3D background with a parallax effect on your website you will need to use Photoshop and CSS codes.
- Select a theme. Pick the theme and images you want to create a parallax effect with. You'll need at least three layers of images to create the 3D background design with a parallax effect. You can create background image with snowflakes of different shapes and sizes.
- Prepare the images and layers in Photoshop. When you have your theme and images ready, open your Photoshop program and load the images in different layers. In this example we have a winter theme with snowflakes that will help create the parallax effect. You should have 3 images and each will be in their respective layers. The first layer will contain the background picture. This is the furthest image from the viewer so you'll have the smallest snowflakes on top of a blue background color. The second layer will contain the mid ground image, these will be slightly larger snowflakes. Then the third and last layer will contain the foreground image or the largest picture.
- Save the layers in the proper format. We will be saving each image in the PNG 24 format. So when you are done tweaking your images and happy with the results, save each image in the PNG 24 format. First save the background image, but before saving, turn off the visible button on the foreground and midground layers on the layers palette. So the only visible image will be the blue background with small snowflakes on top of it. Go to Save for Web and Devices and select Save, make sure it is in the PNG 24 format and name it background.png. Next, select the midground image layer and make it visible by clicking the visibility box next to it. Since we need to make this a transparent layer we need to turn off the background image visibility button and the background color. So the only visible image is the medium sized snowflakes without a background. Save the midground layer the same way you saved the background layer. Name it midground.png. Last we'll save the foreground layer, turn on the foreground layer visibility button and turn off the midground visibility button. So the only image visible is the foreground image or the biggest snowflake image with no background. Follow the same saving process and name it foreground.png.
- Create the HTML and CSS codes. Go to your index.html file and create div for the foreground and midground images. The div elements will go between your body tags so it will look like this:
Now go to your style.css file and put in the following code in the body tags:
body {
background: url(images/background.png) repeat 5% 5%;
}
#midground {
background: url(images/midground.png) repeat 30% 80%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 997;
}
#foreground {
background: url(images/foreground.png) repeat 105% 120%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 998;
}
The CSS code will style the midground and foreground images with absolute positioning and repeat percentages. The repeat percentages will control the horizontal and vertical movement speed of each image. You'll notice our foreground percentages are higher than 100%, this means it will move at a rate faster than the browser window's rate when it is resized. You can now test your theme in your browser.
Click here to visit HowToDoThings.com