WebAppers

/ best free open source web resources /

Shopify

How to Create a Beautiful Background Image Navigation

Posted · Category: License Free, Menu

Codrops has shown us how to create a Beautiful Background Image Navigation with jQuery. The main idea is to have three list items that contain the same background image but with a different position.

The background image for each item will be animated to slide into place in different times, creating a really nice effect. The background image sliding direction from the list item in the middle will depend on which item the user was before: coming from the right, it will slide from the left and vice versa.

On top of that we will have sub-menus that appear with their semi-transparent background sliding in. These backgrounds create an awesome effect of actually just being one element that slides into place, changing its color.

background-image-slider

Requirements: jQuery Framework
Demo: http://tympanus.net/Tutorials/BeautifulBackgroundImageNavigation/
License: License Free

2 Comments
  • http://blog.regnareb.com Regnareb

    Great, but need some adjustments for working without Js.

    It seems webappers.com dont work well too without js.

  • http://irongaze.com Rob Morris

    Nice inspiration piece. I’m not usually one for gratuitous eye candy, but that’s pretty sweet. Nice find!

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons