Member Avatar for ronaldpaul

Hi,
I just popped in on a website named http://n-frames.com/. I would like to know what kind of jquery or css effects they are using in-order to achieve the layering effect on the images while scrolling the page as I would like to use this effect in one of my project. I observed the same effect used by Yahoo in one of their website some time back.

Regards

  • 3 Contributors
  • 2 Replies
  • 194 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by Member #671080

Dani AI

Generated

Short answer: the effect is parallax scrolling — multiple image layers moving at different speeds to create depth. identified the right concept (spelling: parallax). A robust approach combines simple CSS for layering and GPU-accelerated transforms with a tiny JavaScript loop (requestAnimationFrame) to update positions on scroll; that avoids layout thrashing and works much better on mobile than background-attachment: fixed.

A minimal CSS pattern:

.layer { position: absolute; left:0; right:0; will-change: transform; }
.layer--bg { z-index: 0; }
.layer--fg { z-index: 20; }

A simple, performant scroll loop:

const layers = document.querySelectorAll('.layer');
let lastY = 0, ticking = false;

window.addEventListener('scroll', () => {
  lastY = window.scrollY;
  if (!ticking) {
    requestAnimationFrame(() => {
      layers.forEach(el => {
        const speed = parseFloat(el.dataset.speed) || 0;
        el.style.transform = `translate3d(0, ${lastY * speed}px, 0)`;
      });
      ticking = false;
    });
    ticking = true;
  }
});

Use a data-speed attribute per layer (0 = fixed, 0.5 = half speed, 1 = same speed). Prefer transforms (translate3d) over changing top/left.

Practical notes and gotchas:

  • Respect accessibility: disable motion if prefers-reduced-motion: reduce. 
    @media (prefers-reduced-motion: reduce) { .layer { transform: none !important; } }
  • Avoid background-attachment: fixed for critical UX — it’s unreliable on many mobile browsers.
  • Optimize images, limit simultaneous layers (2–3), lazy-load offscreen assets, and test on low-end devices.
  • If parallax will be decorative only, ensure content remains readable and focusable when the effect is disabled.

These choices keep the effect smooth, accessible, and usable across devices while matching the layered look you saw.

Recommended Answers

All 2 Replies

Member Avatar for Member #46692

parralex/parralax

Member Avatar for Member #671080

I have seen a few sites with parallax scrolling and though I like the idea, it cuts out a lot of potential viewers. Without a mouse wheel, for example, how can you easily scroll on a mobile device?

Good examples of what you can do with parallax scrolling are on the skrollr github project and this popular site.

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.