dixonandmoe / rellax

Lightweight, vanilla javascript parallax library
https://dixonandmoe.com/rellax/
MIT License
7.04k stars 880 forks source link

Feature request: speed as a function #232

Open boneyfantaseas opened 3 years ago

boneyfantaseas commented 3 years ago

To provide non-linear parallax behavior, it'd be nice to allow speed to be configured as a callback function.

Aim: have some temporal delay or offset in the animation scroll effect. See https://www.marvinschwaibold.com/

I know it's maybe to far away from what this plugin should do - but just in case you also thought about it - here's the request :)

p-realinho commented 3 years ago

Hey!

Could this be done with CSS Transitions?

I tinkered with it for a bit, here's what I got:

.rellax {
  /* Similar to your example */
  transition: transform 1s cubic-bezier(0.25, 0.75, 0, 1);

  /* Immediately translates, then leaves it "floating" for a bit */
  transition: transform 20s cubic-bezier(0, 1, 0, 1);

  /* Similar to the above, but more noticeable */
  transition: transform .5s cubic-bezier(0, 0.5, 0.5, 1); 

  /* Simple "delayed" ease */
  transition: transform 1s cubic-bezier(0.5, 0, 0, 1);
}

It's not identical to the example you give, but I think with a little more time and patience, it'd get there. I know it's kind of a limited solution, because, well, CSS timing functions are kind of limited, compared to what you could do with a JS function, but I think it could work in the plugin's context.

Hope it helps. :)