How to zoom into an image on scroll

How to zoom into an image on scroll

December 16, 2013 • Web development7 Replies

Share on Facebook0Tweet about this on Twitter0Share on Google+0Share on LinkedIn0

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.

Want to download the files?

The files are only exclusively available to my newsletter subscribers. Sign up to receive the files and get also my future tutorials straight to your inbox.

7 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

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=""> <strike> <strong>