Skip to content

Commit d6e03d2

Browse files
CGWebDev2003CGWebDev2003
committed
[1.0.0] Finished
1 parent 5c8b32d commit d6e03d2

16 files changed

+129
-40
lines changed

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
/node_modules/
1+
.vscode
2+
node_modules

‎CHANGELOG.md‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77

88
## [Released]
99

10+
## [1.0.0] - 23-06-17
11+
12+
### Added
13+
14+
- Fading Animations
15+
- Rotate Animations
16+
- Scaling Animations
17+
- 3D Animations
18+
- Other Animations
19+
1020
## [0.0.1] - 2023-06-17
1121

12-
Init project
22+
Init project

‎README.md‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,89 @@
11
# Neptune Animations
22

33
![readme_banner_animations](https://github.com/neptune-css/neptune-animations/assets/122671813/71d626d6-7962-455c-aa6d-6cdd8ea98af6)
4+
5+
## Install
6+
7+
### Using NPM
8+
9+
To install Neptune Animations as a NPM package, run the following commands:
10+
11+
```bash
12+
npm i neptunecss-animations
13+
```
14+
15+
Now import Neptune Animations.
16+
17+
#### yourOwn.css
18+
19+
```css
20+
@import url('/path/to/your/neptune-animations.min.css');
21+
```
22+
23+
#### yourOwn.js
24+
25+
```javascript
26+
import NeptuneAnimate from "/path/to/your/neptune-animations.min.js"
27+
```
28+
29+
### Using CDN
30+
To use Neptune Animations with CDN Link, put this line of code in your header:
31+
32+
```html
33+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/neptunecss-animations@latest/neptune-animations.min.css">
34+
```
35+
And this one at the bottom of yout body:
36+
37+
```html
38+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/neptunecss-animations@latest/neptune-animations.min.js">
39+
```
40+
41+
##### Example
42+
43+
```html
44+
<!DOCTYPE html>
45+
<html lang="en">
46+
<head>
47+
<meta charset="UTF-8">
48+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
49+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
50+
51+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/neptunecss@latest/neptune.min.css">
52+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/neptunecss-animations@latest/neptune-animations.min.css">
53+
54+
<title>Neptune Animations Example Page</title>
55+
</head>
56+
<body>
57+
<!-- Your Content -->
58+
59+
<script src="https://cdn.jsdelivr.net/npm/neptunecss-js@latest/neptune.min.js"></script>
60+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/neptunecss-animations@latest/neptune-animations.min.js">
61+
</body>
62+
</html>
63+
```
64+
65+
## Customization
66+
67+
You can customize the following variables in CSS:
68+
69+
```css
70+
--nep-animation-duration: .5s; /* Deafault is 1s */
71+
--nep-animation-delay: .5s; /* Default is 0s */
72+
--nep-animation-direction: linear; /* Default is null */
73+
--nep-animation-fillmode: infinite; /* Default is forwards */
74+
```
75+
76+
To learn more read the [Docs](https://neptune-css.gitbook.io/neptune-css-docs/plugins/neptune-animations).
77+
78+
## Documentation
79+
80+
You can read the docs [here](https://neptune-css.gitbook.io/neptune-css-docs/plugins/neptune-animations).
81+
82+
## Snippets Extension
83+
Download it in [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=NeptuneCSS.neptunecss-snippets) or checkout on [GitHub](https://github.com/neptune-css/neptune-snippets).
84+
85+
## License
86+
[MIT LICENSE](https://github.com/neptune-css/neptune-animations/blob/main/LICENSE)
87+
88+
## Author
89+
[Colin Grahm](https://github.com/CGWebDev2003)

‎neptune-animations.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11

22

33
/* Fading Animations */
4-
@import url('./src/css/neptune_fade_in.css');
5-
@import url('./src/css/neptune_fade_out.css');
4+
@import url('./src/css/neptune_fade_in.min.css');
5+
@import url('./src/css/neptune_fade_out.min.css');
66

77
/* Rotate Animations */
8-
@import url(./src/css/neptune_rotate.css);
8+
@import url(./src/css/neptune_rotate.min.css);
99

1010
/* Scaling Animations */
11-
@import url('./src/css/neptune_scale.css');
11+
@import url('./src/css/neptune_scale.min.css');
1212

1313
/* 3D Animations */
14-
@import url('./src/css/neptune_3d.css');
14+
@import url('./src/css/neptune_3d.min.css');
1515

1616
/* Other Animations */
17-
@import url('./src/css/neptune_other.css');
17+
@import url('./src/css/neptune_other.min.css');
1818

1919
:root {
2020
--nep-animation-duration: 1s;

‎neptune-animations.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,17 @@
1+
/**
2+
* @name NeptuneAnimate
3+
* @class
4+
*
5+
* @param {string} element - Target element
6+
* @param {string} animationClass - Class of animation
7+
*
8+
* @example
9+
*
10+
* const myElement = document.getElementById("test");
11+
* const neptuneAnimate = new NeptuneAnimate(myElement, "nep-pulse");
12+
* neptuneAnimate.startAnimation();
13+
*
14+
*/
115
export default class NeptuneAnimate {
216
constructor(element, animationClass) {
317
this.element = element;

‎neptune-animations.min.css‎

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

‎neptune-animations.min.js‎

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

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"name": "neptune-animations",
3-
"version": "0.0.1",
2+
"name": "neptunecss-animations",
3+
"version": "1.0.0",
44
"description": "The official Neptune animation library",
55
"main": "neptune-animation.js",
66
"scripts": {

‎src/css/neptune_3d.min.css‎

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

‎src/css/neptune_fade_in.min.css‎

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

0 commit comments

Comments
 (0)