平滑滚动和滚动的视差效果
Posted
tags:
中文标题：平滑滚动和滚动的视差效果 原文标题：smooth scrolling and parallax effects on scroll 项目评级：Star:601 Fork:76 下载地址：https://github.com/baptistebriel/smooth-scrolling 详情介绍平整的
Smooth是一个基于VirtualScroll的小型JavaScript模块，用于在滚动时创建平滑滚动和视差效果。
它既适用于假滚动条，也适用于原生滚动。
用法
npm install smooth-scrolling
选项
listener：滚动事件监听器&；所有元素的父容器
direction：垂直或水平滚动行为
native：使用默认滚动条
section：要转换的元素
ease：缓和值（通常在0和1之间）
vs：您可以为虚拟滚动传递一些选项：limitInertia、mouseMultiplier等
preload：如果设置为false，则加载所有图像后将不会调用调整大小函数
noscrollbar：如果使用虚拟滚动并设置为true，则不会构建自定义滚动条
callback：requestAnimationFrame调用的函数
方法
smooth.init()
将添加所有事件侦听器和DOM元素。
smooth.on()
将监听任一窗口滚动事件（如果为本机），否则为VirtualScroll
smooth.off()
将停止收听onscroll/wheel事件。
smooth.destroy()
将删除所有事件侦听器和DOM元素。
smooth.scrollTo(offset)
基本滚动到功能。
延伸平滑
发展
git clone git@github.com:baptistebriel/smooth-scrolling.git
cd smooth-scrolling/ && npm i && npm run dev
您可以使用[http-server](https://www.npmjs.com/package/http-server)或MAMP预览演示。
Demos公司
npm run demo-parallax
npm run demo-parallax-page
npm run demo-horizontal
npm run demo-native-horizontal
npm run demo-opacity
npm run demo-scale
npm run demo-split
npm run demo-performances
示例
etq.store公司
致命女性巴黎
建筑。阿姆斯特丹
罗马网站
黄素天空网
阿里巴巴
bbriel.me公司
studiochovojon.com
andeinerseite.video公司
eginstill.com
黑莓.fr
&；还有更多！
进一步了解
如果你还没有读过教程，我强烈推荐你。
Smooth.js基本上就是博客文章中解释的内容。我只需要一个简单的脚本就可以完成任务，而不必每次想使用这种技术时都写很多代码。
许可证
麻省理工学院，见LICENSE.md。