Parallax motion on scroll | Webflow University (2023)

This video shows an old user interface. Updated version coming soon!

The parallax effect creates an illusion of depth and perspective. You can achieve this by moving images at different speeds. Creating animations with the parallax effect can serve many purposes, allowing visitors to interact with your website content in a variety of ways, such as: B. to show how something works or to emphasize the anatomy of a product . Or you can create a visual effect that keeps your website visitors browsing longer. Webflow's new Interactions 2.0 makes it easy to add animations like this to your website without writing a single line of code.

In this lesson:

  1. Create the initial configuration
  2. define animation
  3. Define the hover animation
  4. animation preview
  5. Add more animations
  6. Disable animation for devices
Pro Tip: Illusion of Depth
Simulate believable 3D space by following the principles of depth perception. This includes the size and position of the elements and the different shadow distances. Even blur effects can be used to simulate depth of field.

Create the initial configuration

Step 1. Add a section

First, let's create a section that can be scrolled in and out of view. drag aSectionelement to the canvas from thePanel elements.found on the left. Place it under the fold and also over the other sections.

Step 2. Set the section

While selecting the section in whichstyle paneOn the right side, add a bit of top and bottomupholstery. Also put theoverflowAhiddento keep the content within the bounds of the section.

Parallax motion on scroll | Webflow University (1)

(Video) Parallax Movement on Scroll - Webflow interactions and animations tutorial

Step 3. Add a container

drag aContainerelement of thePanel elements.and put it in the section. ConfigureHeightup to 1200px and itsposition vis-à-vis relatives.This allows you to position images absolutely within the container.

Parallax motion on scroll | Webflow University (2)

Step 4. Bring images

Drag an image from theassets panelin the section. Set an appropriate width and repeat the process for all the images. Since you want to create an illusion of 3D space, be sure to take this into account when setting the image dimensions.

Good to know
You can set the width of an image toModal Image Settings. To open it, double-click the image or click the gear icon next to the image label. Picture settings are also in theElements configuration panel.to the right of the designer. You can access it by selecting the image and pressing D on the keyboard for it.

Parallax motion on scroll | Webflow University (3)

If you set the image size in the image settings, the values ​​will be applied to that image at all device breakpoints. To set different dimensions for an image on different devices, set theBroadfor himstyle pane.

Parallax motion on scroll | Webflow University (4)

Step 5. Design the images

add adrop shadowto each image. Make sure all the images have the same shadow.Store. change thatColorYopacityShadow Set the distance from the edges of the image. add someblurand also set the size or extent of the shadow relative to the edges of the image.

Step 6. Place the images

The next task isPositionevery picture tooabsolute. Then position each image by changing one of the position values ​​via the user interface or by manually typing them into each input. Specify az-indexfor photos Set a higher z-index for images you want to appear closer, and also overlay any images that appear in the background.

Parallax motion on scroll | Webflow University (5)

define animation

Understanding the animation will help you identify them.trigger and actionyou need to define to achieve the desired goal.

(Video) Webflow Parallax Scrolling Tutorial

In this animation, you want to animate the frames as the section (an element) moves across the viewport. So heDeductionit's aelement triggerVonwhen scrolling in view. And theactionIt will be aon hover animation.

Step 7. Set the trigger

Now that you've identified the elements of your interaction, you can start creating it. Select the section that contains the images you created. open thatinteraction areaand create oneelement triggerVonwhen scrolling in view.

Parallax motion on scroll | Webflow University (6)

Step 8. Configure the trigger

DecidePlay hover animation.Change the limits of the animation if you wish. This allows you to specify when the animation starts and ends. By default, the animation starts when the section enters the viewport and ends when it leaves the viewport. Keep the default for this tutorial.

Parallax motion on scroll | Webflow University (7)

Define the hover animation

Defining your goal can help you identify the actions you need to take. The goal at this point is to move the images at different speeds. The front ones should move faster than the rear ones as you move through the section. So you create onescroll actionVonrelocationfor each image. Then set thePositioneach image in theAxis yat the beginning and end of the animation.

Step 9. Create the hover animation

Before creating the animation, let's talk about anti-aliasing.smoothed, or damping, smooths and smooths the approach speed toward the correct position on the animation timeline. You can adjust the smoothing value inhover animations. For this tutorial you can leave it at 50%.

Now create a new onescroll actionand then rename it "Parallax Scroll Effect".

Parallax motion on scroll | Webflow University (8)

(Video) How to animate an element while scrolling — After Effects & Lottie in Webflow

Step 10. Perform a move action

Choose the image with the highest z-index that seems closest to your point of view. add ascroll actionVonrelocationto change how the image moves during the animation.

Parallax motion on scroll | Webflow University (9)

Two keyframes, or instances, of the image are added to the animation timeline. One is set to 0% - the start of the animation; and one at 100% - the end of the animation.

Parallax motion on scroll | Webflow University (10)

Step 11. Establish a starting position

Select the first keyframe at 0%. In itMove transformation settings, move the image down adjusting its position toAxis yup to 1000px. This is the position of the image when the section is first scrolled into view.

Parallax motion on scroll | Webflow University (11)

Step 12. Establish a final position

Select the second keyframe on the animation timeline and move the image up by setting its position toAxis yup to -1000px. This is the position of the image when the section is scrolled out of view.

Parallax motion on scroll | Webflow University (12)

Step 13. Set a second action

Select the image that has the lowest z-index and appears to be positioned too far back in the section. Add a scroll from actionrelocation. Two new keyframes are added to the animation timeline for this new keyframe, one at 0% and the other at 100%.

(Video) Parallax image backgrounds, gradients, and video backgrounds

Define the starting position

For this new image, select the keyframe at 0%. In itMove transformation settings, move the image up by adjusting its position toAxis yup to -352px. This image will begin to move from this position as the section is scrolled into view.

Specify end position

Select the keyframe at 100% for the same image and set the position toAxis yup to 352px. This image moves down to this position as you scroll down the page. if you changed thoserelaxationSettings for the above actions, make sure to do the same settingsrelaxationon all actions.

Parallax motion on scroll | Webflow University (13)

Step 14. Create a third animation

Select another foreground image. Add a scroll from actionrelocation. Move the first keyframe down. Set a value of 300px. For the second keyframe, move the image up. Now set a value like -500px. This causes the image to move a distance of 800 pixels, which is slower than the closest image and faster than the farthest image.

animation preview

Animation preview inpreview modefrom the designer or live on screen changinglive previewIn. Now the parallax effect is more pronounced and has created what appears to be another layer of depth in this animation. Make adjustments in positions or loosening to obtain the desired result.

Parallax motion on scroll | Webflow University (14)

Add more animations

During this hover animation sequence, add more hover actions to each of the frames you want to animate. Be sure to follow this logical pattern to create a good parallax scrolling animation: Items in front (those with higher z-index) appear to move faster than items in the back (those with higher z-index). lower).

Disable animation for devices

You can disable this animation on mobile devices. Close the animation timeline by clickingXnext to "Parallax Scroll Effect". then i go downOther options,turn off the devicesthat you do not want this interaction to be triggered.

Parallax motion on scroll | Webflow University (15)

(Video) Creating a zoom effect with scroll interactions

Good to know - movement speed

When you set the position of the images on the y axis, you also set the speed of movement. This is because the first image is moved across the section from the 1000px Y position to the -1000px Y position, a distance of 2000px. The second image travels a shorter distance of 704 pixels as it moves from a y-position of -352 pixels to a y-position of 352 pixels. So it seems that there are three levels or levels of depth in this section:

  • the first level, in which the image appears closer and also moves faster
  • the second level, where almost all other images appear to move at a normal speed
  • the third level, where the image appears further back and moves much more slowly

FAQs

Is parallax still cool? ›

As a trend, it has been popular and unpopular in equal measures for some time. However, it's still one of the most valuable tools for animation in the digital world. Parallax creates an illusion of depth when scrolling, a timeless effect that still has lots of value in the web design world.

Is parallax scrolling outdated? ›

If you're asking "is it still a valid form of visual storytelling in the right context" then the answer is yes of course. Mesh gradients (especially moving ones) is today's parallax scrolling imho. Stop following fashions and do what you think looks right. if you think parallax is good for your site then use it.

Why parallax is removed? ›

Parallax is a condition arising when the image formed by the objective is not in the plane of the cross-hairs. Unless parallax in eliminated, accurate sighting is impossible. Parallax can be eliminated is two steps. i) By focusing the eye-piece for distinct vision of the cross – hairs.

Do you need two eyes for motion parallax? ›

Motion parallax is a monocular cue, a type of cue that can be perceived through the use of one eye. In contrast, a binocular cue requires the use of both eyes in order to be perceived. Motion parallax is a monocular cue, as it can be perceived through the use of one eye.

What is the problem with parallax scrolling? ›

Because parallax scrolling is heavy animation it can take pages longer to load and it will not function smoothly across all browsers. The website should be easy to use and easy to navigate, and this can be difficult if parallax scrolling is not used correctly.

What to replace mindless scrolling with? ›

What To Do Instead Of Aimlessly Scrolling On Your Phone
  • Be Playful. Playing a board game or working on a puzzle can help you wind down from the day. ...
  • Read Something. Gift yourself the precious opportunity of getting lost in the pages of a new book. ...
  • Start Journaling. ...
  • Use Your Voice. ...
  • Turn Up The Volume.

Is scrolling good UX? ›

With the average end user spending 69% of their media time on smartphones, attention to mobile UX features is a top priority. Scrolling is a vital part of this user experience, and it's one that's frequently underrated. Scrolling is how people will find your content.

Is there scroll animations in Adobe XD? ›

Scroll groups in Adobe XD lets you define areas within an artboard that scroll independently from the rest of the artboard to create horizontal or vertical scroll effects.

Can you do hover in Adobe XD? ›

Creating a hover in Adobe XD is simple with component states. In this tutorial, learn how to use Adobe XD component states to create a hover effect on elements like buttons with multiple states. Any component in Adobe XD can include reusable states for use across the design.

How do I make my website scroll parallax? ›

The key to creating the parallax container is to set the background-image property with an image of your choosing and then set the background-attachment property to fixed . The fixed value fixes the position of the background image relative to the viewport.

How is parallax scrolling done? ›

Parallax scrolling is a computer graphics technique used by web designers to create a faux-3D effect. As users scroll down a webpage, different layers of content or backgrounds move at different speeds, and this creates an optical illusion.

How do I enable parallax? ›

Enable or disable parallax scrolling
  1. Open the Site styles panel.
  2. Scroll down to the Main: overlay section.
  3. Check Enable parallax.
  4. You may also want to check Parallax smart crop to minimize cropping.
  5. Click Save.
Dec 17, 2022

What is parallax and why should it be avoided? ›

Parallax error is when the pointer of a device looks like it's at a different reading when read to the side compared to when read face-on. This is caused by the distance between the scale and the pointer. Because they're not on the same plane, readings may not appear accurate when viewed at an angle.

Is parallax an error or mistake? ›

Parallax error is the error that occurs due to incorrect positioning of the eyes while taking a reading on a measuring scale. If the viewing angle is not perpendicular to the scale at the point where we are taking the reading, we will get less or more value of the measurement than the actual value.

At what distance does parallax stop working? ›

Parallax Limitations

The best ground resolution is about 0.5", and even averaging over many measurements only reduces it to about 0.01". This corresponds to a distance of about 300 light years (a light year being the distance light travels in a year).

What depth cue is motion parallax? ›

Motion parallax is monocular depth cue that arises from the relative motion of objects at different distances that is created when an observer translates laterally.

Can you judge distance with one eye? ›

But studies have shown that adults who lose the sight in one eye have declines in their abilities to accurately track moving objects, to judge distances, and to perceive depth.

Does depth perception grow with age? ›

Depth perception can decrease with age, especially if bifocals or trifocals are needed in association with high refractive correction in glasses. First, the eyes must be examined to rule out ocular conditions that may affect depth perception such as glaucoma, cataracts, or refractive error.

What is the most practical rule to avoid the parallax? ›

  • Parallax error: The errors which result due to wrong positioning of the eye while taking a reading on a measuring scale are called parallax errors.
  • To avoid such errors, keep one eye shut and place it vertically above the point of measurement.

Does parallax affect accuracy? ›

At close distances, parallax does not effect accuracy. At 100 yards parallax maximum error of accuracy is 2/10-inch. But with these days' higher magnification scopes up to 18x and more, and the fact some of us shoot beyond 300 yards, parallax can indeed come into play if not corrected or properly set.

What two types of scrolling should be avoided? ›

There are a couple of basic scrolling problems we often see, and that you should be sensitive to. The first is horizontal scrolling, which is typically unnecessary. Unless the interaction is a carousel, a timeline, or an intentionally horizontally structured feature, you should not be seeing a horizontal scrollbar.

What is zombie scrolling? ›

Zombie Scrolling Syndrome is a term coined by the McAfee security company in 2016 to describe the effects of cell phone addiction. It's defined as “mindless scrolling out of habit, with no real destination or benefit.”

What is the psychology behind scrolling? ›

When we scroll through our feeds, switching between content so quickly, “the brain gets a hit of dopamine each time, creating a sort of neurological 'high,'” illustrating how the simple act of scrolling through TikTok gives just enough of a “rush” to our brains that we prolong our stay on the app (Rupp, 2022).

Why is UX so hard? ›

Good UX is hard because it involves two vastly different skills: A deep understanding of the machine. People in this group worry about code first, people second. They have deep technical knowledge and skill.

Is UX a stressful career? ›

UX/UI design is among the top 30% of careers in terms of happiness, but it can also be a source of stress due to lack of company awareness about UX, imposter syndrome, long hours and tight deadlines, challenging problem-solving and constant learning.

Is UX high paying? ›

What is an average UX designer salary? The average base salary for UX designers in the US is $95,572 per year as of February 2023, according to Glassdoor [1]. The role was also listed as sixth in Glassdoor's list of 25 Highest Paying Entry Level Jobs [2].

What is parallax scroll animations? ›

What is a parallax effect? Parallax effects involve a website's background moving at a different speed than the foreground content. This visual technique creates an illusion of depth which leads to a faux-3D effect upon scroll.

How do I enable scroll animation? ›

Triggering a CSS animation on scroll is a type of scroll-triggered animation.
...
Add the class when the element is scrolled into view
  1. Use the Intersection Observer API.
  2. Measure the element's offset when the user scrolls.
  3. Use a third-party JavaScript library that implements #1 or #2.
Mar 27, 2021

How do I make a simple fade effect scroll? ›

In the CSS, use the @keyframes rule paired with fadeIn. At 0%, set the opacity to 0. At 100%, set the opacity to 1. This creates the fade-in effect.

What is horizontal scrolling? ›

Horizontal scrolling is a one-page navigation method designers can use. In this method, users can use different functionalities on a page to scroll right or left, to see more information within the container or window. Users scroll horizontally by clicking on a scroll bar and dragging it with their mouse or finger.

How do you trigger a hover? ›

Trigger syntax is as follows <hover|hover(p)>:<effect> where:
  1. hover: - trigger effect on element :hover.
  2. hover(p|<selector>): - triggers the effect on child elements when parent element gets :hover.

How do you add a hover effect in style? ›

The :hover selector is used to select elements when you mouse over them.
  1. Tip: The :hover selector can be used on all elements, not only on links.
  2. Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.

How do you make a parallax scrolling effect in HTML and CSS? ›

Add CSS. Style the "parallax-effect" class. Set the image link with the help of the background-image property and specify the min-height. Specify whether the background image should be fixed or it will be scrolled along with the rest of the page with the background-attachment property.

What is immersive scrolling? ›

Immersive scrolling is all about the details

Focus on a single story: This type of site works best when you have a specific event or story you would like to showcase. Think about it like a storybook or interactive exhibit that tells a single story about the topic, event, or headline that you are trying to showcase.

How do I smooth down a website scroll? ›

How to Enable or Disable Smooth Scrolling in Chrome on PC and Mac
  1. Open the Chrome web browser.
  2. In the Flags tab, search for the Smooth Scrolling setting. ...
  3. Once you've located it, press the drop-down menu next to the feature and select Enabled or Disabled.
Sep 23, 2022

What is basic parallax method? ›

Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines. Astronomers use the principle of parallax to measure distances to the closer stars.

What is the parallax rule? ›

The parallax formula states that the distance to a star is equal to 1 divided by the parallax angle, p , where p is measured in arc-seconds, and d is parsecs.

What is parallax effect in CSS? ›

Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling.

Why does parallax not work on mobile? ›

When you use other browsers on any touch device, parallax scrolling will be overwritten for compatibility reasons. As a result, you will only see a static image instead of your parallax.

Is the parallax effect a good ball? ›

This is one of the easiest Storm balls I've thrown as a 2-hander. It was pretty easy to get downlane without having to be past the 4th arrow. It's a very visually clear transition and the more friction you push it to the more responsive it gets.

Is parallax scrolling good? ›

Parallax scrolling is particularly effective in scenarios involving powerful visual galleries or linear storytelling. For example, companies and individuals alike are using parallax scrolling to bring enhanced functionality and energy to portfolios, product presentations, and dynamic storyboards.

Do you need parallax for hunting? ›

If shooting out to only 300 yards, you do not really need to be concerned about parallax. However, if you commonly shoot beyond 300 yards, then your scope should truly have parallax adjustment to clear up your target focus. Most scope 12X and higher magnification have an external parallax adjustment knob.

Do Astronomers use parallax? ›

The Parallax Angle -- How Astronomers Use Angular Measurement to Compute Distances in Space. The parallax angle is the angle between the Earth at one time of year, and the Earth six months later, as measured from a nearby star. Astronomers use this angle to find the distance from the Earth to that star.

Does parallax change point of impact? ›

The effect of parallax is presented when your reticle appears out of focus with respect to your target, and to the focal plane of the scope. Although generally not an issue at ranges of less than 150 yards, this optical effect can greatly alter your point of impact at longer ranges.

How does parallax error affect accuracy? ›

Parallax error is when the pointer of a device looks like it's at a different reading when read to the side compared to when read face-on. This is caused by the distance between the scale and the pointer. Because they're not on the same plane, readings may not appear accurate when viewed at an angle.

What is the point of parallax scrolling? ›

Parallax scrolling is used to add visual interest to a website and engage users as they scroll through a web page. In a parallax scrolling effect, both the foreground and background are moving, but the background typically moves much more slowly, giving the illusion of depth.

Why is parallax scrolling important? ›

Parallax scrolling is a web design technique in which the website background moves at a slower pace than the foreground. This results in a 3D effect as visitors scroll down the site, adding a sense of depth and creating a more immersive browsing experience.

How do you adjust a parallax for hunting? ›

To adjust a scope where parallax is an issue, adjust the parallax adjustment all the way to infinity. Then aim your rifle at a target set at a known distance, obtain a sight picture through the optic and adjust the knob or ring back until the reticle becomes clearer. Make it as crisp as you can here.

Can parallax make you miss? ›

In brief, here's what hunters using riflescopes should know about parallax before heading afield. While parallax is an optical illusion, it can still cause shooters to miss their target. No optics are completely free of the problem. When you're shooting at distances of 250 yards or less, parallax isn't of much concern.

What kind of parallax do scientists use? ›

Astronomers can measure a star's position once, and then again 6 months later and calculate the apparent change in position. The star's apparent motion is called stellar parallax. The distance d is measured in parsecs and the parallax angle p is measured in arcseconds.

When a star is 20 parsecs away its parallax must be? ›

Units of Stellar Distance. Thus, a star with a parallax of 0.1 arcsecond would be found at a distance of 10 parsecs, and one with a parallax of 0.05 arcsecond would be 20 parsecs away.

Did Hubble use parallax? ›

The Hubble astronomers used trigonometric parallax to nail down the cluster's distance. This technique measures the tiny, apparent shift of an object's position due to a change in an observer's point of view. Hubble measured the apparent tiny wobble of the cluster stars due to Earth's motion around the Sun.

Videos

1. Creating a section transition effect
(Webflow)
2. How to parallax image background and text in webflow
(Luckystar)
3. Reveal elements on scroll — Webflow interactions and animations tutorial
(Webflow)
4. Building parallax scrolling and timed animations — without coding
(Webflow)
5. Parallax Scrolling
(Nathan Bean)
6. The Parallax Effect/ Ken Burns Effect : Miami Fire Rescue Pics
(fireresq7)

References

Top Articles
Latest Posts
Article information

Author: Golda Nolan II

Last Updated: 07/29/2023

Views: 6669

Rating: 4.8 / 5 (78 voted)

Reviews: 93% of readers found this page helpful

Author information

Name: Golda Nolan II

Birthday: 1998-05-14

Address: Suite 369 9754 Roberts Pines, West Benitaburgh, NM 69180-7958

Phone: +522993866487

Job: Sales Executive

Hobby: Worldbuilding, Shopping, Quilting, Cooking, Homebrewing, Leather crafting, Pet

Introduction: My name is Golda Nolan II, I am a thoughtful, clever, cute, jolly, brave, powerful, splendid person who loves writing and wants to share my knowledge and understanding with you.