Limit scrollEffect
Closed this issue · 4 comments
Hello, new to curtainsjs, wonderful library here :D I was playing around with this exemple : https://www.curtainsjs.com/examples/multiple-planes-scroll-effect/index.html
I was wondering : Is there a way to limit scroll amount ? What I try to achieve is : -100 <= relativeTranslation.y <= 100 ? Or limit the scroll to the canvas container ?
Hey @benjamingiraud,
if you're trying to have more control over this example parallax translation values, you should have a look at the applyPlanesParallax function.
This basically calculates a parallaxEffect variable and use it to apply the translation values.
When parallaxEffect equals 0.5, your plane HTML element vertical center is located at the bottom edge of the viewport. When it equals -0.5, your plane HTML element vertical center is located at the top edge of the viewport (and 0 means your plane HTML element vertical center is located at the center of the screen).
Use this float to apply any translation values you want, for example:
planes[index].relativeTranslation.y = parallaxEffect * 200;Is that what you were asking?
Cheers,
Hello @martinlaxenaire
Thank you for your response, but I must misunderstand something, I commented the whole applyPlanesParallax function, but the vertical translations still occurs, is this something triggered by the vertexShader ?
No, it's not occuring in the vertex shader, it's just handled by that one line:
planes[index].relativeTranslation.y = parallaxEffect * sceneBoundingRect.height / 4;If you comment it, you won't get any translation/parallax any more, just the rotation, scale and vertex shader twist effects on scroll.
Cheers,
Closing this issue due to inactivity. Feel free to reopen it if you need.
Cheers,