Tools for making hover effect using modern CSS 3D transform with mouse move.
A Project By GAMO
Download Github
Get started with ghover.js in your projects. You can either manually install, CDN or use NPM.
$ npm install ghover --save or with CDN https://cdn.jsdelivr.net/gh/GA-MO/g-hover@38cd05a2/lib/ghover.js
Setup DOM and movement 3D transform effect with these properties.
selector: '', // Your class or id selector for wrapper.
children: [
{
className: '', // Class name for transform
rotate: { x: 0, y: 0, z: 0 }, // Rotate
translate: { x: 0, y: 0, z: 0 }, // Translate
transition: 'all 0.2s ease', // Transition default is 'all 0.2s ease'
}
]
Call function GHover() after setup properties.
// Single
var setup = {
selector: '.box-hover',
children: [
{
className: '.box',
rotate: { x: -5, y: -5, z: 0 },
},
{
className: '.border',
translate: { x: 20, y: 20, z: 0 },
transition: 'all 0.5s ease-in-out',
},
{
className: '.title, .sub-title',
rotate: { x: -10, y: -10, z: 3 },
translate: { x: 30, y: 30, z: 0 },
transition: 'all 0.6s ease',
}
]
};
GHover(setup); // Call function
// Setup with array for multiple layout
var setup = [
{
selector: '.box-hover',
children: [
{
className: '.box',
rotate: { x: -50, y: -25, z: 0 },
},
]
},
{
selector: '.box-hover-2',
children: [
{
className: '.box-2',
rotate: { x: -15, y: 5, z: 0 },
},
]
};
]
GHover(setup); // Call function