Design Focus

Design Focus: Animate by Scrolling

I’m a much bigger fan of this effect than straight-up parallax: using fixed backgrounds and illusions done by layering images to produce clever animations, all triggered by scrolling the page.

Designs of the Week

Get solid WordPress themes, plugins, and even design training from iThemes.

Playful 2013

Playful 2013

Combined with rotated text, this geometric background pattern animation induced by scrolling is quite hypnotizing. You can see that same shape theme carry over to the logo, the dividers, and the footer.

Andrew McCarthy

Andrew McCarthy

The use of fixed backgrounds and frame animation produces this awesome running halftone cat. The content was repeated several times so the visitor can enjoy scrolling a fair amount, though it would have been fun to have an automatic button that does the work for you like the “go backwards” one does.

UW Design 2012

UW Design 2012

Love how the title is deconstructed and then comes together as you move down. There’s even this moving patterned shadow in the subtitle as well. It breaks up again as move further and onto the portfolio. Another cool feature to check out: the group photos under the Cast section are actually dynamic, every single person in the shot is clickable, leading you to his/her individual work. The rest of the people fade out when you hover; the same thing happens if you do it on their names.

Nate Navasca

Nate Navasca

Not only is each section represented visually by the background, the animation produced by scrolling explains it further. All done in geometric, abstract illustrations.

Social Media Weekly

Create unique, extraordinary websites with Squarespace. No experience necessary!

Design, OptimizationOne Less JPG

“Before you go worrying about how to minify every last library or shave tests out of Modernizr, try and see if you can remove just one photo from your design. It will make a bigger difference.”

DesignThe design process of my infographic about women cycling for Grinta!
“There is a certain order in place of the mayor steps you take during this process, but there is a big part that isn’t very logical, even chaotic.”

Responsive Web DesignPixel-free CSS
“I think the Web should fully move in this direction. True proportionate sizing seems to me a more authentic way to responsively fit websites to browsers (rather than media queries that simply toggle between set pixel widths).”

  1. By Adam posted on April 29, 2013 at 11:48 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Would these be detrimental to a sites SEO? It always somewhat puts me off when that is the case as beautiful as the designs may me.

    Am i being overly worried?

  2. By Sophia Lucero posted on May 2, 2013 at 6:20 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Adam, one must not be a slave to pure SEO or pure aesthetics. It always depends on the goals you want to achieve. These sites did not sacrifice content for clever interactions imo, but even if they supposedly did, they wanted to demonstrate their skills and create a connection with actual human visitors by doing so. For them that’s a more important way of gaining an audience, and I cannot fault them for that point of view.

    Also, this series is about featuring techniques and ideas in Design, hence the title Design Focus.

  3. By Surrey Web Design posted on May 22, 2013 at 1:27 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Excellent post . I love the utilization of animated images in my designs. Animated Images can be great so long as they aren’t flashing an ad. I always create the design so that the first image works irrespective of the animation in case the scroll is blocked.

  4. Trackback