Skip to content

Commit 468df02

Browse files
ahkambohahkamboh
committed
cdns@latest
1 parent 99b2d01 commit 468df02

File tree

2 files changed

+138
-1
lines changed

2 files changed

+138
-1
lines changed

‎README.md‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,38 @@ import CaptureText from "@/components/animatios/CaptureText";
5555
- `speed` (optional): Animation speed (default: `0.7`).
5656
- `className` (optional): Custom CSS class names.
5757

58+
### Using Cdn
59+
60+
```html
61+
<!DOCTYPE html>
62+
<html lang="en">
63+
<head>
64+
<meta charset="UTF-8" />
65+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66+
<title>Capture Text Animation</title>
67+
<style>
68+
body {
69+
font-family: Arial, sans-serif;
70+
display: flex;
71+
justify-content: center;
72+
align-items: center;
73+
height: 100vh;
74+
background-color: #f0f0f0;
75+
}
76+
</style>
77+
</head>
78+
<body>
79+
80+
<h1 class="CaptureText"></h1>
81+
82+
<script src="https://cdn.jsdelivr.net/gh/ahkamboh/animatio@main/cdns%40latest/capturetext.js"></script>
83+
<script>
84+
const animatio = new CaptureText(["Capture", "Animation"], 0.7);
85+
</script>
86+
</body>
87+
</html>
88+
```
89+
5890
### 2. **DanceDualText**
5991

6092
Creates a dance-like animation where letters move in from different directions.
@@ -83,6 +115,39 @@ import DanceDualText from "@/components/animatios/DanceDualText";
83115
- `speed` (optional): Animation speed (default: `0.7`).
84116
- `direction` (optional): Choose between `'top'` or `'bottom'`.
85117

118+
### Using Cdn
119+
120+
```html
121+
<!DOCTYPE html>
122+
<html lang="en">
123+
<head>
124+
<meta charset="UTF-8" />
125+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
126+
<title>DanceDual Text Animation</title>
127+
<style>
128+
body {
129+
font-family: Arial, sans-serif;
130+
display: flex;
131+
justify-content: center;
132+
align-items: center;
133+
height: 100vh;
134+
background-color: #f0f0f0;
135+
}
136+
</style>
137+
</head>
138+
<body>
139+
140+
<h1 class="DanceDualText"></h1>
141+
142+
<script src="https://cdn.jsdelivr.net/gh/ahkamboh/animatio@main/cdns%40latest/dancedualtext.js"></script>
143+
<script>
144+
const animatio = new DanceDualText(["Dance Dual", "Animation"], 0.7, "top");
145+
</script>
146+
</body>
147+
</html>
148+
149+
```
150+
86151
### 3. **DanceText**
87152

88153
A dance-like animation where letters come in from the top or bottom.
@@ -111,6 +176,39 @@ import DanceText from "@/components/animatios/DanceText";
111176
- `speed` (optional): Animation speed (default: `0.5`).
112177
- `direction` (optional): `'top'` or `'bottom'`.
113178

179+
### Using Cdn
180+
181+
```html
182+
<!DOCTYPE html>
183+
<html lang="en">
184+
<head>
185+
<meta charset="UTF-8" />
186+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
187+
<title>Dance Text Animation</title>
188+
<style>
189+
body {
190+
font-family: Arial, sans-serif;
191+
display: flex;
192+
justify-content: center;
193+
align-items: center;
194+
height: 100vh;
195+
background-color: #f0f0f0;
196+
}
197+
</style>
198+
</head>
199+
<body>
200+
201+
<h1 class="DanceText"></h1>
202+
203+
<script src="https://cdn.jsdelivr.net/gh/ahkamboh/animatio@main/cdns%40latest/dancetext.js"></script>
204+
<script>
205+
const animatio = new DanceText(["Dance Text", "Animation"], 0.5, "bottom")
206+
</script>
207+
</body>
208+
</html>
209+
210+
```
211+
114212
### 4. **FlowingText**
115213

116214
Creates a smooth flow-in animation for each letter.
@@ -138,6 +236,39 @@ import FlowingText from "@/components/animatios/FlowingText";
138236
- `speed` (optional): Animation speed (default: `0.7`).
139237
- `className` (optional): Custom styles.
140238

239+
### Using Cdn
240+
241+
```html
242+
<!DOCTYPE html>
243+
<html lang="en">
244+
<head>
245+
<meta charset="UTF-8" />
246+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
247+
<title>Flowing Text Animation</title>
248+
<style>
249+
body {
250+
font-family: Arial, sans-serif;
251+
display: flex;
252+
justify-content: center;
253+
align-items: center;
254+
height: 100vh;
255+
background-color: #f0f0f0;
256+
}
257+
</style>
258+
</head>
259+
<body>
260+
261+
<h1 class="FlowingText"></h1>
262+
263+
<script src="https://cdn.jsdelivr.net/gh/ahkamboh/animatio@main/cdns%40latest/flowingtext.js"></script>
264+
<script>
265+
const animatio = new FlowingText(["Flowing Text", "Animation"], 0.8);
266+
</script>
267+
</body>
268+
</html>
269+
270+
```
271+
141272
### 5. **GlideText**
142273

143274
Letters glide in from the selected direction: top, bottom, left, right, vertical, or horizontal.
@@ -166,6 +297,12 @@ import GlideText from "@/components/animatios/GlideText";
166297
- `speed` (optional): Animation speed (default: `1`).
167298
- `direction` (optional): `'top'`, `'bottom'`, `'left'`, `'right'`, `'horizontal'`, `'vertical'`.
168299

300+
### Using Cdn
301+
302+
```html
303+
304+
```
305+
169306
### 6. **LetterPopText**
170307

171308
Each letter pops in with scaling and fading effects.

‎cdns@latest/glidetext.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)