How would you achieve this 3D hover effect?
I am trying to make a 3D mouse effect when you are over a DIV. This is how it looks now
I would like to know how I could make it so that there is a cleaner shadow, slanted style in the bottom left and top right corner. I thought maybe load a triangle at these corners, but I would like to know if there is another way I could achieve this.
thank
source to share
If you don't mind using pseudo-elements, there are ::before
and ::after
(although note that as I recall IE does not recognize a two-colon declaration, so you really need to use :before
and :after
):
#box::before {
content: ' ';
position: absolute;
top: -10px;
left: -10px;
bottom: 0;
height: 100%;
background-color: #f90;
border-bottom: 10px solid white;
border-right: 10px solid black;
}
#box::after {
content: ' ';
position: absolute;
top: -10px;
left: -10px;
right: 0;
width: 100%;
border-bottom: 10px solid black;
border-right: 10px solid white;
}
source to share
I thought it would be interesting to try the "blocklets" approach, i.e. use div
to create a 3D appearance by placing div
between background and field, with the spacing between them offset from the parent by one pixel and to the left to create a depth appearance.
Note that I am not suggesting this great approach as a number of issues can affect performance. However, I was pleasantly surprised to see that I can get relatively good performance with the code below, and yes, it works (as is) in IE7 / 8/9 as well as FF10 and Chrome 17.
So, if this is helpful to you, I'm glad to hear it, although I would be in a hurry to add it is really just a jumping / starting point. There are some known issues that I have observed, such as multiple boxes causing the animation to fall apart. But it seems to work well with one box, and my guess is that with some work, the job could be made better and it could be ported to a plugin (if so desired).
Let me know if you have any questions or see anything that can / should be fixed, or if you find it silly / pointless / just turrible and can explain why.
Html
Basic markup:
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
CSS
I added borders because I thought it looked better:
.shadow {
position: relative;
float: left;
}
.threed {
background: black;
position: absolute;
top: 0;
left: 0;
}
.box {
width: 298px;
height: 298px;
background: #cacaca;
position: relative;
border: 1px solid #aaa;
border-left: 1px solid #acacac;
border-top: 1px solid #acacac;
}
JQuery
$(function(){
var $threed = $('<div class="threed">'),
$shadow = $('<div class="shadow">'),
offset = 0;
var init = function($jq, distance, speed){
$jq.each(function(){
var $this = $(this),
$threeds,
$shadow_clone = $shadow.clone(),
$threed_clone,
borderlw = parseInt($this.css('border-left-width')),
borderrw = parseInt($this.css('border-right-width')),
bordertw = parseInt($this.css('border-top-width')),
borderbw = parseInt($this.css('border-bottom-width')),
width = parseInt($this.innerWidth()) + borderlw + borderrw,
height = parseInt($this.innerHeight()) + bordertw + borderbw,
dimensions = {height: height, width: width};
$shadow_clone.css({
height: height + distance,
width: width + distance}
);
$this.data('distance', distance).wrap($shadow_clone);
for (var i = 0; i <= distance; i++) {
var $threed_clone = $threed.clone();
$this.before($threed_clone);
$threed_clone.css(dimensions).data('dimensions', {
left: i, top: i
});
}
$this.data('threeds', $this.siblings('.threed'));
$this.mouseenter(function(){
var offset = 0,
properties = {
left: distance,
top: distance
},
options = {
duration: speed,
step: goUp,
complete: finishThreeD
};
$(this).stop().animate(properties, options);
})
.mouseleave(function(){
var properties = {
left: 0,
top: 0
},
options = {
duration: speed,
step: goDown,
complete: finishTwoD
};
$(this).stop().animate(properties, options);
});
});
};
var goUp = function(){
var _offset = parseInt(this.style.left);
if (_offset > offset) {
offset = _offset;
$($(this).data().threeds[offset - 1])
.prevAll('.threed').each(function(){
$(this).css($(this).data().dimensions);
});
}
};
var finishThreeD = function() {
$(this).data().threeds.each(function(){
$(this).css($(this).data().dimensions);
});
};
var goDown = function (){
var _offset = parseInt(this.style.left);
if (_offset < offset) {
offset = _offset;
$($(this).data().threeds[offset - 1])
.nextAll('.threed').css({top: 0, left: 0});
if (offset === 0) {
$(this).data().threeds.css({top: 0, left: 0});
}
}
};
var finishTwoD = function (){
$(this).data().threeds.css({top: 0, left: 0});
offset = 0;
};
var inc = 1;
$('.box').each(function(){
init($(this), 10 * inc, 100 * (2.5 * inc));
inc++;
});
});
source to share