parabox.js v2.0.2
Parabox.js
Rotates your elements in 3D space based on your mouse position.
Demo on Codepen
Usage
Install using NPM
npm install parabox.js
Then, just include it like any other module.
import parabox from 'parabox.js';
In-browser
<!-- NOTE: for selecting specific versions (which you should ALWAYS do in production), see the docs on https://www.jsdelivr.com/ -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/parabox.js/dist/parabox.css">
<script src="https://cdn.jsdelivr.net/npm/parabox.js/dist/parabox.js"></script>
Or, use the files
First, download and build the files.
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.
<link rel="stylesheet" type="text/css" href="./parabox/parabox.css">
<script src="./parabox/parabox.js"></script>
// Optionally, if your environment supports ES modules, you can include Parabox.js as a module
// Via CDN
<script type="module">
import parabox from 'https://cdn.jsdelivr.net/npm/parabox.js/dist/parabox.es.js';
</script>
// Or via file
<script type="module">
import parabox from './parabox.es.js';
</script>
HTML Structure
<div class="parabox-container">
<div class="parabox">
<h1 class="parabox-shift">Hey there! I seem to stand out.</h1>
<p>This content appears flat against the card</p>
</div>
</div>
Each parabox needs to be inside a container with a 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.
<style>
.magnified {
--parabox-magnitude: 5;
}
</style>
<div class="parabox">I'm a normal parabox</div>
<div class="parabox" data-parabox-magnitude="5">The effect of your hover is magnified for me!</div>
<div class="parabox magnified">The effect of your hover is also magnified for me!</div>
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.
<style>
.shiftier {
--parabox-height: 10;
}
</style>
<div class="parabox">
<p class="parabox-shift">I'm a normal-height element.</p>
<p class="parabox-shift shiftier">I appear to stand out further than my siblings!</p>
<p class="parabox-shift" data-parabox-height="0">I appear to be flat against my parent. The same as not having a class of parabox-shift.</p>
</div>
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 file for more details.