Big header images are often used these days as background for the tagline of the website. They cover the "introduction" section, users can focus on 2-3 main elements - menu, message and call-to-action button - then, if interested, they can scroll down and learn more. The image is mostly a visual embellishment.

In today's snippet we created a nice animation that scales down the image section while the user is scrolling down, thus creating a fake 3D movement on the Z axis (with the help of the z-index property).

Inspiration came from the Anchor Travel website.

Creating the structure

We created a section#cd-intro element to wrap our image and the tagline/message:

<section id="cd-intro">
   <div id="cd-intro-background"></div>
   <div id="cd-intro-tagline"><!-- insert your tagline here --></div>
</section>

and set our full width image as background of the #cd-intro-background element.

Adding style

On the desktop version, we assigned a position:fixed; to the section#cd-intro and set the origin for the CSS3 scale Transformation for the #cd-intro-background element to be 50% (X axis) and 100% (Y axis). This is all we need for the zoom-out effect to work.

@media only screen and (min-width: 1170px) {
  #cd-intro {
    position: fixed;
    top: 70px;
    left: 0;
  }
  #cd-intro .cd-intro-background {
    transform-origin: 50% 100%;
  }
}

The scale transformation value is dynamically assigned to the #cd-intro-background element using jQuery.

Events handling

We defined the triggerAnimation() function to trigger the CSS3 scale Transformations and  bound it to the window scrolling.

function triggerAnimation(){
   if($(window).width()>= MQ) {
      $(window).on('scroll', function(){
         //The window.requestAnimationFrame() method tells the browser that you wish to perform an animation- the browser can optimize it so animations will be smoother
         window.requestAnimationFrame(animateIntro);
      });
   } else {
      $(window).off('scroll');
   }
}

We used the requestAnimationFrame() for scroll event handlers. Basically, the requestAnimationFrame() method tells the browser that we want to perform an animation so that browser can optimise it.

The animateIntro() function scales the #cd-intro-background element and changes its opacity according to the window scrollTop() value (to simulate the 3D movement).