使用SimpleParallax快速创建滚动视差

文章正文还需 4 分钟

simpleparallax是一个非常简单的 Vanilla JS 库，可以在任何图片上添加视差动画

simpleParallax

通过其他插件获得结果可能比较费力，而 simpleParallax.js 则以其简单和可视化渲染脱颖而出。视差效果直接应用于图像标签，不需要使用背景图像

安装

本地

html 复制代码

<script src="simpleParallax.js"></script>

cdn

html 复制代码

<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.5.1/dist/simpleParallax.min.js"></script>

npm

js 复制代码

// npm
npm install simple-parallax-js
 
// yarn
yarn add simple-parallax-js

使用

js 复制代码

// ES6 import
import simpleParallax from 'simple-parallax-js';
 
// CommonJS
const simpleParallax = require('simple-parallax-js');

初始化

要添加视差效果的图片。例如:

html 复制代码

<img class="thumbnail" src="image.jpg" alt="image">

只需添加以下 JavaScript 代码:

js 复制代码

var image = document.getElementsByClassName('thumbnail');
new simpleParallax(image);

你也可以选择在多张图片上应用视差，比如:

js 复制代码

var images = document.querySelectorAll(img);
new simpleParallax(images);

如果您希望对各种图像应用不同的设置，可以初始化 simpleParallax 多次实例。该库将在当前实例的相同流程循环中自动添加新实例，不会耗额外的性能，列如：

html 复制代码

<img class="left" src="image.jpg" alt="image">
<img class="right" src="image.jpg" alt="image">

js 复制代码

var imageLeft = document.querySelector('.left'),
    imageRight = document.querySelector('.right');

new simpleParallax(imageLeft, { 
    orientation: 'left' 
});
new simpleParallax(imageRight, { 
    orientation: 'right' 
});

SimpleParallax-API

属性	类型	默认值	说明
orientation	String	up	up - right - down - left - up left - up right - down left - left right
scale	Number	1.2	缩放大于1.0
overflow	Boolean	false	滚动溢出
delay	Number	0.4	延迟时间
transition	String	'cubic-bezier(0,0,0,1)'	任何的CSS
customContainer	DOM节点		设置图像滚动的容器位置
customWrapper	String		自定义外层
maxTransition	Number	0	1~99的百分比

使用SimpleParallax快速创建滚动视差

simpleParallax

安装

本地

cdn

npm

使用

初始化

更多设置

SimpleParallax-API

更多参考列子