帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

js元素动画滚动与视差效果插件

帝国模板之家 2020-11-18 网页特效 评论

这是一个最新视差效果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
});

会员登陆后即可下载资源文件。更多好用网站特效插件,请关注帝国模板之家

这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言