fixed background

Design Focus: Animate by Scrolling

April 27, 2013 By Sophia Lucero

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.

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.

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.

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.

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, Optimization – One 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.”

Design – The 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 Design – Pixel-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).”

Design Focus: Uncover

September 14, 2012 By Sophia Lucero

Our featured designs this week have a nice little effect where you uncover content that seems to be under another.

Designs of the Week

Search Optimized, Turn-Key Designs, Unlimited Everything. Start building with the Genesis Framework today.

Summer School for Freelancers : The Institute of Awesome website — Summer School for Freelancers : The Institute of Awesome

I like the brightly colored twist on the traditional coat of arms and other elements like the arrows.

Another growing trend: combining vertical scrolling with horizontal scrolling or sliders to maximize the amount of information you can consume in a screenful. The changing fixed backgrounds is also a simple but eye-catching effect especially if you switch between light and dark colors.

Suit Up or Die Magazine #1 website — Suit Up or Die Magazine #1

This one does the vertical then horizontal browsing thing too, but it instead of for slider items it’s for each article in the magazine. I also like how each section layered under the previous one don’t have the same heights, they all stretch according to the requirements of the content.

Social Media Weekly

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

Typography – Web Fonts Performance: Making Pretty, Fast
“To discuss this, and more, we sat down with David Kuettel from the Google Web Fonts team, for an in-depth look at web fonts.”

User Experience – 5 Things to Consider Whilst Sketching
“Sketching isn’t about nuance. It’s about emotion, direction, and ideas. Broad gestures.”

Responsive Web Design – Responsive Patterns
“A collection of patterns and modules for responsive designs.”

Friday Focus 11/11/11: Happening Today

November 11, 2011 By Sophia Lucero

We’re curating a short list of sites celebrating this lovely date. Happy 11-11-11 Friday Focus!

Designs of the Week

It’s interesting how the most important information on this page form this triangle: the hashtag, the ticket price, and the date/venue. What’s really great in this design is how the illustrated portraits have transparent areas so the pixelated background shows through as you scroll. The logo, of course, is also brilliant.

Abita Beer Presents Boudin & Beer website — Abita Beer Presents Boudin & Beer

Beautiful typography and layout per section on this one-page site, although it sometimes gets to the point where the centered logo (which rotates when you hover on it) seems a little too large for the page. The fixed background effect is no parallax, but it’s quite attractive just the same.

One Day on Earth website — One Day on Earth

I wish we could see more of the textures in the graphic elements elsewhere on the page. Using that particular shade of green as hyperlinks should only be done in moderation, and not everywhere.

Very clean and seemingly website that just puts everywhere in the right place. What will grab your attention are the “video avatars” of the conference speakers, which play on repeat. I’m a little surprised these weren’t displayed in the Workshops page.

Social Media Weekly

CSS – Centering in the Unknown
“When it comes to centering things in web design, the more information you have about the element being centered and its parent element, the easier it is. So what if you don’t know anything? It’s still kinda doable.”

Accessibility – A common accessibility platform
“There needs to be more of a balance in favor of resources directed towards accessibility, and it is up to us in the community of web professionals to champion web accessibility to browser vendors.”

Friday Focus 06/03/11: North East South West

June 3, 2011 By Sophia Lucero

Here’s an interesting technique to try out in this week’s Friday Focus: designs that have four main navigational items arranged at right angles to each other, much like the four main directions on a compass.

Designs of the Week

I like how each section content is perfectly contained in the boxes. It makes me wish the whole site fit into the height of the browser window so I can see the wide view of the whole site.

There’s a running pixelated theme in the design, as well as blocks of black for the headers. There’s also an interesting peekaboo effect with fixed backgrounds that’s also growing popular these days. I like the idea of placing the navigation at the four corners of the site, but it makes moving back and forth between each screenful of content a hassle—better if there were keyboard navigation too. And for the millionth time, I wish we had a way for Twitter tweet and Facebook like buttons to blend in better with the design.

I never really enjoy the look of Courier or any other fixed-width font on a site, but I do like the hand-drawn touches here, and splashes of red there.

What’s a little surprising with these sites is that they don’t really use the 4 cardinal directions to their advantage and, say, animate the page to scroll to that particular direction. Instead they all still scroll vertically. Here’s another graphing paper pattern meets hand-drawn graphic elements design, with the wildly popular yellow and black combo.

Social Media Weekly

Design – Design Professionalism
“The designer’s guide to taking back your profession.”

Programming – Lost Type
“The Lost Type Co-Op is a Pay-What-You-Want Type foundry, the first of its kind.”

Optimization – zbugs
“Merge, Minify, and GZip Compress JS & CSS”

Accessibility – HTML5 and Accessibility
“HTML5 is not the accessibility disaster that some would have you believe. It tries to build accessibility in by design rather than bolt it on afterwards, and this is A Good Thing; if something is left to authors to add, they won’t. Just look at how many images have no alternate text, or useless alternate text.”

JavaScript – Byte-saving Techniques
“This is a collection of JavaScript wizardry that can shave bytes off of your code. It’s mainly intended as a reference for those creating entries for 140byt.es.”

User Interface Design – The Gap Theory of UI Design

Friday Focus 10/09/09: 10-in-1

October 9, 2009 By Sophia Lucero

I’m doing something different this week on Friday Focus. I found one site with ten different styles on the same content (plus one homepage). Each one tries to match the visitor’s mood for the day. It’s also a good way to showcase one’s design repertoire. The designer also employs many interesting techniques into each style, so be sure to check all of them out!

(Disclaimer: This site uses tables for its layout, which I do not condone. I just thought it’d be a waste to not feature this idea.)

Designs of the Week

This is where the fun begins. I like the grungy photo frame effect.

A circus of textures, and vintage text and illustrations. I’m loving the mood in here, except for one thing: Courier New!

Big, bold, and black and white.

I would’ve liked the contact form to be a bit more “childish” too.

I like the multiple background effect going on here—one’s fixed, the other scrolls with the content.

Odd idea for the Work section to be just boxes of numbers, but that’s minimalism for you. Could have made thumbnails appear on hover, though!

I think this is the most fun and well-designed of all. Another barrage of textures and bright colors.

Absolutely unusable! But a good idea!

And of course, how not to design a website. Wink.

Love the multiple-background scrolling effect again, and how the boxes slide into the top image.

Big, chunky fonts and cool hues, with a touch of texture.

Social Media Weekly

Usability – 15 Helpful Website Usability Facts & Guidelines
“Web site usability is the quality of a user’s interaction with a web site or, in other words, how usable a web site is to the user. Ultimately, users want to be able to easily access a web site and determine how to use it within seconds.”

Design – Interactivity in Web Design: A Beginner’s Guide
“Interactivity is a giant leap from the traditional form of web user interfaces seen earlier. Adding interactivity to a web site attracts user attention and tends to brings them to the website again. They add a good amount of visual interest and attract users to visit your site again and again. The main idea of a website is to convey a message effectively.”

Webmastering – 101 Five-Minute Fixes to Incrementally Improve Your Web Site
“A webmaster’s work is never done. What may have worked a few years ago when could be outdated today, so it’s important to constantly improve your Web site. However, a massive overhaul is just too much work to undertake at one time. Instead, tackle these quick fixes over time, and you’ll be able to improve your Web site with minimal pain.”

Design Focus: Animate by Scrolling

Designs of the Week

Social Media Weekly

Design Focus: Uncover

Designs of the Week

Social Media Weekly

Friday Focus 11/11/11: Happening Today

Designs of the Week

Social Media Weekly

Friday Focus 06/03/11: North East South West

Designs of the Week

Social Media Weekly

Friday Focus 10/09/09: 10-in-1

Designs of the Week

Social Media Weekly

About Devlounge

The Best of Devlounge

Top 7 PHP Frameworks

Search