0

I have the following use-case:

  1. a couple of content-elements with images in between
  2. the images should always be displayed as a whole (relate to the contain-value for the background-size-property)
  3. this behaviour should be the same on all viewports, resulting in the image to scale in size (but always being fully visible)
  4. when scrolling, every image is supposed to scroll to the top normally
  5. once an image hits the top, a parallax-effect should kick in

You can see my implementation here: http://codepen.io/AvantiC/pen/BpReza

It works quite well in Chrome, the scrolling and parallax seems really smooth. But when I test the page in Firefox or Safari, the images behave "jumpy"/"jerky" (not sure whats the right word here ;) ).

I am not sure though wether it's a problem with Firefox/Safari or wether my implementation is faulty and Chrome is just somehow making up for it internally.

Maybe someone can point me in the right direction. :)

Greetings, AvantiC

AvantiC
  • 367
  • 3
  • 17

1 Answers1

0

Rather than set the image position each and every frame, try changing the CSS so that the image stays still once the user scrolls past a certain point.

hellol11
  • 422
  • 4
  • 11
  • Hey, care to elaborate? I wouldn't know how to accomplish this outside `position: fixed` ...but this would mean taking the elements out of the document-flow which would cause the calculations (wether they are on the specific point or not) to be wrong from this point on. – AvantiC Jan 24 '17 at 19:17
  • @AvantiC Basically, when the user scrolls to the element, change whatever CSS attributes necessary to get the same effect. Using z-index helps. – hellol11 Jan 25 '17 at 22:26