网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一个最新视差效果JS库,当滚动到视图时,它对元素应用平滑、微妙、可配置的视差滚动效果。
更多功能:
自定义触发器偏移量
平滑滚动
触摸已启用
自定义滚动条
支持粘性元素
或水平方向
使用方法:
1.在页面中加载插件文件
<script src="dist/locomotive-scroll.min.js"></script>
<link href="dist/locomotive-scroll.min.css" rel="stylesheet" />
2.使用默认设置初始化MotionScroll。
const myScroll = new LocomotiveScroll();
3.使用data-scroll属性:
<div data-scroll>Element To Animate</div>
4.以下滚动的视差效果data属性:
data-scroll-container: 滚动容器
data-scroll-section: 可滚动部分,用于分区页
data-scroll-class: in-view class
data-scroll-offset: 滚动偏移 (ex.: “10”, “100,50%”, “25%, 15%”)
data-scroll-repeat: 滚动重复
data-scroll-call: 滚动调用
data-scroll-speed: 滚动速度
data-scroll-target: 滚动目标
data-scroll-position: 滚动位置top 或 bottom
data-scroll-direction: 滚动方向:垂直或水平
data-scroll-delay: 滚动延迟
data-scroll-sticky: 滚动粘性
data-scroll-id: 元素id
<div data-scroll
data-scroll-speed="1">
data-scroll-call="EVENT_NAME"
>
Element To Animate
</div>
5.所有可能的配置
const myScroll = new LocomotiveScroll({
el: document,
name: 'scroll',
offset: [0, 0],
repeat: false,
smooth: false, // smooth scroll
direction: 'vertical', // or horizontal
lerp: 1, // inertia
class: 'is-inview',
initClass: 'has-scroll-init',
scrollbarClass: 'c-scrollbar',
scrollingClass: 'has-scroll-scrolling',
draggingClass: 'has-scroll-dragging',
smoothClass: 'has-scroll-smooth',
scrollbarContainer: false,
getSpeed: false,
getDirection: false,
multiplier: 1,
firefoxMultiplier: 50,
touchMultiplier: 2,
scrollFromAnywhere: false,
gestureDirection: 'vertical', // or horizontal, both
reloadOnContextChange: false,
resetNativeScroll: true
});
6.API方法
// initialize the instance
myScroll.init();
// re-calc & update the postion
myScroll.update();
// destroy
myScroll.destroy();
// restart
myScroll.start();
// stop
myScroll.stop();
// scroll to a specific element with an offset
myScroll.scrollTo(target, options);
7.事件处理程序
myScroll.on('call', (func) => {
// do something
});
myScroll.on('scroll', (obj) => {
// do something
});
转载请注明来源:js元素动画滚动与视差效果插件
本文永久链接地址:https://www.moyouyouw.cn/code/767.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论