Elemental Dimensionizer
A small jQuery-based function for transforming elements in multiple dimensions based on cursor position.
VIEW DEMO: https://greyforestmedia.github.io/ElementalDimensionizer/
OPTIONS
- dimension-x-inverse: invert x rotation
- dimension-y-inverse: invert y rotation
- dimension-x-sensitivity: sensitivity of x rotation
- dimension-y-sensitivity: sensitivity of y rotation
USAGE
Create a parent element to hold the layers
<div id="element">
Apply "element-dimension" class to desired layers
<h2 class="element-dimension"
Add optional data attributes
data-dimension-x-inverse="true" data-dimension-x-sensitivity="2" data-dimension-y-inverse="false" data-dimension-y-sensitivity="3"
Include layer text/img/etc and close parent element
>Greyforest Elemental Dimensionalizer</h2></div>
Initialize script and target parent element
- element: set ID of parent element that contains layers
- log: true or false for small box to display coordinates legend
<script> ElementalDimensionizer(element, log); </script>