使用simpleParallax创建图片视觉滚动的最简单方法


SimpleParallax是一个非常简单的小型JavaScript库,可以在任何图像上添加视觉动画。

视觉效果直接添加到图像标签上,不需要像大多数其他视觉库一样使用背景图像。基本上,您可以在生产网站上添加视觉效果而不会破坏其布局。

您还可以选择在图片标签/ srcset图像上应用视差。实现非常简单,动画流畅自然。

安装

安装非常简单。您可以选择将脚本直接包含在HTML中:

1
 

或者选择通过npm / yarn安装它:

1
2
3
4
5
#npm
npm install simple-parallax-js

#yarn
yarn add simple-parallax-js

通过包管理器安装后,可以按如下方式导入:

1
import simpleParallax from 'simple-parallax-js';

初始化

要添加视差效果,您可以定位所需的任何图像。例如:

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

只需添加以下JavaScript代码:

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

您还可以选择在多个图像上应用视差,例如:

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

主要案例

默认情况下,如果未指定任何参数,simpleParallax将使用向上方向。当向下滚动时,它将导致图像从下到上翻译,当向上滚动时,将从上到下翻译图像。

您可以将这些方向中进行选择-  -  -  -  - 上左 - 右上 - 上下左 - 降权

如果您希望对各种图像应用不同的设置,请不要犹豫,初始化simpleParallax的几个实例。库将自动在当前实例的同一进程循环中添加新实例。因此,不会消耗额外的性能。

1
2
<img class="left" src="image.jpg" alt="image" />
<img class="right" src="image.jpg" alt="image" />
1
2
3
4
5
6
7
8
9
var imageLeft = document.querySelector('.left'),
imageRight = document.querySelector('.right');

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

 

更多设置

通过应用于图像的缩放效果创建视差效果。可以轻松更改此缩放效果(默认值为1.3)。刻度越高,视差效果越快,越明显。

1
2
3
new simpleParallax(image, {
    scale: 2
});

溢出是另一个有趣的设置。默认情况下,溢出设置为false。如果设置为true,则图像将从其自然流中转换出来。

1
2
3
new simpleParallax(image, {
    overflow: true
});

有用的链接

本站所有资源由作者收集发布,如有侵犯您的权益,请联系我们,我们将尽快处理!
淘码汇 » 使用simpleParallax创建图片视觉滚动的最简单方法

发表评论

淘码汇可信交易平台,为你的产品带来更多流量!

立即入住 了解详情