Zoom Out Hero Image On Scroll Effect with HTML & CSS

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

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

Basic HTML for 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);
}

Finally JavaScript for Zoom Effect

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

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

That’s It! We have done the functionality for hero image zoom on window scroll. Hope you like this new small tutorial. Leave a comment and share with your friends.