Zoom-out Intro Effect – A full-width header image, animated using the CSS3 scale property and jQuery to simulate a 3D zoom-out effect and reveal the main content of the page.

2014-10-31 • Plugins • Views: 1557

Today’s resource is a full-width header image, animated using the CSS3 scale property and jQuery to simulate a 3D zoom-out effect and reveal the main content of the page.

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).

 

Website

Demo

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Shares