Back around its online debut in 2011, the parallax scrolling effect made waves as a new and exciting web design trend. Many Internet fads have come and gone in the years since, but parallax scrolling seems to have established itself as a fundamental design asset that’s definitely here to stay.
When creating a website, parallax scrolling can be a great way to add depth and movement to the browsing experience. Below you’ll discover a deeper look into what parallax scrolling is, complete with ten inspiring examples of websites to learn from and a few templates to get you started:
What is parallax scrolling?
Parallax scrolling is a web design technique, in which the background moves at a slower pace than that of the foreground. This results in a 3D effect as visitors scroll down the site, adding a sense of depth and creating a more immersive experience.
Parallax is based on an optical illusion, caused by the fact that the human eye perceives objects that are close to us as larger than things that are farther away. As a result, we perceive distant objects as if they were moving more slowly than those that are up close.
This perception of the background’s motion as slower than that of the foreground has been long adopted into parallax across different mediums, fostering a realistic effect. Its first use was in traditional animation, dating back to as early as Disney’s Snow White and the Seven Dwarfs, and in video games such as Super Mario. With advancements in CSS and HTML, parallax effects have later evolved into the world of web design as we know it today.
Here are ten outstanding parallax scrolling examples built with Wix, handpicked for your web design inspiration:
Parallax scrolling examples
01. Mild Design
Emilie De Grosbois is a Montreal-based visual artist and the founder of Mild Design. Her portfolio strikes visitors with an impressive welcome: a series of intricate full screen images, displayed in a long scroll. By use of parallax, the transition from one image to the next becomes not only smoother, but it also adds a sense of depth, as if the images gently glide on top of each other.
02. OFFF Tel Aviv
The 2019 OFFF festival website takes visitors along for an exhilarating ride, with its baby pink background, huge text and dynamic feel. The page is also filled with motion, through a combination of animations and parallax. As we scroll down the page, we reveal video loops of the conference, its speakers and activities, as well as many blinking eyes to get us in the mood.
03. Chris Covert
Aerospace engineer Chris Covert’s bold resume website is just as professional as it is innovative. The site’s design and interactivity manage to inject much of Chris’ personality into what could have otherwise been a dry list of skills, experience, and education. Using the Reveal Scroll Effect, Chris places shots of a CV page or a business card in the middle of the screen, and allows the background to swiftly change behind them as they stay put, achieving a surprising result.
04. Ivy Chen
Designer and illustrator Ivy Chen’s use of parallax makes for a unique portfolio website in which her works gradually reveal themselves, as if by scrolling magic. Ivy leads us on a journey through her multidisciplinary work: a fashion illustration slowly transforms into a real life garment, and then turns into a total look in a fashion shoot. It’s a mesmerizing effect that both amplifies and explains the page’s content.
Jewelry designer Hila Rawet Karni’s website uses parallax to create an interesting, multi-layered scroll. By placing images and text on top of one another, and making them move at different speeds, the page seems to be constantly changing and forming new compositions as we scroll. Notice, for example, how the middle photo of a woman in a black dress stays in place as other elements drift alongside it, until the woman, too, eventually rolls out of the screen to make room for other sections.
Beyond being utterly adorable, Inky Blue Animal Rescue’s website takes pride in a cohesive color scheme of blues and neutrals (which naturally stems from the organization’s name), and a great use of motion. In the top fold of the website, big capital letters of the business name run across the screen. Below is a parallax effect that reveals two furry little friends as we scroll. All the way down, at the bottom of the homepage, the same type of animation from earlier on is repeated in the footer once more, making the website come full circle.
07. Karlie Kloss
This elegant and clean website is the perfect modeling portfolio for supermodel Karlie Kloss. The design style aims for simplicity in its color choices of white, gray and black, and in the generous amount of white space. At the same time, this classy look is combined with small touches that keep the website far from ordinary: the subtle use of pink, the heavy black font, and the sense of motion inserted by parallax and a video loop.
08. Hana Knizova
London-based Hana Knizova’s photography website features a long scroll of parallax images. The photos on the homepage are an introduction to Hana’s varied projects and many specialities as a photographer, from editorial to portrait to maternity photoshoots. Simultaneously, the images also double as the website’s menu, creating a unique navigation system where each image leads to a different inner page.
This Brazilian hotel website is made up of several strips with parallax scrolling. Each strip offers a different call-to-action button and boasts an image or video of the hotel grounds and facilities. The text placed at the center of each strip moves at a slightly different pace than that of the background photo, achieving a smooth, easy-on-the-eye effect.
10. Frankie Ratford
The personal website of graphic designer and digital nomad Frankie Ratford is colorful, vibrant, and bubbly. The sunny colored top fold features several layers of parallax: Frankie herself remains static in a candid and relatable picture. At the back of this photo, her name slides upwards, followed by a bio section that glides on top of the same image. The rest of the website makes more subtle uses of parallax scrolling in its display of various informative details.
Enabling parallax scrolling on your Wix website
To enable parallax scrolling on your Wix website, use strips that have a color, image, or video background. Combining multiple strips together can enrichen the effect.
How to enable parallax scrolling on a strip:
1. In the Editor, click ‘Add’ on the left menu, then choose ‘Strip.’
2. Click ‘Change Strip Background.’ Here you can change the background to a color, image or video of your choice.
3. Click ‘Settings’ on the Strip Background, and under ‘Scroll Effects’ choose the desired effect (Parallax, Reveal, Zoom-In or Fade-In).
4. Check out the effect in action in Preview mode, and revise if needed.
Templates with parallax scrolling:
A different option is to start off with a template that’s designed with built-in parallax scrolling, then customize it to your needs. We’ve selected three of these templates to get you started (you can always browse for more on our website templates page):
Bread Shop: This mouthwatering template is made up of several full-screen strips with parallax scrolling. A cinemagraph on the third strip adds an extra sense of motion.
Let’s Play: This multi-layered parallax template creates a sophisticated look with a color-changing gradient background and a static typographic layer. For additional information, check out this detailed template tutorial.
Fashion Styling: Here, several scroll effects are combined into a strip-based template with two-speed scrolling. Check out our in-depth tutorial to learn more.
Now create your website in the intelligent Click here to see our other services click here!
Find us at FACEBOOK and INSTAGRAM
Make your sign up now on our blog so you do not miss anything!
* Source https://www.wix.com/blog/