The process of creating a dynamic website takes hard work along with a deeper understanding of design principles. Animation in web design can enhance almost any page element, and the popularity of jQuery allows anyone to build these effects for free. Most of these techniques can be learned from practice and studying what other websites are doing.
I'd like to share a few examples of great animation in web design. Specifically I am focusing on animations which tend to enhance the user experience. Too many flashy elements or sliding panels can get annoying. Over time you'll find a good limit between too many and too few animations on any given webpage.
Auto-Hiding Nav Bar
My favorite effects are the ones that slowly permeate to eventually become popular trends. If you don't know about Medium it's a blogging platform with a very simplistic design. Recently they updated the site to feature a fixed top scrolling navigation bar. It automatically hides once you scroll down, then re-displays itself when scrolling up.
Take a look at this post on Medium which both demonstrates the effect and shows you how to build it yourself. As you scroll down the top navbar will hide itself automatically. But if you scroll up even a notch on your mouse wheel(you have that, right?) the navbar animates back into view.
This is a classic example of animation design melding nicely with user experience design. Keeping that navbar out of the way allows for more screen space to read each post. Another alternative is to only display the menu when a visitor hovers their mouse towards the top of the screen. Problem is that this doesn't really work on mobile devices, so I find Medium's solution to be an exceptional breath of fresh air.
I also recommend these similar tutorials if you're looking for teaching tools
- Auto-Hiding Navigation w/ CSS & jQuery
- How to hide/show nav bar when user scrolls up/down
- Auto-Hiding Navbar using Bootstrap
One of the simplest effects you could try would be fading page elements. Sometimes this can happen as the user scrolls, other times you can fade in right after pageload. This gives a more elegant presentation which isn't typically expected in static websites.
One such example Humaan uses a series of fading effects on each block of the page. You'll notice other effects as you move about the page and hover different elements. But the initial fade animation gives off an undertone that the website is more dynamic and more fluid than regular layouts. It's much more about feeling than seeing.
Dynamic Sliding Content
Content sliders are usually built with jQuery to show a fixed set of items along with some contained hidden ones. As a visitor scrolls through the items newer ones will come into view while hiding the older ones.
Carousel is another word for merry-go-round where the little plastic horsies go around and around in a circle of vapid entertainment. Some content sliders behave in a similar fashion where rotating items will reappear after going in a full circle. Some animation transitions will usually benefit any type content slider or carousel.
Apple is notorious for their visuals and many of their pages do have content sliders. I really like their plastic-y bounce effect found on some of their product pages. This isn't necessary but it does add that classic Apple flair. If you're thinking of building a carousel do some research in Google to find any jQuery plugins which also support transition effects. Most are open source and easy to use without a whole lot of code.
I dont always like the effect of sliding animated pages because it isn't often done correctly. This idea may be compared to the older days of Flash-based websites that wouldn't have any individual page URLs. Nowadays jQuery allows developers to create a similar experience while enhancing SEO with separate pages and titles.
There are plenty of great examples online, my favorite being the World Baking Day 2014 website. The homepage uses some neat animation effects when sliding through individual content boxes. When you click between nav items you'll also notice the page will slide in while simultaneously updating the hyperlink.
This is a prime example of how you should implement page animations. They should be smooth, natural, and quick so the user isn't waiting around for 10 seconds on a single page. Their internal pages use a lot of vector animations which are cute and quite dazzling. I can't recommend using so many animations on every site, but when it works you'll certainly capture attention from visitors.
Fancy Dropdown Effects
Not every dropdown effect will benefit the user experience. In fact many dropdown menus are made solely for visitors with a mouse, whereas mobile users tend to get a more responsive-suited navigation. But if you're building a dropdown menu for a beautiful site then why not include some nice effects along with it?
Mayflower Brewing Co. is a fantastic example which doesn't use too many other animations. The layout is stunning and the content is very easy to access. Try hovering over some of the top navigation links and see how the sliding dropdown effect works. Text is readable, fitted nicely, and easy to distinguish between hover states.
Another popular example can be found on The Verge magazine. Their website uses a larger mega-navigation dropdown which transitions smoothly between top-tier links. When hovering for a brief second a larger dropdown box will slide into view. Moving onto a nearby link will create another transition effect where the content sweeps aside without closing the mega-menu box.
Both of these examples are fantastic and come from two outstanding websites. Dropdown menus are often difficult to support in all browsers. Considering older versions of Internet Explorer it's usually not possible to support everyone. Just try your best to build for compatibility first before adding lots of neat menu animations.
To learn a bit more take a look at these similar articles. In time you should learn how to build useful animation effects which provide a convenient user experience. It's easy to get carried away with ideas that seem nice in theory but don't work as well on a live website. Also just keep practicing and you'll eventually get a feel for the natural flow of animation in web design.
- Interface Animations and Transitions: Where to get inspiration
- Scroll-Activated Animations – New Trend in Web Design
- Animation Principles in UI Design: Understanding Easing
- The Role of Animation in Web Design
- Design Trend: Motion in Web Design