Inspiration for Article Intro Effects

Some inspiration for effects applied to title headers of articles with a fullscreen image. The idea is to show some creative transition when continuing to the article body.


View demo Download source

Today we want to share some inspiration for article intro effects with you. You have surely seen some interesting article headers, usually containing a fullscreen image, that have some sort of intro effect, i.e. where some creative transition happens when scrolling or when clicking on a button to continue. We wanted to explore the effect possibilities with fullscreen images and making something happen when continuing to the article body. There are many potentially cool effects and today we want to share just a couple of ideas with you.

One really nice effect that we tried to imitate, is the one seen on Jam3 when choosing a project. There, a fullscreen video is being animated to a narrow bar while the content slides in.

Most of the effects we tried are highly experimental; animating large images can become a bit sluggish, also because a couple of transitions happening at the same time. The effect gets triggered when scrolling begins or when the button is clicked.

Note that hijacking the scroll is really not a great thing to do, so restricting it to a really short period is essential when deciding to use such an invasive method. We are using it here because of demo purposes only, but please keep in mind that it’s not an elaborate solution at all. We are not throttling the scroll handler, something you should definitely do in case you want to use something like this on scroll. Note that the effects can be applied when clicking a button, also. Or you could use something like parallax scrolling for a gradual effect.

The images in the demos are from amazing Unsplash, a fantastic place to find high-quality public domain photos.

The first effect pushes the image to the top together with the title, and a new title element slides in with the content.


The second demo shows the effect that fades out the image at the bottom and fades in the resting content. We do this by using a pseudo element with a linear gradient.


The third effect slices the main image into two where the first half moves up and the second one slides down, giving space for the title to enlarge.


The forth effect cuts away the image and pushes the title to the side.


The fifth effect is similar to the previous one but here we fix the image to the side and allow the content to flow on the right hand side.


The next demo moves the image up and reveals a grid where the current main image will scale up into the grid. This could be a great idea for showing related posts right in the header.


The last effect is an attempt to imitate the cool effect seen on Jam3: the fullscreen image becomes a top bar and the content slides in.


We really hope you enjoyed these effects and get inspired!

View demo Download source


Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by


Related Articles

Feedback 80

  1. 2

    One question: what should i do in order to make some pages with “no effect” (no background image, starting directly from step 2) ??

  2. 5

    Hi, great article!
    I had found a bug in the fifth effect on FF (i’m running 30.0).
    The text of the article remain hidden. I added a new class to the div, setting his z-index to 1000 as like the .title and it works.

    Have a nice day

  3. 6

    Congrats. For the first time I’ve said ‘oh.. I love the web’ , thats was an amazing feeling, thanks !

  4. 7


    Thanks for this amazing article. I would like to put this into my wordpress index.php.
    Do you know how to do that? Because i’ve try but without success.

    Best regards.

    • 8

      hmm, not as simple to apply this article to index.php at wordpress, i think , first you must learn how to make wordpress theme or child theme

  5. 9

    I showed my director and other bosses this effect and now they want me to use it for a big client. I feel like I made a huge mistake because its jagged in safari and IE8 doesnt work at all. Any suggestions to what my next move would be? I can go ahead and assume there is no fix for IE and ill have to create a different page for IE8 and below to visit.

  6. 10

    Hey Manoela,

    just saw the pic of my beloved Lab, called “Woody”, in the second demo. “Unconditional Love & Cookies” is such a perfect headline … I love it! Keep on rockin’ with your CSS-Inspiration. Woody likes it too (while snoring under his yucca-palm in the living room) … ;o)

  7. 11

    Caught a weird issue in Firefox caused by the disable/enable scroll effect in the js that disabled the space key in forms. Change

    var keys = [32, 37, 38, 39, 40], wheelIter = 0;
    var keys = [37, 38, 39, 40], wheelIter = 0;

    Hope that helps someone else!

  8. 12

    I have an issue with one page scroll nav. it’s not working from the very top of the article image. :-( any help pls!

Follow this discussion

Leave a Comment

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>