How To Zoom Into An Image On Scroll

You may have seen the Discovershadow.com site, where the initial header image zooms in and fades out once you scroll down the page.

Pretty slick effect would you say, huh? Today I’m going to show you how you can accomplish a similar effect on your next project.

View Demo Download Files

Note: Currently the demo is not responsive or mobile-optimised.

1. Include Skrollr.js

Include Skrollr.js preferably before the closing tag. This plugin will handle all the animations for you.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/skrollr.js"></script>
<script src="js/_main.js"></script>

2. HTML and CSS

<body>
    <main>
        <section id="slide-1" class="homeSlide">
            <div class="bcg"></div>
               <div class="plaxEl">
                  <h2>This is your title</h2>
                  <p>This is your slide description.</p>
               </div>
        </section>
    </main>
</body>

div.bcg is a container which will hold our background image for each of the slides. I am showing just one section here, but the other two have the same html markup, just different content and ID.

.bcg {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
}
/* Slide 1 */
.bcg {background-image:url('../img/clouds.jpg');}

/* Slide 2 */
#slide-2 .bcg {background-image:url('../img/img_road.jpg');}
#slide-2 h2,
#slide-3 h2  {color: #ffffff;}
#slide-3 p,
#slide-3 p {color: #b2b2b2;}

/* Slide 3 */
#slide-3 .bcg {background-image:url('../img/img_earth2.jpg');}

Our background image div.bcg is always fixed to the top left of the browser and covering 100% of width and height of the .homeSlide.

3. Initiate Skrollr

var s = skrollr.init();

Initiate the skrollr in your _main.js file or another place where you have the rest of your page functionality. Refer to Skrollr.js documentation for more details.

4. Skrollr.js settings

And now to the fun part of the tutorial. Let’s apply our data attributes to make the background image resize and fade out on page scroll.

Zoom into an image on page scroll

<!-- Slide 1 - Cloud image -->
<section id="slide-1" class="homeSlide">
       <div class="bcg" data-top="opacity: 1; width: 100%; height: 100%; top: 0%; left: 0%;" data-center="opacity: 0; width: 156%; height: 156%; top: -28%; left: -28%;" data-anchor-target="#slide-1"></div>
       <div class="plaxEl" data-0p-top="opacity: 0" data-center="opacity: 1;" data-100p-top="opacity: 1; position: fixed; top: 206px; width: 100%; left: 0;" data--25p-bottom="opacity: 0;" data--20p-bottom="opacity: 1;" data-anchor-target="#slide-1">
              <h2>This is your title</h2>
              <p>This is your slide description.</p>
       </div>
</section>

On the first slide we are animating from opacity: 1; width: 100%; height: 100%; top: 0%; left: 0%; to opacity: 0; width: 156%; height: 156%; top: -28%; left: -28%;. This gives the impression that we are zooming into the image while scrolling. You can play with these settings to achieve different results, but having the top and left offset (-28) half of size increase (56) works the best in my examples.

Zoom into an image on page scroll

<!-- Slide 2 - Road image -->
<section id="slide-2" class="homeSlide" data-bottom="opacity: 0;" data--10p-bottom="opacity: 1;" data-anchor-target="#slide-1">
       <div class="bcg" data-top="opacity: 1; width: 100%; height: 100%; top: 0%; left: 0%;" data-40p-bottom="opacity: 0; width: 196%; height: 196%; top: -48%; left: -48%;" data-anchor-target="#slide-2"></div>
       <div class="plaxEl" data-top="opacity: 0; position: fixed; top: 206px; width: 100%; left: 0;" data-center="opacity: 1;" data-10p-bottom="opacity: 1;" data-bottom="opacity: 0;" data-anchor-target="#slide-2">
              <h2>This is your title</h2>
              <p>This is your slide description.</p>
       </div>
</section>

We are animating the second slide from opacity: 0 to opacity: 1. This happens when the bottom of #slide-1 is 10% above the bottom of the viewport. For a more visual picture please refer to this infographic which explains the relationship between the anchor and the element.

Trust me – it took me a while to get the demo perfect, so don’t be afraid to experiment to learn exactly how it works.

Zoom into an image on page scroll

<!-- Slide 3 - Earth image -->
<section id="slide-3" class="homeSlide" data-bottom-top="opacity: 0;" data-center="opacity: 1;" data-top="opacity: 1;" data-anchor-target="#slide-3">
       <div class="bcg" data-top="opacity: 1; width: 120%; height: 120%; top: -10%; left: -10%;" data-center="opacity: 1; width: 110%; height: 110%; top: -5%; left: -5%;" data-bottom="opacity: 0; width: 100%; height: 100%; top: 0%; left: 0%;" data-anchor-target="#slide-3"></div>
       <div class="plaxEl" data-top="opacity: 0; position: fixed; top: 206px; width: 100%; left: 0;" data-center="opacity: 0;" data-bottom="opacity: 1;" data-anchor-target="#slide-3">
              <h2>This is your title</h2>
              <p>This is your slide description.</p>
       </div>
</section>

On the third slide I wanted to create the opposite effect and zoom out of an image while you scroll. A photo of the earth from space works great for this kind of effect.

We are actually using 3 “keyframes” – data-top, data-center and data-bottom. When the top of #slide-3 is at the top of the viewport we want the earth to be fully visible and slightly scaled up, these settings are set in data-top="opacity: 1; width: 120%; height: 120%; top: -10%; left: -10%;".

In the center of the slide we still want the earth to be fully visible, but slightly scaled down. This is set in data-center="opacity: 1; width: 110%; height: 110%; top: -5%; left: -5%;". We need to include the same attributes in the data-center, but half way between the data-top and data-bottom values (eg: 120% becomes 110%).

If we don’t include the same attributes, this would confuse skrollr and the scaling animation wouldn’t continue past the center point.

data-bottom has the settings for the final part of the animation. It fades the whole background image out, while still scaling it down to 100% of it’s original size.

Finally, we are fading in div.plaxEl containing the title and text when the #slide-3 center is in the center of the viewport, this creates a nice crossfade effect.

View Demo Download Files

Conclusion

There you have it! A quite simple, but effective visual which can bring a normally boring page to life. What do you think about using similar effects on your projects? Leave a comment below or send your questions to @ihatetomatoes.

14 thoughts on “How To Zoom Into An Image On Scroll

  1. Mirko

    Very nice effect, but I don’t like that it is dependant on other jQuery code and plugins. Namely the viewport plugin. Skrollr is vanilla JS, it would be nice if this effect is pulled without any dependancies in the tutorial.

    This way someone who just wants the effect for his project must go through a lot of trial and error to make it work. For example I can say that I know my way around code, but I am having trouble recreating the effect without the viewport plugin code in the main js file.

    Really great tutorials, but please make them a little less dependant, so that they can be easily ported to someone else’s code :))

    Reply
  2. Michael Grant

    Hi,

    I signed up for your email list already and went through the steps to download these files but I didn’t receive an email link. Please help me. Thanks!

    Reply
    1. Petr Tichy Post author

      Hi Michael, my email provider had some issues. I have added you manually and you should have received the confirmation email. Please confirm. Cheers

      Reply
  3. MICHAEL GRANT

    Thanks, I’m in! Now for the big question… Do you know how I can release the content portion of the transition and allow that to be scrollable and not fixed?

    I took the example and reduced it to a single slide and added long blocks of content, but it doesn’t scroll. Any feedback here would be awesome. 🙂

    Reply
  4. oliviervbs

    can i use this without the fade and a bigger zoom out effect i apologize up front i’m kind of new to jquery’s this is a picture of the motion i want to get
    thanks
    http://imgur.com/1waAS4B

    Reply
  5. César

    Hey! great tutorial, but I have a question: how can I make a responsive parallax because when I see it on my mobile, only shows a part of the image and no the whole picture. Thanks!

    Reply
  6. Marc Nagel

    How might I go about adding another section? I’ve tried recreating some of the properties of section two (with a different background image) and putting them before section three but it doesn’t seem to work. Thanks!

    Reply
  7. Jules

    Which Browsers have a toggle to switch off zoom on scroll ?

    This seems to be another example of an effect being applied – “because we’ve found a new toy – we think it’s cool – and we’re going to force it on you too”.

    For those of us visiting a website…..
    …. probably already top-heavy with unnecessary, or oversized photos – forcing us to scroll past to the actual content we are there to read…..
    ….The last thing we want is distraction from reading that content by an unwanted animation.

    And even if we DO want to examine a photo – it’s harder to focus when it’s moving.
    Please let the user control the zoom.

    (Do web-designers ever ask users what they prefer ??)

    Reply

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.