Member Avatar for dusk2dawm

Could anyone please assist me by naming the technique used or a link to describing site where I can learn more about how to build a page where the background changes as the upper layer is scrolled?

Example here:
http://www.bbc.co.uk/news/resources/idt-dc75304f-e77c-4125-aacf-83e7714a5840

  • 4 Contributors
  • 5 Replies
  • 211 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Troy III

Dani AI

Generated

As correctly named it, the technique is parallax scrolling: layers move at different speeds so the background appears to change as the content in front is scrolled. The BBC page you linked is a straightforward example — a foreground content layer scrolls normally while behind it one or more layers shift more slowly to create depth.

Two common ways to build this: pure CSS and JavaScript. Pure CSS approaches (as suggested) can be simple to set up and work well for basic effects, but they are less flexible across devices and browsers. A JS approach gives precise control: measure scroll, compute offsets, and apply transforms. For smooth, low-cost animation always change composited properties (transform, opacity), use translate3d to leverage the GPU, and drive updates with requestAnimationFrame rather than firing heavy work directly from the scroll event.

A minimal, robust pattern:

const el = document.querySelector('.parallax');
const speed = 0.5;

function update(){
  const y = window.pageYOffset;
  el.style.transform = `translate3d(0, ${y * speed}px, 0)`;
}

let ticking = false;
window.addEventListener('scroll', () => {
  if (!ticking) {
    window.requestAnimationFrame(() => {
      update();
      ticking = false;
    });
    ticking = true;
  }
});

Respect motion preferences and performance:

@media (prefers-reduced-motion: reduce) {
  .parallax { transform: none !important; transition: none !important; }
}

Troubleshooting tips: if you see jank, check image sizes (serve scaled and compressed assets), reduce the number of moving layers, and profile with DevTools to find paints. Use IntersectionObserver to disable offscreen effects. Keep the effect subtle and test on real devices — some users dislike strong motion, so provide a graceful fallback or a toggle. This balances the visual appeal of parallax with accessibility and performance.

Recommended Answers

All 5 Replies

Member Avatar for dusk2dawm

Cool, thank you!

Member Avatar for almostbob

Using windows 7 8 or chrome, there are apps for that

neaten the generated code if you use one,

Edited by almostbob
Member Avatar for Troy III

I don't think I para-like it. In fact, I think I para-hate it.
Or it's just that I'm simply growing old?er.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.