Smooth Scroll Move will make your web more smooth to scroll to enhance user experience DEMO
go to your terminal and type the following:
yarn add smooth-scroll-movethen
<script src='node_modules/smooth-scroll-move/js_lib/SmoothScrollMove.js'></script><body>
<div style='position: fixed;'>/*I am fixed UI Component, should put outside the smooth-scroll-move*/</div>
<div id="smooth-scroll-move">
/* all your web content here */
</div>
<script type='text/javascript'>
SmoothScrollMove.init({
full_page: true
})
</script>
</body>Wrap all your web content in id='smooth-scroll-move',
BUT
fixed UI component should put outside the id='smooth-scroll-move'
Here, you will have your web whole page scroll smoothly!!
If you want some UI Component have parallex scroll effect, just:
<body>
<header>/*I am fixed UI Component, should put outside the smooth-scroll-move*/</header>
<div id="smooth-scroll-move">
<div
class='your-comp smc'
data-smc-y='0.5'
></div>
</div>
<script type='text/javascript'>
SmoothScrollMove.init({
full_page: true
})
</script>
</body>give it a class: smc (scroll move component)
AND
dataset (can be multi):
<div
class='smc'
data-smc-x='0.5'
data-smc-y='0.5'
data-smc-z='0.5'
data-smc-rotation-x='0.5'
data-smc-rotation-y='0.5'
data-smc-rotation-z='0.5'
data-smc-skew-x='0.5'
data-smc-skew-y='0.5'
>
</div> Here, the parallex scroll effect will appear!!
-
If you just want parallex effect without whole page scroll smoothly, just make full_page: false
-
if your content will dynamic change cause different content height,
just use the function below to set new height to body after every time content has been changed:
const set_moving_board_height_to_body = () => {
const BoxRef = document.getElementById('smooth-scroll-move').children[0]
document.body.style.height = `${BoxRef.clientHeight}px`
}- In Mobile Device, the scroll behavior is already smooth, so
the effect of Full Page Scroll Smoothly will be closed
in condition: window.innerWidth <= 1024