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.







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.

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

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

ArticleIntroEffects_01

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.

ArticleIntroEffects_02

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.

ArticleIntroEffects_03

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

ArticleIntroEffects_05

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.

ArticleIntroEffects_06

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.

ArticleIntroEffects_07

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.

ArticleIntroEffects_08

We really hope you enjoyed these effects and get inspired!

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 131

Comments are closed.
  1. Hi there! I really love these effects! Can anybody explain me how to make the button reveal toggle between the two displays. So no scrolling involved. Just a button to get the image to sweep to the side and go back full width.

    I am looking for the one named ‘side’, number 4!

  2. How would you recommend a fallback for iPhone and iPads? It doesn’t reach to touch events and having to click the button to scroll would seriously harm conversion rates. Great job on it though, I love it. Have a nice day!

  3. Hello, Can I include a header menu on top then make it scroll to bottom?, say for example I have a top menu #div1 #div2 #div. When I click them on top I can scroll to div1, div2 and div3 below?, As I seem to have some problem with doing that. Thanks and nice effects by the way.

  4. I have some problem with IE on the first demo. Do any of you have any idea about it? Thanks.

    Superb effects by the way.

  5. Amazing effects, rare to see! I will try to implement them on a WP website. Thank you!

  6. Hi,
    Firstly its pretty awesome and thanks for sharing.
    I would like to request one thing while i am trying to add push animation. First scroll down to bottom section and its ok. Immediately when i tried to goes top it won’t scroll in this case we need to little bit scroll down and can goes easily to top section.

    I have make screenshot hope you will understand
    in this case we can’t scroll to top http://prntscr.com/9uxsn5 but when we scroll little bit down and trying to scroll top its goes like this http://prntscr.com/9uxszo

  7. Great work!
    But there is a one problem: when you go to mobile version the header pic doesnt go centered – basically you see left side of the picture. So its need something like
    {background-position:center} but its not a background, its a div with image. So i really dont know how to fix it.
    Maybe someone has an idea for that?
    Regards, Sabak

  8. Hi
    great job & thank yo
    u for sharing !

    Anyone knows how to enable scroll effect on smartphone ? on iphone 5/6 the scroll function doesn’t work. The effect works only on click…
    Thank you for u’re help

    regards Michael,