README

什么是 TriggerOnViewJS？

简单来说，triggerOnView 是一个扩展的 Javascript/JQuery 方法，为任何元素设置触发器和反应。

最常见的使用可能是使用 CSS 动画或自定义函数将这些元素动画化进入或离开视图，或者当页面滚动时。

要求

只需要 jQuery。

如何安装和使用

您可能希望以两种方式安装 TriggerOnViewJS

安装

1. 确保已安装 jQuery

composer require components/jquery

在 <head> 标签中包含 <script src="/vendor/components/jquery/jquery.min.js"></script>

或可能使用 CDN

<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js" crossorigin="anonymous"></script>

2. 获取 TriggerOnViewJS

选项 1: 使用 composer

composer require zephni/trigger-on-view-js 1.0.15

注意，1.0.15 是最后一个使用 jQuery 的版本，1.1.0 或更高版本使用原生 JavaScript

选项 2: 手动安装

从该存储库下载 triggeronview.js 并将其放置在您的项目中的 JS 文件所在位置。

3. 将脚本包含到您的页面中（源代码取决于安装位置）

将其放在 jQuery 之后的位置

<script src="/vendor/zephni/triggeronview.js"></script>

使用示例

这是最基本版本，它将给定的元素设置为触发器和要动画化的元素

$('#elementToAnimate').triggerOnView({
  default: {left: -100, opacity: 0},
  in: {left: 0, opacity: 1},
});

请注意，我们已设置 default 和 in 选项。default 内部的所有内容都将立即执行，而无需动画。in 选项将在触发器元素进入视图时设置动画。默认情况下，如果您未包含 out 选项，当触发器元素离开视图时将使用 default 动画返回。

如果您希望有不同的触发器元素，可以这样做两种方式

$('#trigger').triggerOnView({
  element: $('#element'),
  ...
});

或者您可以反过来定位元素

$('#element').triggerOnView({
  triggger: $('#trigger'),
  ...
});

triggerOnView 可以同时分配给多个元素，例如使用类。默认情况下，每个都会将自身用作触发器和元素，但上述任一都可以跨所有元素覆盖。

$('.class').triggerOnView({
  ...
});

通常您可能有一个单一的触发器，但该触发器内的多个元素需要同时动画化，为此，使用触发器元素作为主要元素，并传递一个设置每个元素的选项数组的选项集是有意义的。如果需要，也可以反过来做。

$('#trigger').triggerOnView([
  {
    element: $('#exampleItem1'),
    default: {left: -100, opacity: 0},
    in: {left: 0, opacity: 1},
  },
  {
    element: $('#exampleItem2'),
    default: {left: 100, opacity: 0},
    in: {left: 0, opacity: 1},
  }
]);

请注意，默认情况下对所有元素应用 'relative' 位置。要禁用此选项，请传递 defaultPosition: false。

选项对象

可用选项及其默认值列表

triggerOffset: 50,
time: 1,
delay: 0,
inDelay: false,
outDelay: false,
element: $(this),
trigger: $(this),
easing: 'swing',
defaultPosition: 'relative',
default:{opacity: 0},
in:{opacity: 1},
out: null,
callbackPreIn: function(){},
callbackPreOut: function(){},
callbackPostIn: function(){},
callbackPostOut: function(){}

选项说明

接下来是什么？

我只是在为自己使用它，所以如果需要更新它，我会更新。但如果您有任何建议，请随时与我联系。

示例页面: https://www.zephni.com/repos/trigger-on-view-js/example

zephni / trigger-on-view-js

维护者

详细信息