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 fix element on the center of scrollable page?

    How do I unset CSS values?

    How To Do A Webkit Slide Cover Page Transition

    How to make css style on Google custom search engine

    How can I get width and height of big image after displaying it on html-page?

    How to make a floating page div responsive

    How can I change the style of thumbnails?

    How to keep div visible when hovering another div

    How to use jQuery without making a mess? [closed]

    How to add multiple css rules to minimize browser reflows?

    How do I get this CSS to work in safari

    How do prevent my div from spilling outside its parent container?

    How to use sprite images in html/css and toggle change with jQuery

    How to make a layout in which certain tags will fill remaining space of parent tag/container?

    how to show the hidden div with same properties css with jquery

    How to show div of google maps after hidding it

    How can one use scroll bar images?

    css how to make full height div with scroll support?

    How to always make page content appear beneath navigation bar?

    Greasemonkey how to apply a CSS rule only for @media print?

    Screen scraping pages that use CSS for layout and formatting…how to scrape the CSS applicable to the html?

    How to use global stylesheet with css loader

    how can bring to front clicked div in jquery?

    How to create shaded divs like this with CSS

    How to equally align two vertical columns created using a loop, an array, and appending childs in JavaScript (or CSS)?

    How to make three columns all the full height of the page?

    How to write function in css

    CSS Flex Box — flex-wrap:wrap; How to style a specific line?

    How to upload image to an existing image src in angularjs, css

    How to set the maximum height of CSS images?