Simple jQuery plugin for 3d Hover effect

Last update: Jan 4, 2023

Related tags

Overview

jQuery Hover3d

jQuery Hover3d is a simple hover script for creating 3d hover effect. It was my experiment on exploring CSS3 3d transform back in 2015 on Codepen 3D hover plane effect.

The idea is transforming the element into 3d space using CSS3 transform, playing with translateZ for spacing the elements, and detecting mouse movement to change the transform value

Demo

Check out the demo

Usage

Include jQuery, and jquery.hover3d.min.js within your HTML

HTML

<script src="jquery.min.js"></script>
<script src="jquery.hover3d.min.js"></script>

There is a minimal markup required, the element container and element that will be transformed into 3d card

<div class="project">
	<div class="project__card">
		<!-- Content element goes here -->
	</div>
</div>

CSS

There is no special CSS file to be included, you can write your own CSS and playing with transform on child elements. However there is helper class that will be added when hovering in and out.

/* This class can be replaced using options */
.hover-in{
	transition: .3s ease-out;
}
.hover-out{
	transition: .3s ease-in;
}

JS

Next step is init the plugin on .project and give the selector element that will be transformed, in this case it's project__card.

$(".project").hover3d({
	selector: ".project__card"
});

Options

Option	Type	Default	Description
selector	string	null	Selector for element that will be the 3d card
perspective	integer	1000	Perspective value for 3d space
sensitivity	integer	20	Mouse movement sensitivity, larger number is less sensitive
invert	boolean	false	Default behavior is the element will follow the mouse, look like it facing the mouse
shine	boolean	false	Add shining layer
hoverInClass	string	hover-in	Helper class when mouse hover in the element, will be removed after 300ms
hoverOutClass	string	hover-out	Helper class when mouse hover Out the element, will be removed after 300ms
hoverClass	string	hover-3d	Helper class when the mouse is hovering the element

Compatibility

All browser that support 3d transform and perspective. You can check it on caniuse.com

Comments

Jitter Bug

Hi, im using chrome.

when i hover over the element i have made the card, the hover isnt smooth, it jitters really bad. is there something that can cause jitters?

this is my code: ( I have the classes stated in the docs already in) Archive.zip

JS: $(".film_3d_wrapper").hover3d({ selector: ".film_3d", perspective: 1000, shine: false });

Its not letting me upload my html so i will attach it in a .zip

see my video: jitterbug.zip

opened by joebentaylor 13
Multiple elements

Is it possible to get this working out the box with multiple elements without multiple instances? It seems that when called, on hover of one element, it applies the hover to all elements at the same time.

opened by richgcook 5
Full screen visibility on a 5k imac

I am having the problem when i add the shine to the banner. When i hover this a couple of times it giving me stripes on my screen.

I have the latest version of "hover3d". In the attachment is a screenshot of how it looks.

The pink squire is the point where it breaks.

opened by stefanreimert 3
Odd behavior in Safari

This plugin is great! Definitely makes the screen pop. However, I've noticed some odd behavior in Safari. It seems project__cards are being overlayed by the element used to create the shine effect.

opened by anoveskey 2
Support for for multiple elements without an inner wrapper
I'm finding it difficult to use this plugin for alot of cases I have in my markup for a project I'm doing. In my html, I have some server side generated html like this....

<div class="items"> <div class="item-to-hover">.....</div> <div class="item-to-hover">.....</div> <div class="item-to-hover">.....</div> </div>

For layout and design reasons, I don't want an inner div on the "item-to-hover" divs. This prevents me from using this plugin because if I do the following, all of the items in "items" hover at the same time... $(".items").hover3d({ selector: ".item-to-hover" });

I can fix this locally by editing the plugin on line 30 to be $card = settings.selector ? $(this).find(settings.selector) : $(this);

Now I can just do the following without needing to specify a selector option $(.item-to-hover).hover3d();

Which seems to solve my problem, but I'm wondering if there is a built in option that does this that I'm not aware of, or if this will cause an issue I haven't thought of.

Thanks
opened by ianchouinard 0

Releases(1.1.0)

1.1.0(Feb 8, 2017)

This update bring new hover logic and fixing jitter effect caused by child element interrupting mousemove event and add bower support
Source code(tar.gz)
Source code(zip)

Owner

Rian Ariona

Frontend Engineer @iCreativeLabs

GitHub

A motion hover effect for a background grid of images.

Image Grid Motion Effect A motion hover effect for a background grid of images. Article on Codrops Demo Installation Install dependencies: npm install

118 Dec 31, 2022

Demos for the tutorial on how to achieve an interactive mouseover/hover effect

Interactive Hover Effects with Three.js A simple tutorial on how to achieve an interactive mouseover/hover effect on images in some easy steps. Articl

246 Dec 27, 2022

magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet

magneticHover magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet. Examples https://codesandbox

35 Nov 30, 2022

👓 Parallax tilt hover effect for React JS - tilt.js

React.js - Tilt.js React version of tilt.js Demo https://vx-demo.now.sh/gallery Install yarn: yarn add react-tilt npm: npm install --save react-tilt U

340 Dec 23, 2022

Pure CSS Image Hover Effect Library

imagehover.css A Scaleable & Light Image Hover CSS Library Imagehover.css is a lovingly crafted CSS library allowing you to easily implement scaleable

1.8k Dec 21, 2022

A set of buttons with a magnetic interaction and a hover effect.

Magnetic Buttons A small set of magnetic buttons with some fun hover animations. Inspired by the button animation seen on Cuberto. Article on Codrops

405 Dec 24, 2022

Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hover.

Crosshair Mouse Cursor Distortion Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hov

33 Sep 23, 2022

A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.

Image Tilt Effect A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to c

571 Nov 21, 2022

Liquideffect - Javascript Library for creating liquid effect on image and RGB effect on mouse direction.

LiquidEffect Javascript Library for creating liquid effect on image and RGB effect on mouse direction. Demo https://liquideffect.netlify.app/ Dependen

8 May 6, 2022

Warp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect.

Warp drive jQuery plugin (jquery-warpdrive-plugin) Preview Description Warp drive is a lightweight jQuery plugin that helps you create a cool, interac

51 Nov 15, 2022

A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.

jQuery GRIDDER 1.4.2 ======= A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images. We have all

455 Nov 6, 2022

Create a beautiful 3D tilted effect on scroll with jQuery Tilted Page Scroll plugin

#Tilted Page Scroll by Pete R. Create a beautilful 3D tilted scrolling effect for your website with jQuery Tilted Page Scroll. Created by Pete R., Fou

321 Sep 18, 2022

fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.

What is fakeLoader.js fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulat

721 Dec 6, 2022

Simple jQuery plugin for 3d Hover effect

Related tags

Overview

jQuery Hover3d

Demo

Usage

HTML

CSS

JS

Options

Compatibility

Comments

Jitter Bug

Multiple elements

Full screen visibility on a 5k imac

Odd behavior in Safari

Support for for multiple elements without an inner wrapper

Releases(1.1.0)

1.1.0(Feb 8, 2017)