"Hero Image" - parallax banners

With CSS 3D Transforms, you have endless possibilities. But power entails responsibility. You will encounter 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 in 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 changes when the mouse cursor moves. 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 the movement of the mouse, it will be invisible on mobile devices.

This remarkable effect can be seen on sites such as Squarespace and HelloMonday .

Structure creation

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

The sizes of the images used should be the same.

Adding Style

To create a hero image, we superimpose the elements on top of each other: the first has a static position, and the rest are in 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.

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

.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 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 element position property 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 is in absolute position, its default height is 0) and the correct dimensions .cd-floating-background (it must be larger than the shell - then during rotation no empty borders are found).

We estimate the aspect ratio and image width and set the .cd-background-wrapper height equal to the values ​​of viewportWidth / heroAspectRatio. The height and width of .cd-floating-background should be proportional to .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 .cd-background-wrapper: the mouse position is evaluated using event.pageX and event.pageY, after which the .cd-floating-background element is assigned the corresponding values ​​of rotateX and rotateY.

Note: Modernizr does not yet define preserve-3d. 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 browser support.