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.

By Manoela Ilic in Playground on
Demo Download






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.

Twisted Colorful Spheres with Three.js

How to Animate SVG Shapes on Scroll

Image Stack Entrance Animations

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

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 131

Comments are closed.

  1. the demo page bottom

    If you enjoyed these effects you might also like:
    Title
    Title
    Title

    …

  9. Its Awesome..
    Just one question/problem the effect is triggered only after either clicking the button or the scroll bar and didn’t work with the down-key button or the spacebar button which is commonly used by most of the user to scroll down so can you please tell me how to enable it ?

  10. First, let me say that all these animations and effects are fantastic – this is another really well-conceived approach that takes an established design and makes it way more attractive.

    However, I’d much rather see giant header images for pages disappear altogether. I find them disruptive, distracting, and inconvenient.

    I really don’t like it when I load a page looking for its primary content (in this case, an article), and it’s not actually on the part of the page that’s visible on load. These images are fine and good, and putting pretty stuff on the page can enhance the article, but there’s still a fundamental problem, in my eyes, with “I just loaded the page for an article and I can’t see the article“.

    Facebook and Google+ have the same problem with Cover Photos on profile pages. If I’m loading someone’s profile page, odds are pretty good that I want to see their profile and not one picture. I still want to see that picture, to be sure, but if I can’t see any of their information when I load the page that’s intended to show me their information, I’d file that as a bug.

    I’m curious what others think – is there a solution to this? How do we embrace our ability to do more cool things with animations and images without actually getting in the way of the content that a page is actually for?

    • I have noticed what you said too. That’s the thing wich makes this beatiful creation not very useful under productive perspective. The solution should not be so difficult. Anyone want to explain ?

  11. Hi i really want to know how the second demo was created please release a tutorial for it.

  12. You did it once again …

    Really inspiring. Thanks a lot for your efforts & time.

  17. It will be perfect for custom landing pages in WordPress. Thank you for share!

  18. Raise your hand if you have asked Mary Lou to marry you. *doesn’t raise hand because he is a gentleman*

    Great tutorial! I am inspired. 🙂

  21. I don’t usually comment on these, but this one is pretty awesome. Great work! Anything that gets me to reconsider how I approach a problem is a good thing indeed.

  22. The effect on these examples I think gives a modern feeling, though it lags on my MP 13″ Retina… So that decrease the feeling.. Maybe the images could be less size or something. I like the effect but It feels like it’s everywhere now these days.

  24. Mary Lou,

    I have never seen such beautiful articles, thank you for sharing! Great inspiration 🙂

  25. Omg Mary Lou !! I just love all your work. Thanks again for sharing ! It’s just awesome like always =)

  26. Fantastic. Does not work in IE11 though… “fixed side” is buggy – for example.

  28. It’s preety awesome!!! I’ve been always wondering how make the effect “like this” !!! thank you so much!!!

  30. BEAUTIFULL EFFECTS – intuitive & smooth – Thank you ML for sharing !

  35. Mary Lou, I scoured the ENTIRE internet (yes, all 200+ billion sites!) for assorted code, tutorials, examples and plain-old top-shelf web designs, and I have to say virtually EVERYTHING you post is freakin’ AWESOME!

    This is no exception!

    Oh yeah, definitely gonna figure out how these intro effects work and use them!

    Thanks to you!

    You really do stand head and shoulders above most designers.

    Bye now! Keep up the amazing work!

  38. Hi Mary, I’m a big fan of yours. I tried to implement this, but i’m trying to figure out how to make the images responsive with other devices.

  39. Very fresh approach.. Would really like to see something like that in production (including a lot better compatibility of course).

    If I am swiping on my touchpad in Safari quite fast up and down every example is lagging quite hard. In Chrome everything works fine.

  42. Beauty 🙂 It really is inspirational.
    But most of those examples can’t be printed as-is. Try to print it to PDF and you’ll see lots of blank pages.
    “Printing is passé” – you may say. But it’s not, and won’t be for many years. It needs to be taken into account

  45. Amazing article as always. Definitely have to go with this one now.

    Thanks yet again!

  47. Awesome!! How would we go about incorporating this into WordPress posts? Would we need to mess with php? Or can we use an iframe in a post and use the tutorial above to get the effect??

    • That’s what I’m doing right now! You’re going to need good experience with HTML/CSS/JS and some knowledge of WordPress PHP templating.

      You will have to go into your single.php file and add the correct HTML ids and classes, the CSS will go in your stylesheet and lastly you’ll have to include both the classie.js file and the Javascript used in the demos. If none of this makes sense, I’d recommend diving into some easier WordPress templating tutorials that are free online.

    • @mike, I’m trying to do the same thing but I guess the default css of wordpress is conflicting with the css for this effects. How did you manage to go about this. I’m trying to incorporate effect #2 on a wordpress site.

  48. These are some really nice effect. In particular love the sliced effect… might have to try a few of these out on upcoming projects.

  49. Simply brilliant. This is such a great playground for stuff that currently works in modern browsers and wets our appetite for greater things things to come. I, for one, think that Mary’s posts are some of the best I come across, bar none. Thanks Mary!

  50. Love this article openers! I was curious to know if anyone has had any experience implementing these into WordPress and what that process was like. I was planning on doing that and was hoping to gain a better understanding of what that process might involve before I get into it. Thanks!