smooth-scroll-move
Advanced tools
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-move
then
<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`
}
FAQs
make your web scroll smoothly to enhance user experience
We found that smooth-scroll-move demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenAI rotated macOS signing certificates after a malicious Axios package reached its CI pipeline in a broader software supply chain attack.
Security News
Open source is under attack because of how much value it creates. It has been the foundation of every major software innovation for the last three decades. This is not the time to walk away from it.
Security News
Socket CEO Feross Aboukhadijeh breaks down how North Korea hijacked Axios and what it means for the future of software supply chain security.