situs-kit 0.1.3 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -21
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -21,16 +21,9 @@ const split = new SplitText("#my-text", {
|
|
|
21
21
|
type: ["chars", "words", "lines"],
|
|
22
22
|
});
|
|
23
23
|
|
|
24
|
-
//
|
|
25
|
-
split.
|
|
26
|
-
|
|
27
|
-
[
|
|
28
|
-
{ opacity: 0, transform: "translateY(100%)" },
|
|
29
|
-
{ opacity: 1, transform: "translateY(0)" },
|
|
30
|
-
],
|
|
31
|
-
{ duration: 400, delay: i * 30, easing: "ease", fill: "both" }
|
|
32
|
-
);
|
|
33
|
-
});
|
|
24
|
+
split.chars; // HTMLElement[]
|
|
25
|
+
split.words; // HTMLElement[]
|
|
26
|
+
split.lines; // HTMLElement[]
|
|
34
27
|
```
|
|
35
28
|
|
|
36
29
|
### Options
|
|
@@ -39,7 +32,7 @@ split.chars.forEach((char, i) => {
|
|
|
39
32
|
new SplitText(element, {
|
|
40
33
|
type: ["chars", "words", "lines"], // which levels to split
|
|
41
34
|
tag: "span", // wrapper element tag
|
|
42
|
-
mask:
|
|
35
|
+
mask: ["chars", "lines"], // which levels to mask
|
|
43
36
|
resize: true, // auto-reflow lines on resize
|
|
44
37
|
style: {
|
|
45
38
|
chars: { color: "red" },
|
|
@@ -60,7 +53,7 @@ new SplitText(element, {
|
|
|
60
53
|
|--------|------|---------|-------------|
|
|
61
54
|
| `type` | `string \| string[]` | `["chars", "words", "lines"]` | Split granularity |
|
|
62
55
|
| `tag` | `string` | `"span"` | Wrapper element tag |
|
|
63
|
-
| `mask` | `boolean \|
|
|
56
|
+
| `mask` | `boolean \| SplitType[]` | `false` | Create overflow-hidden wrappers per split type |
|
|
64
57
|
| `resize` | `boolean` | `true` | Auto-reflow lines on window resize |
|
|
65
58
|
| `style` | `object` | — | Inline styles per split type |
|
|
66
59
|
| `class` | `object` | — | CSS classes per split type |
|
|
@@ -124,21 +117,15 @@ Inline elements like `<a>`, `<em>`, `<strong>`, `<u>`, `<i>`, and `<b>` are pres
|
|
|
124
117
|
|
|
125
118
|
### Masking
|
|
126
119
|
|
|
127
|
-
Masks wrap split elements in `overflow: hidden` containers, useful for reveal animations:
|
|
120
|
+
Masks wrap split elements in `overflow: hidden` containers, useful for reveal animations. Like `type`, you specify which split levels to mask:
|
|
128
121
|
|
|
129
122
|
```ts
|
|
130
123
|
const split = new SplitText("#text", {
|
|
131
124
|
type: ["words", "lines"],
|
|
132
|
-
mask: ["lines"],
|
|
125
|
+
mask: ["lines"], // only mask lines
|
|
133
126
|
});
|
|
134
127
|
|
|
135
|
-
//
|
|
136
|
-
split.lines.forEach((line, i) => {
|
|
137
|
-
line.animate(
|
|
138
|
-
[{ transform: "translateY(100%)" }, { transform: "translateY(0)" }],
|
|
139
|
-
{ duration: 500, delay: i * 60, easing: "ease", fill: "both" }
|
|
140
|
-
);
|
|
141
|
-
});
|
|
128
|
+
split.masks.lines; // HTMLElement[] - overflow:hidden wrappers
|
|
142
129
|
```
|
|
143
130
|
|
|
144
131
|
## License
|