Ideas and Demos for Animating Article Headers

I’m a huge fan of Medium.com for both its awesome writing platform and extremely clean and simple presentation. I think their front-end design and interactivity strikes a perfect balance for the user. That being said, their work is an inspiration for designers and developers everywhere. For this article, I’ve provided a ton of variations of the Medium header concept. Everything from subtle and basic to slightly over-the-top. I’ll also demo how easy it is to prototype these out using just ScrollMagic.

The Demos

I built these out pretty quickly. If you check out the tutorial below you’ll see just how easy and simple the setup is for doing stuff like this. I’m sure a lot of you can probably start getting even more creative than these demos. Some of these are nice and simple, while others are wild and crazy. I think the key is to be interactive but be subtle enough where it’s not distracting for the user.

How it Works

Building these should be pretty straight forward if you have a decent knowledge of HTML, CSS, and jQuery. I’ll break it down into pieces anyways.

The Main Wrapper

The first thing you need to do is build out the main container.


<div id="topper">

</div>

In most cases, you can apply the background image here. Here’s the code for it:


#topper {
    position: relative;
    height: 60vh; /* 60% of viewport */
    min-height: 300px !important; /* In case window becomes too narrow */
    background-color: #111; /* Shows while the image is loading */
    background-position: 50% 0; /* Best for responsive */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover; /* Covers the entire div */
    background-repeat: no-repeat; /* No repeat */
}

The Pseudo-class

The next step is optionally adding an overlay on the image with CSS. We’ll do this with :before pseudo attribute since it’s a pretty neat trick. Using this, we’ll cover the entire image and change its opacity to create a filter like overlay for the container.


#topper:before {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: block;
    content: ' ';
    background: #000;
    opacity: 0.4;
}

The Header’s Content

Next we’ll add the header’s content in a wrapper. We’re doing this so that we can position absolute everything together however we want. I’m just going to perfectly center it, but you can position it however you want (top, left, bottom, right, etc.). Here’s the markup:


<div class="wrap">
    <h1>A Really Big Title</h1>
    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate odio, asperiores aut sapiente blanditiis cupiditate harum beatae deleniti.</p>
</div>

And here’s it’s CSS to perfectly center:


#topper .wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    max-width: 800px;
    padding: 0 15px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

The Javascript with ScrollMagic

It’s no secret that I’m a huge advocate of using ScrollMagic. I can’t stress enough how much I like to bind CSS3 animations to a users scroll. To do these effects, I’ll be using the soon to be released ScrollMagic 2.0 (currently in Beta). Here’s what that the code generally looks like:


// Initiate Scroll Magic
var scrollMagicController = new ScrollMagic.Controller(
    {
        globalSceneOptions: {
            triggerHook: 'onLeave'
        }
    }
);

// Animation for Background Image offsetting
var topperTween = TweenMax.to('#topper', 1,
    {
        backgroundPosition: '50% '+ $('#topper').height() * 0.4 + 'px', /* Adjust for parallax speed */ 
        ease: Cubic.ease,
        z: 1
    }
);

// Animation for the header offset
var headingTween = TweenMax.to('#topper h1, #topper p', 1,
    {
        y: 200
    }
);

// Where the Animation Happens
var scene = new ScrollMagic.Scene(
    {
        triggerElement: '#topper',
        duration: '60%' /* Height of viewport */
    }
)
.setTween([topperTween, headingTween]) /* Array of animations occur */
.addIndicators() /* Enable dev mode */
.addTo(scrollMagicController); /* Mix it all together */

A Note on Browser Support

In this demo, browser support wasn’t a huge concern. It should work in all modern browsers. With ScrollMagic, I use the GreenSock Animation Library which provides top of the line performance and browser support. I do take short cuts in this demo like using the View Port height CSS propert 60vh or transforms for alignment.

Conclusion

That’s all there is to get these concepts going. Just remember that it should be all about the content and not the animation. Hopefully you’ve enjoyed these demos and see how easy it can be to produce some interactive content-based webpages.