The problem is located in this file: vue-parallaxy/dist/vue-parallaxy.js line 2677 where animationValue is calculated based on window.pageYOffset. As a result, when the page is scrolled deeply down, this value is about 4000px, and no animation happens. It should be changed to: var animationValue = this.$refs.block.getBoundingClientRect().y * this.speedFactor; and then if (animationValue <= availableOffset && Math.abs(animationValue) >= 0)
With this solution, parallax animation will be calculated based on the current block scroll offset, but not the whole page.
Expected Behavior
Parallax works everywhere
Actual Behavior
If the banner/image is somewhere below on the page, parallax doesn't work
Environment
It doesn't work even here on your demo: https://codesandbox.io/s/ljh9g?file=/src/App.vue
Problem root
The problem is located in this file:
vue-parallaxy/dist/vue-parallaxy.jsline2677whereanimationValueis calculated based onwindow.pageYOffset. As a result, when the page is scrolled deeply down, this value is about 4000px, and no animation happens. It should be changed to:var animationValue = this.$refs.block.getBoundingClientRect().y * this.speedFactor;and thenif (animationValue <= availableOffset && Math.abs(animationValue) >= 0)With this solution, parallax animation will be calculated based on the current block scroll offset, but not the whole page.