1

I currently have a full screen hero image slideshow on the homepage of a site. I have an javascript effect which gets the scroll position and divides it by 1.5 then sets the image transformY position causing a parallex effect.

Here is the code I currently have:

$(window).on("load scroll resize", function () {
    $("form:not(.blive_PageEdit) .hero-img .blive_Control img").css({ "margin-top": $(window).scrollTop() / 1.5 });
});

This works as I want, but I have noticed that performance is a major issue expecially on browsers which support asynchronous scrolling which causes a juddering effect.

What I want to know is if there is a better way to implement this? What would be perfect would be to have something like the following but I don't think this is possible with just CSS:

img {
    transformY(calc(scrollTop / 1.5));
}

I have also looked at IntersectionObserver, but I am unsure this would achieve what I want to do.

Any thoughts would be helpful. Thanks

Handy Andy Mutter
  • 304
  • 1
  • 10
  • Please include the code that is not performing well in the question. There could be techniques you aren't using to get rid of the jank. – skyline3000 Jun 26 '19 at 15:32
  • @skyline3000 I have added the code currently in use. Thanks – Handy Andy Mutter Jun 26 '19 at 15:35
  • You can share the code with us, we don't bite. Not just a few lines of js. You should give us a [Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) – Jabberwocky Jun 26 '19 at 15:39
  • make `scrollTop` a CSS varialbe `--scrollTop` and change it with the JS code : https://stackoverflow.com/a/49618941/8620333 – Temani Afif Jun 26 '19 at 15:46
  • I'm curious as to which browsers specifically you're having issues with. – Shikkediel Jun 26 '19 at 17:50
  • @Shikkediel Mainly Firefox and IE but I see the issue in all browsers to a certain extent, and more so on slower connections. – Handy Andy Mutter Jun 27 '19 at 09:12
  • Could you show a working demo? I've done quite a bit of coding with the `scroll` event and I'm having a hard time imagining what you might be referring to. I would have thought this only to be an issue with older mobile browsers that don't fire a `scroll` event while panning. Any lag in desktop Firefox with standard smoothscroll shouldn't even be noticeable, unless some other script is demanding a lot of resources. – Shikkediel Jun 27 '19 at 18:01
  • @Shikkediel Here is a link to a document which covers what I am having issues with. https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects – Handy Andy Mutter Jun 28 '19 at 10:21

0 Answers0