“Hero Image” - parallax banners

With CSS 3D Transforms you have endless possibilities. But power entails responsibility. You will be faced with situations where you can take advantage of all the three-dimensional benefits of CSS. However, in most projects you can only slightly embellish some things.

Today's treasure is an effect that is gaining more and more popularity and is created through 3D Transforms. Due to this, we placed several images on the z axis, after which we used the mouse as a false three-dimensional camera, so that the perspective changed when the mouse cursor was moved. In fact, in this case, we rotate the image in three-dimensional space in accordance with the position of the mouse.

Demo

Since this effect depends on mouse movement, it will not be visible on mobile devices.
')
This wonderful effect can be viewed on sites like Squarespace and HelloMonday .

Structure creation

We use the figure element that contains our banner (hero image) (here we used 3 different ones) and wrapped it in the .cd-background-wrapper element.

<div class="cd-background-wrapper"> <figure class="cd-floating-background"> <img src="img/cd-img-1.jpg" alt="image-1"> <!-- images here --> </figure> </div> 

The size of the images used should be the same.

Adding Style

To create a hero image, we impose elements on top of each other: the first one has a static position, and the rest are in an absolute position; each of them is assigned a separate translateZ value.

What is the idea of ​​the parallax effect: when the user moves the mouse on the “hero image” banner, the .cd-floating-background element rotates (along the X and Y axes), depending on the position of the mouse. Since elements have different translateZ values, each of them rotates differently.

In order to fully achieve this effect, we need to make sure that our elements are properly located in three-dimensional space: first we specify the perspective value for the .cd-background-wrapper, which creates the three-dimensional space in which its children are located; then we assign transform-style: preserve-3d for .cd-floating-background so that these children are placed in three-dimensional space, not flat (as set by default). The rest is done by TranslateZ!

 .cd-background-wrapper { overflow: hidden; perspective: 4000px; } .cd-floating-background { transform-style: preserve-3d; } .cd-floating-background img:first-child { transform: translateZ(50px); } .cd-floating-background img:nth-child(2) { transform: translateZ(290px); } .cd-floating-background img:nth-child(3) { transform: translateZ(400px); } 

About IE : IE9 does not support CSS3 3D Transforms, and IE10 + does not support the “transform-style: preserve-3d” property. Therefore, in the IE browser, the parallax effect will not be visible, and you will see a standard image.

Event handling

We bind the initBackground () function to the image loading event: this function changes the value of the position property of an element from relative to absolute (the “is-absolute” class is used). In this case, we need to specify the correct height of the .cd-background-wrapper element (since its child element is in absolute position, its default height is 0) and the correct dimensions are .cd-floating-background (it must be larger than the shell - then during the rotation there will be no empty borders).

We estimate the aspect ratio and width of the image view and assign a height to the .cd-background-wrapper equal to the values ​​of viewportWidth / heroAspectRatio. The height and width of the .cd-floating-background should be proportional to the .cd-background-wrapper, and the parameters of the left and top sides should be set so that the image is centered inside the parent element.

After that, we bind the mousemove event to the .cd-background-wrapper: the mouse position is evaluated using event.pageX and event.pageY, after which the corresponding value of rotateX and rotateY is assigned to the .cd-floating-background element.

Note : Modernizr does not define “preserve-3d” yet. Therefore, to create this effect for those browsers that do not define it, we used the getPerspective function, which assigns the class “preserve-3d / no-preserve-3d” in accordance with the browser support.