Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/josnun/parabox.js
A parallax library to fluff your flat elements
https://github.com/josnun/parabox.js
Last synced: about 1 month ago
JSON representation
A parallax library to fluff your flat elements
- Host: GitHub
- URL: https://github.com/josnun/parabox.js
- Owner: JosNun
- License: mit
- Created: 2018-07-31T00:32:40.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-08-03T12:07:41.000Z (over 6 years ago)
- Last Synced: 2024-03-26T14:21:15.637Z (9 months ago)
- Language: JavaScript
- Size: 103 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: License
Awesome Lists containing this project
README
# Parabox.js
Rotates your elements in 3D space based on your mouse position.
### [Demo on Codepen](https://codepen.io/FracturedLoop/full/VBXpbj/)
## Usage
### Install using NPM
```
npm install parabox.js
```
Then, just include it like any other module.
```
import parabox from 'parabox.js';
```
### In-browser
```html
```
### Or, use the files
First, download and build the files.
```bash
git clone https://github.com/JosNun/parabox.js.git
npm install
npm run build
```
Then get the files from the `dist/` and put them in your project and link 'em up.
```html
```
```html
// Optionally, if your environment supports ES modules, you can include Parabox.js as a module
// Via CDN
import parabox from 'https://cdn.jsdelivr.net/npm/parabox.js/dist/parabox.es.js';
// Or via file
import parabox from './parabox.es.js';
```
### HTML Structure
```html
Hey there! I seem to stand out.
This content appears flat against the card
```
Each parabox needs to be inside a container with a [perspective](https://developer.mozilla.org/en-US/docs/Web/CSS/perspective). The `parabox-container` class does this, and is provided for convenience, but is not necessary if another parent has a perspective.
Parabox children with the class `parabox-shift` will move based on the tilt of the parent parabox.
### Initialization
To get everything running, you just need to initialize parabox.
```
parabox.init();
```
If you add Parabox elements after initializing Parabox, you will need to rerun the init function for them to work.
### Options
#### Magnitude
The amount that a parabox element shifts can be adjusted by adding a magnitude value, either inline via data attributes, or with custom CSS properties. Supplying a negative number inverts the effect. Default value is 1.
```html
.magnified {
--parabox-magnitude: 5;
}
I'm a normal parabox
The effect of your hover is magnified for me!
The effect of your hover is also magnified for me!
```
#### Height
Shifted elements can have their "height" adjusted, so they appear closer or further to the parabox when shifted. Negative values invert the element translation. Default is 5.
```html
.shiftier {
--parabox-height: 10;
}
I'm a normal-height element.
I appear to stand out further than my siblings!
I appear to be flat against my parent. The same as not having a class of parabox-shift.
```
## Developing
Clone the repo
```
git clone https://github.com/JosNun/parabox.js.git
```
Install the dependencies
```
npm install
```
Run the dev server to rebuild when the files in `src/` change.
```
npm run dev
```
Pull requests welcome :)
## License
This project is licensed under the MIT License - see the [LICENSE](https://github.com/JosNun/parabox.js/blob/master/License) file for more details.