Skip to content

Commit 42b98b9

Browse files
CGWebDev2003CGWebDev2003
authored
Merge pull request #2 from CGWebDev2003/main
[1.0.0] Final
2 parents edefc50 + 50b355d commit 42b98b9

21 files changed

+538
-5
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

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

‎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: 87 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,89 @@
11
# Neptune Animations
22

3-
![readme_banner_animations](https://github.com/neptune-css/neptune-animations/assets/122671813/aa24f5ed-9392-427c-b458-30f2607fb6b6)
3+
![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: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
2+
3+
/* Fading Animations */
4+
@import url('./src/css/neptune_fade_in.min.css');
5+
@import url('./src/css/neptune_fade_out.min.css');
6+
7+
/* Rotate Animations */
8+
@import url(./src/css/neptune_rotate.min.css);
9+
10+
/* Scaling Animations */
11+
@import url('./src/css/neptune_scale.min.css');
12+
13+
/* 3D Animations */
14+
@import url('./src/css/neptune_3d.min.css');
15+
16+
/* Other Animations */
17+
@import url('./src/css/neptune_other.min.css');
18+
19+
:root {
20+
--nep-animation-duration: 1s;
21+
--nep-animation-delay: 0s;
22+
--nep-animation-direction: ;
23+
--nep-animation-fillmode: forwards;
24+
}

‎neptune-animations.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
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+
*/
15+
export default class NeptuneAnimate {
16+
constructor(element, animationClass) {
17+
this.element = element;
18+
this.animationClass = animationClass;
19+
this.animationEndEvent = this.getAnimationEndEvent();
20+
this.stop = this.startAnimation();
21+
22+
this.element.addEventListener(this.animationEndEvent, this.handleAnimationEnd.bind(this));
23+
}
24+
25+
getAnimationEndEvent() {
26+
const el = document.createElement("div");
27+
const animations = {
28+
animation: "animationend",
29+
OAnimation: "oAnimationEnd",
30+
MozAnimation: "animationend",
31+
WebkitAnimation: "webkitAnimationEnd"
32+
};
33+
34+
for (const key in animations) {
35+
if (el.style[key] !== undefined) {
36+
return animations[key];
37+
}
38+
}
39+
40+
return "animationend";
41+
}
42+
43+
handleAnimationEnd() {
44+
this.element.classList.remove(this.animationClass);
45+
this.element.removeEventListener(this.animationEndEvent, this.handleAnimationEnd);
46+
}
47+
48+
startAnimation() {
49+
this.element.classList.add(this.animationClass);
50+
}
51+
52+
stopAnimation() {
53+
this.element.classList.remove(this.animationClass);
54+
}
55+
}

‎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.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/* 3D Animations */
2+
/* Flip X */
3+
.nep-flip-x {
4+
animation: nep-flip-x var(--nep-animation-duration) var(--nep-animation-delay) var(--nep-animation-direction) var(--nep-animation-fillmode);
5+
}
6+
7+
@keyframes nep-flip-x {
8+
50% { transform: rotateX(180deg);}
9+
100% { transform: rotateX(180deg);}
10+
}
11+
12+
/* Flip Y */
13+
.nep-flip-y {
14+
animation: nep-flip-y var(--nep-animation-duration) var(--nep-animation-delay) var(--nep-animation-direction) var(--nep-animation-fillmode);
15+
}
16+
17+
@keyframes nep-flip-y {
18+
50% { transform: rotateY(180deg);}
19+
100% { transform: rotateY(180deg);}
20+
}

0 commit comments

Comments
 (0)