How to create a parallax-like effect

One of the most popular techniques, for its easy implementation and straightforward result is setting an image as fixed in window, creating a quasi parallax effect, and giving the impression of movement.

This effect creates very visually pleasing effects, adds a lot of shine to any design, and is easy to combine with other elements such as text boxes. Apply some on scroll animations and you have beautiful and smooth flowing page.

To begin, create an image that is appropriate for giving the feeling of an environment we are traversing through (in a metaphorical sense too; it could be anything from a classic medieval painting to  spontaneous photography). Once you place the image simply click the fixed in window option. 

The idea is to create a context of a strong visual point, where the viewer focuses their attention. It is a pocket of realism, and the other more “fictional” elements gain more substantial attention, as the context changes from environment/mood to information and back again, therefore maintaining interest.

In this case the context is a travel organization company, focusing on hiking and camping, supplies and networking. Using one scrolling background for the supply and preparation concept, and one for the wonder of nature concept, the fixed interstitial provides context separation. 

It’s advisable to leave appropriate spacing across fixed background sections for the viewer to complete the transition, we can then take advantage of the renewed attention for new information.

Updated for Sparkle 3.1

Auf Deutsch

En Français

In Italiano

Please report any shortcoming in this documentation and we’ll fix it as soon as possible!

Sparkle combines an all-in-one approach, an understandable interface and a focus on producing high performance and search engine optimized websites. 

All in a powerful native Mac app. 

Nothing else comes close.

Copyright ©2021 River SRL 

IT06208340486 — REA FI-609716

This site uses cookies. Some are essential to make our site work; others help us improve the user experience and display third party content. By using the site, you agree to our site sending these cookies. Read our privacy policy to learn more or opt out.