The filter that is commonly used to animate objects in graphic design and motion graphics is the parallax filter. Parallax is a technique where background images or objects move slower than foreground images or objects, creating an illusion of depth and a 3D effect as you scroll down the page. This filter has become very popular in web design, mobile apps and animations in recent years.
How does the parallax filter work?
The parallax scrolling effect is achieved by making the background images or layers move slower than the foreground images or layers. This creates a sense of depth as the foreground layers move faster than the background layers.
The background layers are attached to the webpage or screen so as they stay fixed as you scroll up or down a page. The foreground layers are independent of the page scroll, so they move at a different speed to the background. This difference in speed creates the parallax effect.
For example, a common parallax implementation is having a front layer with text and graphics that scrolls normally with the page, and a background layer with a large image that stays fixed as you scroll. This makes it appear as if the background image is receding into the distance as you scroll down the page.
Using CSS and JavaScript
Parallax effects can be created using CSS and JavaScript code. The CSS is used to position the background and foreground layers, specifying their speed and direction of movement. JavaScript is used to continually recalculate the position and movement of each layer based on the page scroll position.
The basic steps to implement parallax with CSS and JavaScript are:
- Set up HTML with container elements for the foreground and background layers
- Use CSS to position the layers and set initial transform values
- Calculate scroll position with JavaScript on page scroll
- Update CSS transform values based on scroll position
- Continuously recalculate on each scroll event
This allows the parallax effect to work seamlessly as the user scrolls up and down the page.
Using dedicated parallax plugins
There are also dedicated parallax plugins and libraries that can be used to easily add parallax effects without having to write custom code.
Some popular options include:
- Parallax.js – JavaScript library for scroll effects
- Skrollr – Parallax scrolling library for web
- Superscrollorama – Parallax scrolling code for jQuery
- Stellar.js – Parallax plugin for jQuery
These provide useful features like responsiveness, integrating with scroll libraries like ScrollMagic, and allowing easy implementation of parallax. They handle the complex calculations and updating of elements behind the scenes.
Why is the parallax filter used in animations and motion graphics?
There are a few key reasons why the parallax effect is so popular for animations and motion graphics:
Creates an illusion of depth
As mentioned earlier, parallax creates a powerful sense of depth in a 2D scene. By separating foreground and background layers and speeds, you can add levels of depth that make flat images and graphics appear more immersive.
Directs viewer attention
Parallax allows the scene designer to draw focus to particular parts of the composition by controlling speed and direction of motion. Elements that move faster grab more attention.
Adds motion and dynamism
The differential motion created by parallax makes still images and scenes feel more dynamic and in motion. This motion effect holds attention and creates liveliness.
Works well with scrolling
Parallax is perfectly suited to create engaging scroll-based animations and interactions. As the user scrolls, the parallax layers respond smoothly to create an immersive experience.
Flexibility and creativity
There is tremendous creative flexibility with manipulating motion and speed differences between layers. Parallax allows new visual storytelling possibilities.
Examples of how parallax is used in animations
Here are some examples that showcase the creative use of parallax in animations:
Scrolling website animations
Web designers use parallax to create engaging scrolling experiences where different visual elements move at varying speeds as you scroll.
Game backgrounds
The layered backgrounds in scrolling platformer games often use parallax. Closer objects like ground and trees move faster than distant objects like mountains and clouds.
Motion graphics
Motion graphics animations use parallax techniques to add depth, such as having foreground elements move separately from background elements.
Parallax storytelling
Some visual stories are told using parallax effects to guide the viewer’s attention and reveal story details.
Scrolling cinematography
Parallax allows creating movie-like camera motion effects, like having subjects move past the camera at different speeds.
Surreal abstract animations
Parallax layers can be used to create surreal floating effects for trippy, abstract animations.
Advantages of using the parallax effect
Some of the key advantages of using parallax for animations and motion graphics include:
- Creates depth and immersion in a 2D scene
- Allows controlling speed and direction of visual attention
- Works perfectly with scroll-based interactions and experiences
- Adds motion and dynamism with differential motion
- Provides flexibility for creative visual effects
- Relatively simple to implement with modern tools
Disadvantages and challenges with parallax
While very versatile, the parallax effect also comes with some limitations and challenges:
- Can cause excessive motion that strains the eyes
- Programming smooth parallax requires significant coding work
- Difficult to maintain visual coherence as layers move separately
- Not suitable for all types of animations and contexts
- Requires more computing power to render additional moving layers
- Limited capabilities on less powerful mobile devices
Conclusion
The parallax effect is a powerful technique for creating immersive animations and motion graphics. It works by moving background layers slower than foreground layers, which creates an illusion of depth and 3D motion as you scroll. While some coding is required, modern tools like parallax libraries and plugins make it easier to implement parallax motion.
When used effectively, parallax can add dynamism, visual interest and an illusion of depth to engage viewers. It creates new storytelling possibilities with scroll-based experiences. Parallax is a staple of modern animation, but should also be used judiciously by weighing its advantages against excessive motion.