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

http://jsfiddle.net/6TNBU/

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

+3


source to share


2 answers


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;
}

      



JS Fiddle demo .

+3


source


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++;
    });
});​

      

http://jsfiddle.net/zuppm/

+1


source







All Articles