pushIn.js

PushIn.js 是一种轻量级的视差效果，使用 JavaScript 构建，可模拟网页上的交互式推入或推入动画。

查看现场演示以获取工作示例。

兼容性

PushIn.js 支持所有符合 ES5 的浏览器（不支持 IE8 及以下版本）。

入门

1. 使用 NPM 或 CDN 安装 pushin

如果你使用 npm，你可以通过运行安装包：

npm install --save pushin

将资产导入您的 javascript（如果使用 Webpack）或直接导入您的 CSS 文件。

// webpack
import 'pushin/dist/pushin.css';

〜 或 〜

/* css */
@import 'node_modules/pushin/dist/pushin.css';

或者，您可以使用 CDN：

<link rel="stylesheet" href="https://unpkg.com/pushin/dist/pushin.min.css" />
<script
  type="text/javascript"
  src="https://unpkg.com/pushin/dist/umd/pushin.min.js"
></script>

2. 所需的 HTML 结构

在最基本的层面上，您需要在页面上进行一些设置才能使其正常工作。

使用以下示例片段为推入效果创建“场景”。

例子：

<div class="pushin">
  <div class="pushin-scene">
    <div class="pushin-layer">This is the first layer you'll see.</div>
    <div class="pushin-layer">
      This is a second layer, which will be positioned behind the first one.
    </div>
  </div>
</div>

具有该类的每个 div pushin-layer都可以容纳滚动时要放大或缩小的内容。

3.初始化效果

设置好 HTML 后，有两种方法可以初始化效果：

• 致电 new PushIn().start()：

import { PushIn } from 'pushin';

const container = document.querySelector('.pushin');
new PushIn(container).start();

• 调用 pushInStart()函数（导出到全局范围）：

import 'pushin';

pushInStart();

为了帮助设置效果，您可以使用调试工具轻松确定向下滚动页面时希望效果开始和结束的位置。要启用此功能，只需将配置对象传递给 debug: true辅助函数即可。

在此处查看此工具的工作演示：响应式设计

import 'pushin';

// initialize push-in effect
pushInStart({ debug: true });

4.破坏效果

有 PushIn一个 destroy()方法可以在视图被销毁后调用以进行所有清理。例如，这就是您希望在 React 中执行此操作的方式：

import React, { useLayoutEffect, useRef } from 'react';
import { PushIn } from 'pushin';

export default function PushInComponent() {
  const pushInContainer = useRef();

  useLayoutEffect(() => {
    const pushIn = new PushIn(pushInContainer.current);
    pushIn.start();

    return () => pushIn.destroy();
  });

  return (
    <div className="pushin" ref={pushInContainer}>
      <div className="pushin-scene">
        <div className="pushin-layer">This is the first layer you'll see.</div>
        <div className="pushin-layer">
          This is a second layer, which will be positioned behind the first one.
        </div>
      </div>
    </div>
  );
}

5.配置

您可以使用多种插件配置来自定义您的独特项目。

有关所有可用配置的详细分类，请参阅https://nateplusplus.github.io/pushin/api。

SSR

这种效果在很大程度上依赖于窗口事件，这在服务器端渲染环境中不可用。一旦 DOM 在客户端加载，您将需要绑定窗口事件。为此，请运行该 bindEvents()方法。

// Start up the effect server-side
const pushIn = new PushIn();
pushIn.start();

//...

// Bind events client-side
pushin.bindEvents();

贡献

我们为贡献者设置了单独的文档：CONTRIBUTING.md

开发设置

我们为开发人员设置了单独的文档：DEVELOPERS.md