Web Design Inspiration – One-Page Parallax Scrolling
This weeks web design inspiration shows 15 websites and 5 creative WordPress themes with cool parallax scrolling effects. Parallax scrolling is a big web design trend in the last 2 years. Different content-blocks or pictures move at a different speed while scrolling. You can build up pretty cool effects if you use it clever.
Parallax scrolling is a technology based on jQuery, but the library is today in every WordPress theme, website template or even in Tumblr themes. I created 3 categories for you guys so you can jump to your point of interest.
- 15 One-Page creative websites with parallax scrolling
- 5x One-Page WordPress themes with parallax scrolling
- Tutorials for parallax scrolling effects
15 Single-Page Websites with Parallax Scrolling
The focus is on so-called one-page websites. The pages consist only a single page with the complete content. This websites are made for campaigns for single products or other kinds of storytelling. The navigation scrolls you to the correct spot on the page.
Stunning Website with many Layers
Yookoso is a beautiful parallax scrolling one-page website where you can apply for a visa for Japan. The website has some really heavy parallax effects with many different layers. I also like the menu on the left side.
Minimal and Clean Web Design
This design agency BTP uses a minimal and clean web design with parallax scrolling for their content. They show of their references with high quality pictures and only little text.
e-Commerce Website with Parallax Scrolling
BigCartel is an online shop for shirts and design stuff. The eCommerce shop has only one page with clean design and really cool parallax scrolling effects. One-page websites can be also very effective for online shops, if you know how to do it.
Case Study One-Page Website
Iconfinder made a whole campaign-website for the redesign of their logo. I like the idea behind the concept as well as the story-telling.
Flat Web Design and One-Page Website
Whole World Water is a campaign informs about the water problem in the world. A great website with a minimal and flat web design. I really like the small social icons and the bold typography.
Bold Colors for a Creative Internet Agency Website
Flow Media is a czech creative internet agency. They use handwritten fonts and really bold colors to create a creative impression. They show a ton of references on their one-page website. However the colors are big disturbing if you look at the references.
Digital Showcase with Parallax Effects
The creative designer James Hayter created his website as a digital showcase. He uses a minimal and flat web design with reduced navigation elements.
Unique Web Design and Award Winning Website
WNDRMNT is a creative web design agency with a really cool one-page website. Outstanding and unique web design has brought them several awards.
Heavy Animated & Creative One-Page Web Design
Fatmedia is a british digital agency. They also use a one-page website with a ton of CSS3 and jQuery effects such as animated counters and appearing content blocks. I also really like the video header.
Create One-Page Web Design with Horizontal Scrolling
Holler is another creative british agency. They have a unique web design with several layers of content. Sometimes you scroll vertical and other times horizontal.
Flat Web Design with Retro Colors
Norwegian agency Uniform shows their 15 years of history in a creative one-page website full of CSS3 effects. I love the flat web design together with the retro colors.
Award Winning Parallax Scrolling Web Design
Browser Awareness Day is a unique website with some cool parallax scrolling effects.
One-Page Campaign Website with Flat Design
Designed to Move is a campaign website about more physical activity. The website shows in with many CSS3 animated statistics why you should move your ass and get going.
Colorful One-Page Web Design with Parallax Effects
This special campaign website is for the new shoe of Saucony. They use parallax scrolling effects to show the shoe is build up with a detailed explanation of every feature.
Bold Colors and Parallax Effects
Träfika is a mexican creative agency. They created an outstanding one-page website with impressive parallax effects and won already several awards with the bold web design.
5x One-Page WordPress themes with Parallax Scrolling
WordPress is the most versatile and flexible CMS on the market and totally free. You can use it for every kind of website and there are thousands different WordPress themes out there. I collected 5 really good one-page WordPress themes with cool parallax scrolling effects.
Responsive One-Page Parallax WordPress Theme
Eleven is a creative one-page WordPress template with a flat and clean web design. The theme is perfect for creative agencies, freelancers or small businesses. The theme comes with a full-screen video slider, layer slider and is easy to customize.
Modern One-Page Metro WordPress Theme
Argo is a modern and stylish WordPress theme with a one-page web design. You can create several different parallax sections and also get a really creative design.
One-Page Portfolio WordPress Theme
HalfCreative is a one-page portfolio WordPress theme with a minimal and clean web design. For creative business the most important page is the portfolio. You show of your references and the portfolio acts as a online-resume.
Responsive One-Page Parallax WordPress Theme
907 is a multi-purpose responsive WordPress theme. The template has many different design options as well as a one-page parallax web design. 907 has been sold over 5.000 times in 2013 and is probably the most popular one-page WordPress theme.
Responsive Single-Page Portfolio WP Theme
SCRN is a creative and responsive one-page WordPress theme with parallax scrolling effects. The theme is focused on the portfolio and offers many options for customization.
Tutorials and links
Whoever wants to know more on the subject of one-page, single-page and parallax scrolling should check out this links. The tutorials show some useful tips to start with your own parallax scrolling website and to get some background information.