Implementing a parallax scroll effect using CSS and dynamically updating the background-position value with JavaScript

Question

Implementing a parallax scroll effect using CSS and dynamically updating the background-position value with JavaScript

How can different Y position percentages be dynamically assigned to multiple layered background images in CSS using JavaScript so that they update as the page scrolls?

<style>
  body {
    background-image: 
      url(img/bg-pattern-01.png),
      url(img/bg-pattern-02.png),
      url(img/bg-pattern-03.png);
    background-position:
      center 45%,
      center 50%,
      center 55%;
  }
</style>

The example above shows static values (45%, 50%, 55%) as background positions, but these percentages should ideally change based on the vertical scroll position of the page. This could involve a combination or average blend of the actual scroll percentage.

javascript css scroll parallax

Answer 1

Answer №1

Unique Parallax Scrolling Methodology

_{An insightful answer was provided for my question, which I accepted. However, the contributor has since removed their response. It served as a valuable reference point and guided me in refining the techniques to create what I had envisioned:}

This innovative approach involves creating a multi-layered parallax scrolling background that adapts seamlessly to any window size without the need for additional DIV elements. The use of jQuery simplified the process significantly, although it could be replicated using vanilla JavaScript if necessary. The implementation is straightforward and not overly complex.

Innovative Conceptualization

The technique involves designing a multi-layered background with specified CSS styling, including defining the background-position. A script then adjusts the top or bottom position by subtracting a pixel value for each layer based on whether it belongs to the upper or lower part of the design.

The demo includes various background images along with their corresponding properties:

image	background -repeat	background -size	background -position _(initial)	background -position _(scripted)	background -blend -mode	perceptual layer *
	repeat-x	100vw	center bottom	center bottom -${(scrollBtm * 0.9)}px	lighten	lay1:btm _(nearest)
	repeat-x	100vw	center bottom	center bottom -${(scrollBtm * 0.6)}px	normal	lay2:btm
^src	repeat	33vw	center top	center top -${(scrollTop * 0.3)}px	lighten	particle anim **
	repeat-x	100vw	center top	center top -${(scrollTop * 0.2)}px	normal	lay3:top
	repeat-x	100vw	center bottom	center bottom -${(scrollBtm * 0.2)}px	multiply	lay3:btm
	no-repeat	cover	center center	center center _{(not scripted)}	normal _(always)	lay4 _(farthest)

* = "Perceptual layer" denotes the perceived stacking order of layers in the design from the viewer's perspective, providing a useful way to track the arrangement. Use whatever labels suit your workflow.

** = The inclusion of an animated particle GIF was spontaneous and does not have a specific ordering rule. Hence, no perceptual layer number is assigned; however, it visually enhances the transition between lay2 and lay3.

A key aspect of this method is the utilization of scrollTop and scrollBottom functions to offset backgrounds relative to the page's top and bottom. Each perceptual layer (e.g., lay3) can feature both a top and bottom image for added depth.

The script dynamically repositions layers an adjustable distance (- amount px) away from the top or bottom of the page upon scrolling activity.

By tweaking the scroll rate multiplier (* ranging from 0.0 to 1.0), the movement speed relative to scrolling can be fine-tuned. Higher values (e.g., 0.9) create a closer perceived distance, while lower values (e.g., 0.1) result in objects appearing farther away. Layers sharing the same "perceptual layer" should maintain consistent scroll rates to maintain visual coherence.

Though not essential for every design, the example demonstrates the effective use of the background-blend-mode property for achieving more engaging visual effects.

After executing the code snippet, clicking Full Page is recommended to appreciate the full immersive impact.

_{Image Optimization Insights: While imgur (the hosting platform for the images in this demonstration) currently lacks support for WebP, utilizing this format can drastically reduce file sizes—my tests revealed WebP files are approximately 8% the size of PNG and still-image GIF backgrounds. The total size of all static images exported as WebP amounted to a mere 193KB, whereas a single animated GIF clocked in at a slightly heftier 254KB. Though optimization specifics may vary, prioritizing efficient compression formats like WebP and ensuring resource-intensive formats like animated GIFs are used judiciously can prevent unwieldy image file sizes in multi-layer designs. The crux is recognizing that employing streamlined compression methods across different elements contributes to the overall efficiency of the final design.}