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

演示  website 下载

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

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