0

私は次の効果を持つウェブサイトを作ろうとしています:

  1. ページを読み込んでも何も表示されない
  2. 次に、下にスクロールすると、ブラウザ ウィンドウの両側から画像が浮かび上がり、ウィンドウの中央に積み重なっていきます。（いいね位置：固定）
  3. さらにスクロールすると、より多くの写真が浮かび上がり、中央のスタックに追加されます。

説明するのも見つけるのも難しいですが、効果の非常に高度な例を次に示します。

お役に立てれば幸いです。

4

4 に答える 4

0

これを試してみてください...

   $（document）.ready（function（）{


    $（ "body"）。css（ "display"、 "none"）;
    $（ "body"）。fadeIn（2000）;
    }）;

これでは、最初にページ全体が空になります...次にフェードインします...。

    $（'＃element'）。animate（{
    不透明度：1、
    左：'+ = 50'、
    上：'+ = 200'
    }、2000、function（）{
    //アニメーションが完了しました。
    }）;

上記のコードを使用してオブジェクトを移動します。

于 2012-08-14T13:39:29.600 に答える
0

「無限スクロール」または「無限スクロール」を検索するだけでなく、JQuery アニメーションの使用を検討することをお勧めします。

JQuery UI はおそらく最善の策であり、見栄えも良いでしょう。これを行う方法はいくつかありますが、ここでは書ききれません。

無限スクロールに関しては、これについても多くの方法があります。

ここから始めましょう: http://masonry.desandro.com/demos/infinite-scroll.html

于 2012-08-14T11:54:09.207 に答える
0

まず、すべての要素を display:none; に設定します。あなたのCSSで。アニメーションに jquery を使用します。

  • scroll()イベントを使用して、いつ開始するかを決定します
  • animate()を使用して実際の作業を行います。

例えば：

$('#element').animate({
  opacity: 1,
  left: '+=50',
  top: '+=200'
}, 2000, function() {
  // Animation complete.
});

これにより、id "element" を持つ要素がフェードインし、2 秒間で右に 50 ピクセル、下に 200 ピクセル移動します。

于 2012-08-14T11:46:20.253 に答える
-1

jQuery を使用することもできます。効果的なフレームワークがあります。

于 2012-08-14T11:53:04.270 に答える