Member Avatar for rickvidallon

I am developing a site that has scrolling images under a static image. (cut-out of woman). I need to nail down the static image so it does not move when resizing the browser or when clicking from page to page.

The only work around I could find is to posistion the static image on loading. "onload="LoadLocation();" onresize="LoadLocation()"

This works ok, but the static image jumps or jerks into position.
Any ideas out there? I'm fresh out of work-arounds on this one...
Thanks, Rick
Test site:

  • 2 Contributors
  • 2 Replies
  • 96 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by rickvidallon

Dani AI

Generated

noted the visible "jump" when the cut-out is repositioned by script, and suggested it might be tolerable — but a smooth, non-jumping solution is simple and reliable without heavy scripting. The jump happens because the browser lays out the page first and then JavaScript adjusts position, which forces a reflow you can avoid with CSS and a small, graceful reveal once the image is ready.

Use CSS to fix the overlay in place instead of computing coordinates on load/resize. For a viewport-locked graphic use position: fixed and transform-centering:

.overlay {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  pointer-events: none;
}

To avoid layout shift while the image downloads, reserve its space (explicit width/height or aspect-ratio) and fade it in only after it is fully loaded. Example pattern using CSS transition plus a tiny load check:

.overlay { opacity: 0; transition: opacity 300ms ease-in; }
.overlay.visible { opacity: 1; }
var overlay = document.querySelector('.overlay');
var img = overlay && overlay.querySelector('img');
if (!img || img.complete) overlay && overlay.classList.add('visible');
else img.addEventListener('load', function(){ overlay.classList.add('visible'); }, false);

Quick tips: make the overlay a direct child of the viewport or of a position: relative container (depending whether it should follow a specific area), ensure z-index places it above the scroller, and avoid placing it inside an element with CSS transform (creates its own stacking context). See MDN: position and MDN: CSS transitions for details. This approach removes the reposition jump and gives a clean fade-in that clients notice for the right reasons.

Recommended Answers

All 2 Replies

Member Avatar for roryt

I think what you have done is fine mate, I doubt anyone will care if it does that. I am a perfectionist but even that wouldn't bother me. Internet connections are getting faster and so pages load quicker, in a years time this probably won't even be noticable.

I can't think of anything else you could really do...

Member Avatar for rickvidallon

Thanks for the reply. While I agree this particular client will definitely complain. I am trying to figure out how to hide the image on-load and have it appear when fully loaded.
(or)
Create a script to have it fade in on load.
Let me know if you have done something similar.

Thanks,
Rick

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.