探索简单优雅的视差滚动库——simpleParallax.js-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00358/article/details/141209513

探索简单优雅的视差滚动库——simpleParallax.js

simpleParallax.jsSimple and tiny JavaScript library that adds parallax animations on any images项目地址:https://gitcode.com/gh_mirrors/si/simpleParallax.js

在网页设计的世界中，视觉效果是至关重要的，而简单的视差滚动动画能够为用户体验注入新的活力。今天，我要向大家推荐一个轻量级且易于使用的JavaScript和React库——simpleParallax.js，它将帮助你在任何图像上轻松实现迷人的视差效果。

简介

简单来说，simpleParallax.js 是一个专为追求简洁和效率的设计者打造的库。它通过直接在img标签上应用视差效果，避免了对背景图片的依赖，让你可以自由地使用任何图像进行创作。了解更多关于这个案例研究的内容，你可以点击这里：《如何使用JavaScript在img标签上创建视差效果》。

安装与导入

想要开始使用？只需几步即可：

# 使用npm安装
npm install simple-parallax-js

# 或者使用yarn
yarn add simple-parallax-js

接着，根据你的项目需求选择React或原生JavaScript版本进行导入：

// React 版本
import SimpleParallax from 'simple-parallax-js';

// 原生JavaScript 版本
import SimpleParallax from "simple-parallax-js/vanilla";

快速上手

React

import SimpleParallax from "simple-parallax-js";

function Component() {
  return (
    <SimpleParallax>
      <img src={"thumbnail.jpg"} alt={"image"} />
    </SimpleParallax>
  );
}

原生JavaScript

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

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

如果你需要处理多个图像，只需调用querySelectorAll方法并传入类名或标签名。

此外，此库还支持视频元素的视差效果。

自定义设置

simpleParallax.js 提供了一系列可定制的选项，包括方向（orientation）、缩放比例（scale）、是否允许溢出（overflow）以及延迟时间（delay）等。以下是一些示例：

React 和 Next.js 示例

import SimpleParallax from "simple-parallax-js";
import Image from "next/image";

function Component() {
  return (
    <SimpleParallax 
      delay={0}
      orientation={"down"}
      scale={1.3}
      overflow
      maxTransition={60}
    >
      <Image src={"thumbnail.jpg"} alt={"image"} width={1920} height={1024} />
    </SimpleParallax>
  );
}

原生JavaScript 示例

var images = document.querySelectorAll('.thumbnail');
new simpleParallax(images, {
    delay: 0,
    orientation: 'down',
    scale: 1.3,
    overflow: true,
    customContainer: '.container',
    customWrapper: '.wrapper'
});

通过这些设置，你可以创造出各种独特而引人注目的视差动画。