@fiddle-digital/string-tune 0.0.55 → 0.0.57
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/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/readme.md +33 -8
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fiddle-digital/string-tune",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.57",
|
|
4
4
|
"description": "StringTune is a cutting-edge JavaScript library designed to deliver high-performance, modular web effects. Whether you're looking to add smooth parallax scrolling, dynamic cursor interactions, progress tracking, or autoplay videos, StringTune empowers developers with a powerful, attribute-driven approach. It simplifies the creation of visually captivating websites while remaining intuitive for both beginner and advanced developers.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"scroll",
|
package/readme.md
CHANGED
|
@@ -52,18 +52,20 @@ In a world of constantly evolving web experiences, **StringTune** helps you stay
|
|
|
52
52
|
|
|
53
53
|
### Example Use Case
|
|
54
54
|
|
|
55
|
+
If you're using a CDN, simply include the script in your HTML:
|
|
56
|
+
|
|
55
57
|
```html
|
|
56
|
-
<
|
|
57
|
-
|
|
58
|
-
Welcome to StringTune!
|
|
59
|
-
</div>
|
|
60
|
-
<div class="cursor-item" string="cursor|magnetic" string-cursor-target="target">
|
|
61
|
-
Hover over me!
|
|
62
|
-
</div>
|
|
63
|
-
</div>
|
|
58
|
+
<script src="https://unpkg.com/@fiddle-digital/string-tune@latest/dist/index.js"></script>
|
|
59
|
+
```
|
|
64
60
|
|
|
61
|
+
Or, if you're working with a modern JavaScript project, install it via npm:
|
|
62
|
+
|
|
63
|
+
```sh
|
|
64
|
+
npm install @fiddle-digital/string-tune
|
|
65
65
|
```
|
|
66
66
|
|
|
67
|
+
Once installed, you need to register the module and start the library.
|
|
68
|
+
|
|
67
69
|
```javascript
|
|
68
70
|
const stringTune = StringTune.getInstance();
|
|
69
71
|
stringTune.use(StringParallax);
|
|
@@ -72,6 +74,29 @@ stringTune.start(60); // Start with 60 FPS
|
|
|
72
74
|
|
|
73
75
|
```
|
|
74
76
|
|
|
77
|
+
⚠ Note: When using CDN, you must reference the full namespace:
|
|
78
|
+
```javascript
|
|
79
|
+
const stringTune = StringTune.StringTune.getInstance(); // Full namespace for CDN users
|
|
80
|
+
stringTune.use(StringTune.StringParallax);
|
|
81
|
+
stringTune.use(StringTune.StringMagnetic);
|
|
82
|
+
stringTune.start(60);
|
|
83
|
+
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
And finally we make the elements work
|
|
87
|
+
|
|
88
|
+
```html
|
|
89
|
+
<div class="example-container">
|
|
90
|
+
<div class="parallax-item" string="parallax" string-factor="0.8">
|
|
91
|
+
Welcome to StringTune!
|
|
92
|
+
</div>
|
|
93
|
+
<div class="cursor-item" string="magnetic" string-cursor-target="target">
|
|
94
|
+
Hover over me!
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
|
|
98
|
+
```
|
|
99
|
+
|
|
75
100
|
### When to Use StringTune
|
|
76
101
|
|
|
77
102
|
- To create visually appealing websites with minimal effort.
|