Skip to content

Commit

Permalink
Merge pull request #1 from lakejason0/patch-1
Browse files Browse the repository at this point in the history 
Rewording README.zh-Hans.md
  • Loading branch information
@stevenlei
stevenlei authored Oct 24, 2021
2 parents 49470fa + dbefbec commit 3831e95
Showing 1 changed file with 17 additions and 17 deletions.
34 changes: 17 additions & 17 deletions README.zh-Hans.md
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# Trigger JS

通过 CSS 变量，获取制作页面卷动动画所需的值，毋须编写任何 JavaScript 代码。
通过 CSS 变量，获取制作页面滚动动画所需的值，毋须编写任何 JavaScript 代码。

有时候我们想因应页面卷动的位置建立动画，或更新 HTML 元素的 CSS 样式。就像视频播放一样，动画在页面向上卷动时前进，向下卷动时后退。
有时候我们想根据页面滚动的位置制作动画，或更新 HTML 元素的 CSS 样式。就像视频播放一样，动画在页面向上滚动时前进，向下滚动时后退。

最初，它只是一个根据元素从页底出现以至到页顶消失，由 0 到 1 的数字。然而，这个数字对于各种各样的动画需求来说实在过于简单，因此数值的范围是可以设置的。不过，数字也不是万能的，透过映射和过滤功能，我们可以将一个数字转变为一个颜色或其他的值，以便我们在 CSS 中直接使用。[点击这里](https://codepen.io/collection/eJmoMr)查看范例。
最初，它只是一个根据元素从页底出现以至到页顶消失，由 0 到 1 的数字。然而，这个数字对于各种各样的动画需求来说实在过于简单，因此数值的范围是可以设置的。不过，数字也不是万能的，通过映射和过滤功能，我们可以将一个数字转变为一个颜色或其他的值，以便我们在 CSS 中直接使用。[点击这里](https://codepen.io/collection/eJmoMr)查看范例。

阅读本文档的其他语言版本：[English](README.md)、[繁體中文](README.zh-Hant.md)、[简体中文](README.zh-Hans.md)。

Expand All @@ -27,7 +27,7 @@
```html
<style>
body {
padding: 100vh 0; /* 确保页面有足够空间卷动 */
padding: 100vh 0; /* 确保页面有足够空间滚动 */
}
#greeting {
Expand All @@ -36,26 +36,26 @@
</style>
```

3. 卷动页面，测试效果。
3. 滚动页面，测试效果。

## `tg-` 属性列表

| 属性名称 | 类型 | 默认值 | 简介 |
| ----------- | ---- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `tg-name` | 必填 | - | 接收卷动值的 CSS 变数名称，是否加上 `--` 前缀都可。 |
| `tg-name` | 必填 | - | 接收滚动值的 CSS 变量名称，是否加上 `--` 前缀都可。 |
| `tg-from` | 选填 | `0` | 起始值 |
| `tg-to` | 选填 | `1` | 终点值 |
| `tg-steps` | 选填 | `100` | 从 `tg-from` 至 `tg-to` 之间触发多少次 |
| `tg-step` | 选填 | `0` | 每次递加的数值，如果此值不为 `0`，则会忽略 `tg-steps` 的设定。 |
| `tg-map` | 选填 | (空白字串) | 将一个值映射至另一个值。格式：`value: newValue; value2: newValue2`。亦支援同时将多个值映射至另一个值：`value,value2,value3: newValue` |
| `tg-filter` | 选填 | (空白字串) | 只当卷动值在列表当中时才触发，格式：`1,3,5,7,9`。默认情况下，过滤模式是 `retain`（保留值），在设定值末端加入 `!` 符号可以将模式切换为 `exact`（绝对）。关于两个模式的分别，请参考后续的内容。 |
| `tg-edge` | 选填 | cover | 计算卷动值的起始点。`cover` 代表画面外至画面外，即在元素进入画面时即开始计算；`inset` 代表在元素完整进入画面时开始计算，在刚离开画面时终止。 |
| `tg-follow` | 选填 | (空白字串) | 引用其他元素的计算值。`tg-follow` 的设定值等于目标元素的 `tg-ref` 设定值。**注意**：当设定了 `tg-follow`，同一元素下的 `tg-from`、`tg-to`、`tg-steps`、`tg-step` 以及 `tg-edge` 设定会被忽略。 |
| `tg-ref` | 选填 | (空白字串) | 定义可以被其他元素通过 `tg-follow` 引用的名称。 |
| `tg-step` | 选填 | `0` | 每次递加的数值，如果此值不为 `0`，则会忽略 `tg-steps` 的设置。 |
| `tg-map` | 选填 | (空白字符串) | 将一个值映射至另一个值。格式：`value: newValue; value2: newValue2`。也支持同时将多个值映射至另一个值：`value,value2,value3: newValue` |
| `tg-filter` | 选填 | (空白字符串) | 仅当滚动值在列表当中时才触发，格式：`1,3,5,7,9`。默认情况下，过滤模式是 `retain`（保留值），在设定值末端加入 `!` 符号可以将模式切换为 `exact`（绝对）。关于两个模式的区别，请参考后续的内容。 |
| `tg-edge` | 选填 | cover | 计算滚动值的起始点。`cover` 代表画面外至画面外，即在元素进入画面时即开始计算；`inset` 代表在元素完整进入画面时开始计算，在刚离开画面时终止。 |
| `tg-follow` | 选填 | (空白字符串) | 引用其他元素的计算值。`tg-follow` 的设定值等于目标元素的 `tg-ref` 设定值。**注意**：当设定了 `tg-follow`，同一元素下的 `tg-from`、`tg-to`、`tg-steps`、`tg-step` 以及 `tg-edge` 设置会被忽略。 |
| `tg-ref` | 选填 | (空白字符串) | 定义可以被其他元素通过 `tg-follow` 引用的名称。 |

## 映射 (Value Mapping)

数字并不适用于所有情况。例如，我们希望在卷动页面的时候更改文字颜色，这个时候 `tg-map` 属性就派上用场了。
数字并不适用于所有情况。例如，我们希望在滚动页面的时候更改文字颜色，这个时候 `tg-map` 属性就派上用场了。

以下例子示范如何根据下表的规则更新文字颜色：

Expand Down Expand Up @@ -86,7 +86,7 @@

<style>
body {
padding: 100vh 0; /* 确保页面有足够空间卷动 */
padding: 100vh 0; /* 确保页面有足够空间滚动 */
}
#heading {
Expand Down Expand Up @@ -120,7 +120,7 @@

<style>
body {
padding: 100vh 0; /* 确保页面有足够空间卷动 */
padding: 100vh 0; /* 确保页面有足够空间滚动 */
}
#heading {
Expand All @@ -131,7 +131,7 @@

## `tg-filter` 的模式

`tg-filter` 有两个模式，预设是 `retain`，另一个设定值是 `exact`。为了更好的说明差异，请参阅以下例子：
`tg-filter` 有两个模式，默认是 `retain`，另一个设定值是 `exact`。为了更好的说明差异，请参阅以下例子：

```html
<h1
Expand All @@ -148,7 +148,7 @@

<style>
body {
padding: 100vh 0; /* 确保页面有足够空间卷动 */
padding: 100vh 0; /* 确保页面有足够空间滚动 */
}
#heading {
Expand Down

0 comments on commit 3831e95

Please sign in to comment.