pull out intro effect
June 24, 2014 | 23 Feedbacks

Zoom-out Intro Effect

Today's resource is a full-width header image, animated using the CSS3 scale property and jQuery to simulate a 3D zoom-out effect and reveal the main content of the page.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

Big header images are often used these days as background for the tagline of the website. They cover the “introduction” section, users can focus on 2-3 main elements – menu, message and call-to-action button – then, if interested, they can scroll down and learn more.  The image is mostly a visual embellishment.

In today’s snippet we created a nice animation that scales down the image section while the user is scrolling down, thus creating a fake 3D movement on the Z axis (with the help of the z-index property).

Inspiration came from the Anchor Travel website.

Creating the structure

We created a section#cd-intro element to wrap our image and the tagline/message

and set our full width image as background of the #cd-intro-background element.

Adding style

On the desktop version, we assigned a position:fixed; to the section#cd-intro and set the origin for the CSS3 scale Transformation for the #cd-intro-background element to be 50% (X axis) and 100% (Y axis). This is all we need for the zoom-out effect to work.

The scale transformation value is dynamically assigned to the #cd-intro-background element using jQuery.

Events handling

We defined the triggerAnimation() function to trigger the CSS3 scale Transformations and  bound it to the window scrolling.

We used the requestAnimationFrame() for scroll event handlers. Basically, the requestAnimationFrame() method tells the browser that we want to perform an animation so that browser can optimise it.

The animateIntro() function scales the #cd-intro-background element and changes its opacity according to the window scrollTop() value (to simulate the 3D movement).

Changelog

June 24, 2014
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse and Nucleo. You can follow her on Twitter.

  • Simon Shahriveri

    Nice!
    Small point. you could use ‘$(window).off’ rather than ‘$(window).unbind’

    • Claudia Romano

      Good point! Thanks.

  • http://outboxvision.co/ Alexandru Giuseppe Ispas

    Nice effect!
    But what about mobile ? Does it have any fallback ? I assume that this is not really working on mobile…
    Thanks!

    • Claudia Romano

      We added the scale transformation only on desktop. On mobile, the intro image scrolls with all the content. You can check it on your phone ;)

  • daniela

    I tried to make the intro-section bigger – I thought I could accomplish this by simply changing the height of #cd-intro to something like 700px but it does not work – could you help me out?

    • Claudia Romano

      Hi Daniela. Yes you have to change the height of #cd-intro element, but also change the margin of the main.cd-content element (on desktop version only, since the #cd-intro element is in position fixed). It means that if you set height: 700px for #cd-intro, you have to set margin-top: 770px for main.cd-content). Hope this helps! :)

  • Peter drew

    Is there anyway to do something like this in a wordpress template?

    • Claudia Romano

      Sure you can. You have to create the .php template file and integrate the html code we have provided in the index.html file. Also, don’t forget to include the css and js code.

  • Jérémy Paul

    Used it for my portfolio website… Thanks a lot Cody House! :D http://jeremypaul.me

  • Christian Tate

    Claudia, what if I wanted to make the image scale up on scroll, rather than shrink? How do I reverse the sizing of the intro background?

    • Claudia Romano

      Hi Christian, in the main.js file try replacing

      with

  • Kostikov

    Please tell me
    how to split the content into two blocks content and sidebar in this case

  • http://lukespoor.me Luke Spoor

    Is there anyway to also change the opacity of the content within when performing the scroll?

    • http://codyhouse.co Claudia Romano

      Hi Luke, yes you can reduce the opacity of the tagline the same way as we did with the background image. In the animateIntro() function (inside the the if statement) you need to add:

      • http://lukespoor.me Luke Spoor

        Great thanks, should this be easy enough to implement a slider with?

  • Sarah Bennet Mills

    Claudia great work again. My readers are getting something useful on monthly bases as we are featuring most of codyhouse tools in our monthly round up. Have a look: http://www.byteswire.com/best-jquery-plugins-from-december-2014/

    • http://codyhouse.co/ Sebastiano Guerriero

      Thanks for featuring us Sarah ;)

  • Hannad Ur Rehman

    great work..

  • George

    Does anyone else’s demo stutter on desktop? Also I tried the demo on my Smartphone, to no avail. Anyone can confirm?

    • Jan

      In my iPad the same.

  • Ol. VT

    Hi, what if I want to reproduce this effect on a mobile ? Do I just need to change the “MQ”‘s value in your Javascript or is there an other trick ?

  • https://github.com/xgqfrms/blogs xgqfrms

    it doesn’t work!

    • http://codyhouse.co Claudia Romano

      Hi there, just tested it on Chrome (52.0.116) and it’s working fine. What browser are you using? Thanks