Create Zoom Out Hero Image On Scroll Effect with HTML & CSS

Create Zoom Out Hero Image on Scroll Effect

In this tutorial, you will learn how to Zoom-out a hero Image with CSS. The idea to create full-page background-image and then apply Zoom-out effect on scroll.

Frequently, it can implement on website home page, landing page or header area. They can also work well with a single post, category, archive, contact, and other pages.

Although, the hero image section may vary by size. Full-Screen hero images are most popular in recent time. Many notable publishers such as Medium.com is using the full-page intro hero section.

However, you need to pay little attention while creating a full-page hero image. Here are few points which keep in mind while build it.

  1. It should cover whole the browser viewport size
  2. The content on the hero image should be centered align.
  3. Text on hero image should be visible which reqiure some kind of CSS filter.
  4. Finally, the image look good on all media devices.

In our example, we will apply Zoom effect on hero image. When user scroll down the page — For a little time, the image will be first Zoom-out and then page scroll down.

Similar when the user scrolls up —- The hero image will be Zoom-in to provide a nice effect.

I only wanted an image that could Zoom-out while you scroll down the page. This idea can use while design parallax scrolling website. In fact, we will use the parallax Skrollr.js plugin to make this effect.

There are numerous ways you could add a little spice to your web layout tasks and considered one of them is adding a CSS Zoom Image on photos when user Scroll down the page.

Let’s Start with Hero Image

To add the Zoom-out effect on your webpage, Let’s load the both Skrollr.js and jQuery file into your site header. You can also add style.css if you don’t want to use the below CSS.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.29/skrollr.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />

Now, we take a look simple HTML. The markup is just a DIV that included some data attribute values. These values require because of the requirement of Skrollr.js

<div id="image" data-0="background-size: 150% auto;" data-500="background-size: 100% auto; position: fixed; top:0;" data-501="position: absolute; top: 501px;">
</div>

The CSS Style

We will apply some CSS to make the Zooming effect work. We will add the position relative to both the body and the HTML element. We did also apply some fixed height so that you can easily notice the effect.

Now the main thing about setting up the background-image and for this we make it fixed position to create a nice parallax effect.

We apply the height 100VH to make it fit with the full-screen browser window. Furthermore, We simply set the background-image with its size of 150%.

html, body {
  position: relative;
  margin: 0;
  height: 1500px;
}
#image {
  width: 100%;
  height: 100vh;
  min-height: 600px;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  background-size: 150% auto;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(../img/photo.jpg);
}

The Javascript.

To initialize the effect we need to add the following function.

$(document).ready(function() {
  var s = skrollr.init();
})

That’s It! We have done with zoom Out effect. Hope you like this new small tutorial. Leave comments and share with your friends.

Code ExamplesYou May Also Like