How to make this geometrical “translation” effect with javascript?


Tags: javascript,jquery,html,css,geometry

Problem :

I'm trying to do an effect that i've seen on a website. You can have a look at this site : http://www.ultranoir.com/fr/#!/blog/accueil/

Or you can see this screenshot :

screenshot translation effect

If you over a div, you will see a sort of 3D effect. First, i don't know how to call this effect. It's a kind of Translation.

Maybe there is a better name ?

I would like to do something like that.

I've analyzed the source code and i saw that the website is using a background image :

http://www.ultranoir.com/cdn/gene/image/common/blog/grid_item_m.gif

You can see the picture :

enter image description here

So, here is what i've done but it's not perfect. You can see this fiddle. Feel free to edit the fiddle.

Can you help to do better ?

I think i don't need to use a background image, it could be done with only css http://jsfiddle.net/Vinyl/BrzuV/

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.transit.min.js"></script>
<script>
$(document).ready(function() {
var $bt_bienvenue = $("#bt_bienvenue");
var $bt_bienvenue2 = $("#bt_bienvenue2");

$bt_bienvenue.hover(
         function () {
           $bt_bienvenue.transition({ x: '-10px', y: '-10px' });
           $bt_bienvenue2.fadeIn(1000);
         }, 
         function () {
           $bt_bienvenue.transition({ x: '0px', y: '0px' });
           $bt_bienvenue2.fadeOut(100);
         }
     );
});
</script>
<style>
#test {
    width:500px;
    height:150px;
    background-color:#000;
}

#container {
    padding:30px;
    font-family:Helvetica, Arial, sans-serif;
    color:#FFFFFF;
}

#bt_bienvenue {
    background-color:#e5322c;
    width:95px;
    height:190px;
    z-index:3;
    position:absolute;
    cursor:pointer;
    /*display:none;*/
}

#bt_bienvenue2 { 
    background:url(img/site/bgd-bienvenue.gif) 0 0 no-repeat;
    /*float:left;*/
    width:105px;
    height:200px;
    position:relative;
    top:-10px;
    left:-10px;
    z-index:2;
    display:none;
}
</style>
</head>

<body>
<!--<div id="test"></div>-->
<div id="container">
    <div id="bt_bienvenue">Menu</div>
    <div id="bt_bienvenue2"></div>
</div>
</body>
</html>


Solution :

You can do it this way :

JS :

$(document).ready(function() {
var $bt_bienvenue = $("#bt_bienvenue");
var $bt_container = $("#container");

$bt_bienvenue.hover(
         function () {
           $bt_container.transition({ x: '-5px', y: '-5px', width: '105px', height: '205px' },200);

         }, 
         function () {
             $bt_container.transition({ x: '0px', y: '0px', width: '100px', height: '200px' },200);

         }
     );
});

You add overflow:hidden; to your container, that has exactly the same width/height as your Menu. And transition will only affect your container. You scale it (105px*205px) and slide it to the top-left 5px each.

And the more you scale and slide it, the more steps you have to add in the box-shadow property.

Fiddle :http://jsfiddle.net/ARgxU/14/


    CSS Howto..

    How to make a text box have rounded corners?

    How to get rid of text form borders in Chrome and Firefox?

    How to Style Specific Element On Hover With CSS?

    How to overide all css style classes in an input field without effecting other elements?

    CSS Flexbox: How do you align child elements of a flexbox container to opposite far ends of the main axis?

    How to stop ReSharper removing spaces after css properties

    How to put the footer at the bottom of the visible page?

    I'm making a chatbox. I have a div and input field inside of a div. I want them to resize in a particular way. How do I do this, preferably with css?

    How can I register a css page from an ascx control?

    CSS How to keep bodies of html file and included files from merging?

    Trying to show list items vertically but two items horizontally

    How to make child element do not fill his parent when hover is performed in CSS?

    How to output element.style.marginTop using digits only?

    how do I zoom a background image on a div with background-size

    How to bundle Angular 2 component css?

    How to position CSS Ribbon to go over one table cell

    How can I place the text in this box like this with CSS?

    How to have a textbox with label inside it support 'tap to paste' feature in iPad?

    How can I place HTML in a JavaScript string and have it validate?

    How to calculate width of unused space for page with fixed width?

    Show image when hovering on a span

    How can i make this css star smaller?

    How to provide default font height or content when

    or has no characters?

    CSS: How to make this topheader?

    How to create horizontal funnel like this? [closed]

    How to change the opacity background color of other two buttons once we click on a single button using css

    How to target items

    how to get text aligned vertically with text in list using css

    How to give the background-image path in CSS?

    How to keep floated width of divs to stay exact instead of 100%?