Create Zoom Out Hero Image on Scroll Effect

Create Zoom Out Hero Image on Scroll Effect

We come up with the new idea of creating Zoom out hero image on scroll effect which is quite straightforward and easy to do. It is a nice effect base on Zooming animations. You can implement it on your website header area.

When a user scrolls down to 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.

On this publish I will share you an easy way to make a zoom effect on the image by using CSS

How to Create Zoom Out Hero Image on Scroll Effect

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