2

ウェブサイトにランディングページがあり、地球の画像が1つだけあります。

ここでメインサイトに入るには、ランディングページで、地球が割れて開いてからユーザーがメインサイトに入るという効果が必要です。

私が現在行っていること：現在、ランディングページの画像全体を4つのdivに分割し、それぞれに個別の画像を配置しています（これらは共同で地球を形成しています）。これで、ユーザーがサイトにアクセスする必要があるときに、4つのdivのそれぞれを画面の各隅にアニメーション化するだけです。しかし、クラッキング効果と他の視覚的に魅力的な効果が必要です。

これを達成する方法はありますか？Javascript（またはjQuery）ソリューションが望ましい。

4

3 に答える 3

2
  • 割れた画像を重ねslideDown()て地球の画像の上に(jQuery)作ります。

http://jsfiddle.net/NKqNh/を参照してください

$(function() {
   $('#crack').slideDown(800); 
});​

<div id="earth" class="common"> </div>
<div id="crack" class="common"> </div>​

編集：

あなたの答えでは、クラッキング後の爆発のために匿名関数へのコールバックを使用して更新された js があります。 http://jsfiddle.net/eC9HM/2/

$(function() {
    $('#crack').slideDown(800, function() {
      $('#earth, #crack').hide('explode', {pieces: 16}, 2000);
    });
});
​
于 2012-06-11T06:32:37.573 に答える
1

explodejQuery UI の効果を利用できます。画像を多くの部分に分割し（必要な部分の数を選択できます）、画像が消えます

更新-

このコードを試してください-

<html>

<head>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script>
$(document).ready(function() {

  $("img").click(function () {

    $(this).hide("explode", { pieces: 24 }, 2000);

  });

});
</script>

</head>

<body style="font-size:62.5%;">

  <img src="http://2.bp.blogspot.com/-No5MB366RTY/T3WYGRicqUI/AAAAAAAAALQ/mDgaBLVocZE/s1600/260px-The_Earth_seen_from_Apollo_17.jpg">

</body>

</html>
于 2012-06-11T06:32:29.243 に答える
0

回答ありがとうございますが、ここにある他の2つの回答を組み合わせて回答を見つけました。だから、ここでフィドルをサメしているだけなので、将来役立つかもしれません：

更新されたフィドル:

http://jsfiddle.net/gopi1410/eC9HM/1/

于 2012-06-11T07:05:17.067 に答える