Skip to content

Commit

Permalink
Fix: Jitter effect
Browse files Browse the repository at this point in the history 
* Fix jitter effect caused by child element interrupts the mousemove
event
* Add bower.json
* Update demo markup & style
  • Loading branch information
arionarian committed Feb 8, 2017
1 parent 534fb4e commit f7a352a
Show file tree
Hide file tree
Showing 9 changed files with 200 additions and 95 deletions.
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"vsicons.presets.angular": false
}
28 changes: 28 additions & 0 deletions bower.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
{
"name": "hover3d",
"version": "1.1.0",
"homepage": "https://github.com/ariona/hover3d",
"authors": [
"\"Ariona",
"Rian <rian@ariona.net> (http://ariona.net)\""
],
"description": "Simple jQuery Plugin for Creating 3d Tilt effect",
"main": "\"dist/js/jquery.hover3d.min.js\"",
"keywords": [
"jquery",
"hover",
"hover",
"effect",
"3d",
"hover",
"tilt"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
102 changes: 65 additions & 37 deletions dist/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,18 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="fb-root"></div>
<a href="https://github.com/ariona/hover3d"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>

<div class="site-content">
<div class="align-center">
<img src="images/hover3d.png" width=150 height=121 alt="">
<h1>jQuery Hover3d</h1>
<div class="share">
<span class="fb-like" data-href="http://ariona.github.io/hover3d/" data-width="50" data-layout="standard" data-action="like" data-show-faces="false"></span>
<a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=jQuery Hover3d for creating 3d Hover effect">Tweet</a>
<!-- Place this tag where you want the button to render. -->
<a class="github-button" href="https://github.com/ariona/hover3d" data-icon="octicon-star" data-count-href="/ariona/hover3d/stargazers" data-count-api="/repos/ariona/hover3d#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star ariona/hover3d on GitHub">Star</a>
<!-- Place this tag where you want the button to render. -->
<a class="github-button" href="https://github.com/ariona/hover3d/fork" data-icon="octicon-repo-forked" data-count-href="/ariona/hover3d/network" data-count-api="/repos/ariona/hover3d#forks_count" data-count-aria-label="# forks on GitHub" aria-label="Fork ariona/hover3d on GitHub">Fork</a>
<a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=jQuery Hover3d for creating 3d Hover effect">Tweet</a>
</div>
</div>

Expand All @@ -27,54 +26,84 @@ <h1>jQuery Hover3d</h1>
<p>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</p>


<div class="columns">
<div class="column">
<h2 class="section-title">Demo 1</h2>
<div class="demo demo-1">
<h2 class="section-title">Demo #1 Awesome tilt effect</h2>

<p>Simple hover effect for your project</p>
<div class="project-list">
<div class="project">
<div class="project__card">
<a href="" class="project__image"><img src="http://unsplash.it/600/400?image=189" width=600 height=400 alt=""></a>
<div class="project__detail">
<h2 class="project__title"><a href="#">Project Name</a></h2>
<small class="project__category"><a href="#">Photography</a></small>
</div>
<p>Simple hover effect for your project</p>
<div class="project-list">
<div class="project">
<div class="project__card">
<a href="" class="project__image"><img src="http://unsplash.it/600/400?image=189" width=600 height=400 alt=""></a>
<div class="project__detail">
<h2 class="project__title"><a href="#">Project Name</a></h2>
<small class="project__category"><a href="#">Photography</a></small>
</div>
</div>
</div>

</div>
<div class="column">
<h2 class="section-title">Demo 2</h2>
<p>Creating AppleTV like icon</p>
<div class="movie">
<div class="movie__card">
<div class="layer-1"></div>
<div class="layer-2"></div>
<div class="layer-3"></div>

<div class="project">
<div class="project__card">
<a href="" class="project__image"><img src="http://unsplash.it/600/400?image=129" width=600 height=400 alt=""></a>
<div class="project__detail">
<h2 class="project__title"><a href="#">Project Name</a></h2>
<small class="project__category"><a href="#">Photography</a></small>
</div>
</div>
</div>

<div class="project">
<div class="project__card">
<a href="" class="project__image"><img src="http://unsplash.it/600/400?image=119" width=600 height=400 alt=""></a>
<div class="project__detail">
<h2 class="project__title"><a href="#">Project Name</a></h2>
<small class="project__category"><a href="#">Photography</a></small>
</div>
</div>
</div>

<div class="project">
<div class="project__card">
<a href="" class="project__image"><img src="http://unsplash.it/600/400?image=89" width=600 height=400 alt=""></a>
<div class="project__detail">
<h2 class="project__title"><a href="#">Project Name</a></h2>
<small class="project__category"><a href="#">Photography</a></small>
</div>
</div>
</div>

</div>
</div>


</div>
<div class="demo demo-2">
<div class="columns">
<div class="column">
<h2 class="section-title">Demo #2: AppleTv Icon</h2>
<p>By enabling shine option, you can create appleTV icon like effect. Be creating multiple layer for creating depth effect</p>

<pre>
$(".movie").hover3d({
selector: ".movie__card",
shine: true,
sensitivity: 20,
});</pre>
</div>
<div class="column">
<div class="movie">
<div class="movie__card">
<div class="layer-1"></div>
<div class="layer-2"></div>
<div class="layer-3"></div>
</div>
</div>
</div>
</div>

</div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.1.min.js"><\\/script>')</script>
<!-- Place this tag right after the last button or just before your close body tag. -->
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=158793794211775";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script>window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
Expand All @@ -96,8 +125,7 @@ <h2 class="section-title">Demo 2</h2>
<script>
$(document).ready(function(){
$(".project").hover3d({
selector: ".project__card",
shine: false,
selector: ".project__card"
});

$(".movie").hover3d({
Expand Down
29 changes: 19 additions & 10 deletions dist/js/jquery.hover3d.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/*
jQuery Hover3d
=================================================
Version: 1.0.0
Version: 1.1.0
Author: Rian Ariona
Website: http://ariona.net
Docs: http://ariona.github.io/hover3d
Expand All @@ -28,6 +28,9 @@ Issues: http://github.com/ariona/hover3d/issues

var $this = $(this),
$card = $this.find(settings.selector);
currentX = 0;
currentY = 0;


if( settings.shine ){
$card.append('<div class="shine"></div>');
Expand All @@ -52,30 +55,35 @@ Issues: http://github.com/ariona/hover3d/issues
left : 0,
bottom : 0,
right : 0,
transform : 'translateZ(1px)',
"z-index" : 9
});

// Mouse Enter function, this will add hover-in
// Class so when mouse over it will add transition
// based on hover-in class
function enter(){
function enter(event){
$card.addClass(settings.hoverInClass+" "+settings.hoverClass);

currentX = currentY = 0;
setTimeout(function(){
$card.removeClass(settings.hoverInClass);
}, 1000);
}

// Mouse movement Parallax effect
function move(event){
var w = $this.innerWidth(),
h = $this.innerHeight(),
ax = settings.invert ? ( w / 2 - event.offsetX)/settings.sensitivity : -( w / 2 - event.offsetX)/settings.sensitivity,
ay = settings.invert ? -( h / 2 - event.offsetY)/settings.sensitivity : ( h / 2 - event.offsetY)/settings.sensitivity;
dy = event.offsetY - h / 2,
dx = event.offsetX - w / 2,

var w = $card.innerWidth(),
h = $card.innerHeight(),
currentX = Math.round(event.pageX - $card.offset().left),
currentY = Math.round(event.pageY - $card.offset().top),
ax = settings.invert ? ( w / 2 - currentX)/settings.sensitivity : -( w / 2 - currentX)/settings.sensitivity,
ay = settings.invert ? -( h / 2 - currentY)/settings.sensitivity : ( h / 2 - currentY)/settings.sensitivity,
dx = currentX - w / 2,
dy = currentY - h / 2,
theta = Math.atan2(dy, dx),
angle = theta * 180 / Math.PI - 90;


if (angle < 0) {
angle = angle + 360;
Expand Down Expand Up @@ -103,6 +111,7 @@ Issues: http://github.com/ariona/hover3d/issues
});
setTimeout( function(){
$card.removeClass(settings.hoverOutClass+" "+settings.hoverClass);
currentX = currentY = 0;
}, 1000 );
}

Expand All @@ -125,4 +134,4 @@ Issues: http://github.com/ariona/hover3d/issues

};

}(jQuery));
}(jQuery));
2 changes: 1 addition & 1 deletion dist/js/jquery.hover3d.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

45 changes: 29 additions & 16 deletions dist/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
box-sizing: border-box; }

body {
font-family: "Noto Sans", sans-serif;
font-family: karla, sans-serif;
line-height: 1.8;
color: #666; }

Expand Down Expand Up @@ -44,28 +44,42 @@ a {
vertical-align: middle !important;
width: 130px !important; }

.demo {
margin: 100px 0; }
.demo h2 {
margin-bottom: 10px;
line-height: 1; }

.demo-1 {
text-align: center; }

.demo-2 {
text-align: left; }
.demo-2 .section-title {
text-align: left; }

.columns:after {
content: " ";
display: block;
clear: both; }

.columns .column {
width: 50%;
float: left; }
float: left;
min-height: 1px; }

.columns h2 {
margin-bottom: 20px;
line-height: 1; }

.columns p {
text-align: center;
margin-bottom: 50px; }
pre {
background-color: #fbfbfb;
padding: 10px; }

.project {
width: 90%;
float: left; }
.project:not(:last-child) {
margin-right: 4%; }
width: 50%;
float: left;
padding: 15px; }
.project-list:after {
content: " ";
display: block;
Expand All @@ -90,7 +104,6 @@ a {
opacity: 0; }
.project__card {
position: relative;
will-change: transform;
transition: box-shadow .3s ease;
box-shadow: 0 10px 30px transparent; }
.project__card.hover-in {
Expand All @@ -113,6 +126,10 @@ a {
-ms-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
opacity: 1; }
.project:hover .project__title {
font-weight: 600;
margin-bottom: 0;
line-height: 1; }
.project__detail {
position: absolute;
left: 30px;
Expand All @@ -129,7 +146,6 @@ a {
-ms-flex-pack: center;
justify-content: center;
text-align: center;
pointer-events: none;
-webkit-transform: translateZ(30px);
transform: translateZ(30px);
border: 0 solid #00BCD4;
Expand Down Expand Up @@ -168,11 +184,8 @@ a {
.movie__card {
position: relative;
width: 250px;
height: 370px; }
.movie__card.hover-in {
transition: .3s ease-out; }
.movie__card.hover-out {
transition: .3s ease-in; }
height: 370px;
transition: .2s ease-out; }
.movie [class*="layer"] {
position: absolute;
left: 0;
Expand Down
2 changes: 1 addition & 1 deletion hover3d.jquery.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"image",
"animation"
],
"version": "1.0.0",
"version": "1.1.0",
"author": {
"name": "Rian Ariona",
"url": "http://ariona.net"
Expand Down
Loading

0 comments on commit f7a352a

Please sign in to comment.