20 Dec
While the use of Parallax effect is not very uncommon in the Web with the use of Javascript like this one, however the latest project from Javier Roman leaves one amazed at the possibility of CSS which would only continue to grow with CSS3.
Javier has been working on interesting projects using only CSS and no javascript for a long time. He has also created portraits and cartoons using only CSS.
In this article we present the procedure as followed by the designer from none other than the man behind it all himself – Javier Roman Cortes on how he created the CSS 3D Parallax of Les Meninas (a 1656 painting by Diego Velázquez).
DISCLAIMER: The following post has been used by the permission of the author and should not be copied or edited in any way. It is meant to be used as a source of learning and inspiration only. The English has been corrected for grammatical errors by the consent of the author.
Roman explains:
I’ve taken the classic painting of The Maids of Honour (Las Meninas) and made this CSS pseudo-3D/parallax effect. It is pure CSS, so no Javascript or Flash is involved: only CSS and HTML code.
It has been tested and is working in Internet Explorer 8, Firefox 3, Opera 9, Safari 3, Chrome 4 and Konqueror 3.5, and it validates.
A lot of people have been asking me how my Pure CSS 3D Meninas effect works and how I did it. In this post I will try to fully explain it, right from the basics of image edition to the HTML/CSS coding part. Even if this is going to look like a tutorial, please, don’t take it as a tutorial; this effect is just an experiment and not thought to be a very useful or good practice in web design.
Finding the vanishing point
Trace 2 lines (in green) following the 3d parallel lines in the right wall until they cross. The crossing point (in yellow) is the vanishing point. Trace two lines following the right and bottom corners of the back wall (in red). A line crossing the vanishing point and the intersection of the two red lines (in blue) defines the corner of the ground with the right wall.
Movement Speed of the Layers
When moving the layers to make the parallax effect by displacing the vanishing point as in my effect, the relative speed of these is inversely proportional to the height of the vanishing point from the ground. The red horizontal lines are proportional in width to this height too (Intercept theorem), and I believe it is easier to see it this way. If you want to move the viewer instead the vanishing point, the speed would be directly proportional instead of being inversely proportional.
Slicing the Images
This is the part that takes more time: Slice a layer and place it apart, fill the holes, cut another layer, and so on. Obviously it is not required to paint parts of the image that are going to be occluded in the effect.
CSS Sprites
In this example I’ve used the CSS sprites technique, wich consists in making a big image containing different images, and then show these cutted by CSS. By reducing the number of files a website has to request to the server, the loading time gets decreased. The layers look like this:
So, how to make a CSS Sprite? Use a block element with the sprites file as background-image, with the width and height of the sprite you want to take, and background-position defining the offset of it in the whole sprites image. Remember that the background positions should be negative.
<div style=”background-image: url(’meninas-sprites.png’);
width: 205px; height: 128px; background-position: -23px -120px”></div>
Complex hover effects
Current browsers support complex hover effects for all tags and allow changes in child tags caused by the hover of the parent tag. Let’s take a look of the following code:
HTML:
<a href=”#” mce_href=”#”><img src=”something.jpg” mce_src=”something.jpg” />
Some text here <span>and more text here</span></a>
CSS:
a img {position: absolute; top: 500px; left: 300px;}
a:hover img {top: 400px;}
a:hover span {font-weight: bold;}
With this code, when hovering the <a> element, the image will change position, and the text between the <span> tag will change its weight to bold. As you can see, it is easy to make really complex hovers modifying different properties of different elements inside the main hovered tag.
How the layers move by the mouse position?
There are 80 vertical hover elements of 5*455 pixels each, covering the full effect. Each hover element contains inside elements to define every layer position, the background image and the lateral background image. When the hover element is not active (without the mouse over it), all that the inside elements are showing is hidden images, with display: none.
When the hover element is active, the images are set to display: block, and the position of these are set. These positions have been calculated and are written in the CSS code for each layer and each of the 80 vertical hover elements. This is what does the magic.
Since the hovering elements are overlapping, there is a little problem to do this, because once the element is hover and shows its inside images, all the area is part of the hover, so it will not switch to other hover element until you move your mouse outside the effect.
So, how to make it work? The solution I found was to use z-indexs and spans with ” ” or non-breaking spaces on top of the images. This looks to work fine with all the current browsers.
Right background lateral
A true parallax effect would be not only 4 or 5 layers, but a layer for every vertical 1-pixel-height line on the ground/ceiling. This would be 2 or 3 hundreds of layers. The HTML/CSS code for it would be a lot of bigger, and also the browsers would not be able to render it at a decent speed.
I had to find a way to make it look reasonably good but with a simpler approach, so what I did was to divide the background in two parts:
Then, while the first image is only displaced, the second image with the right lateral is displaced and resized. You can not resize CSS sprites or background-images, but you can resize <img> elements by setting the width and height desired.
Source code
Some people asked me for the php script I used to generate the html. I consider it is not very valuable but… here it is.
We hope the article has been valuable for our readers. I would love to hear your comments on the quality of articles you are finding on Inspiring Pixel. I hope it is up to your level of satisfaction.
’)
it’s look like parallax effect using javascript
Only that it is not! Roman recently created the 3D CSS Coke Can too, which is a brilliant work.