2

ウェブサイトで見た効果を実行しようとしています。このサイトで見ることができます: http://www.ultranoir.com/fr/#!/blog/accueil/

または、このスクリーンショットを見ることができます:

スクリーンショットの翻訳効果

div を超えると、一種の 3D 効果が表示されます。まず、この効果の呼び方がわかりません。それは翻訳の一種です。

多分もっと良い名前がありますか？

私はそのようなことをしたいと思います。

ソースコードを分析したところ、ウェブサイトが背景画像を使用していることがわかりました:

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

あなたは絵を見ることができます:

ここに画像の説明を入力

だから、ここに私がやったことがありますが、完璧ではありません。このフィドルを見ることができます。フィドルを自由に編集してください。

あなたはより良いことをするのを助けることができますか?

背景画像を使用する必要はないと思います。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>
4

1 に答える 1