Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/myconsciousness/relaxing-waves
Provide a relaxing wave for your website. It is easy to add on your website and you can easily customize the background and color of the waves.
https://github.com/myconsciousness/relaxing-waves
css design javascript library sass wave
Last synced: about 1 month ago
JSON representation
Provide a relaxing wave for your website. It is easy to add on your website and you can easily customize the background and color of the waves.
- Host: GitHub
- URL: https://github.com/myconsciousness/relaxing-waves
- Owner: myConsciousness
- License: apache-2.0
- Created: 2020-09-10T11:23:12.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-09-13T01:46:20.000Z (over 4 years ago)
- Last Synced: 2024-10-19T09:17:39.866Z (3 months ago)
- Topics: css, design, javascript, library, sass, wave
- Language: JavaScript
- Homepage:
- Size: 34.2 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Relaxing Waves
## What is it?
**_Give your website relaxing waves_**
Provide `relaxing waves` for your website.
It is easy to add on your website and you can easily customize the background and color of the waves.
## How To Use
### 1. Download required files
To use `Relaxing Waves`, you need the following JavaScript and CSS files.
- [relaxingWaves.js](https://github.com/myConsciousness/relaxing-waves/blob/master/src/org/thinkit/web/js/relaxingWaves.js)
- [relaxing-waves.css](https://github.com/myConsciousness/relaxing-waves/blob/master/src/org/thinkit/web/css/relaxing-waves.css)
### 2. Import downloaded files on HTML
**_CSS_**
Add the following CSS import within the HTML head tag.
Specify the path to the downloaded `relaxing-waves.css`.
```html
```
**_JavaScript_**
Add the following JavaScript import within the HTML head tag, or at the bottom of body tag.
Specify the path to the downloaded `relaxingWaves.js`.
```html
```
### 3. Add container for Relaxing Waves
Add the following container to any location in the body tag where you want to place waves.
When `relaxingWaves.js` loads, it adds wave elements to all `relaxing-waves-container` elements in the body tag.
> **_Note:_**
> The class name of the container must be `relaxing-waves-container`.
```html
```
## Advanced Options
You can change the background and color of waves to any color by adding the following attribute to an element with the class name `relaxing-waves-container`.
Provides a `wave-background` attribute to change the background color of a wave to any color, and a `wave-color` attribute to change the wave color to any color.
You can change the color to any color by specifying a `color code` for each attribute.
> **_Note:_**
> The color code you specify does not have to start with #.
> The background color of the wave can be specified with the `linear-gradient` function.
```html
```
## License
```
Copyright 2020 Kato Shinya.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License
is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
or implied. See the License for the specific language governing permissions and limitations under
the License.
```
## More Information
`Relaxing Waves` was designed and implemented by Kato Shinya, who works as a freelance developer from Japan.
Regardless of the means or content of communication, I would love to hear from you if you have any questions or concerns. I do not check my email box very often so a response may be delayed, anyway thank you for your interest!
- [Creator Profile](https://github.com/myConsciousness)
- [License](https://github.com/myConsciousness/relaxing-waves/blob/master/LICENSE)
- [File a Bug](https://github.com/myConsciousness/relaxing-waves/issues)