1

1 つのページにいくつかの HTML5 アニメーションを配置したいのですが、ページの読み込み時にすべてを一度に再生したくありません。代わりに、ユーザーが各アニメーションがあるセクションにスクロールすると、各アニメーションが自動再生されるようにしたいと考えています。それを実現するための適切なタグ、コードなどは何ですか?

他の場所での例: Nest.com/living-with-nest/ - 2 日目まで下にスクロールすると、青色とオレンジ色の矢印がアニメーションで表示されます

apple.com/ipad/features/ - カメラ セクションまでスクロールすると、レンズ ビデオ/VR が再生されます - Smart Cover、Airplay、その他のセクションと同じです

ありがとう！

4

2 に答える 2

2

あなたの質問のさまざまな部分:

  • html5 アニメーションを使用する:video要素を使用する

  • アニメーションをすぐに開始しない: 指定しないでくださいautoplay

  • ビデオを開始します。

    document.getElementById('myVideo').play();

  • 要素が表示されているかどうかを確認します: jquery を使用すると、単純に offset().top、window.innerHeight、および scrollTop を使用できます。

    var visible = 
    $(window).scrollTop()+window.innerHeight>$e.offset().top
    &&$(window).scrollTop()<$e.offset().top+$e.height(); // $e is the video element

  • スクロールを検出する: jqueryscroll関数を使用する

スクロールによって要素が表示または非表示になるタイミングを検出する方法を説明するために、フィドルを作成しました: http://jsfiddle.net/dystroy/zj5Sz/

于 2012-05-02T10:36:02.730 に答える
0

注：この回答は、コメントで述べたように、Animate CC（Flash）で生成された HTML5 プロジェクトに固有のものです。

Animate CC および Muse 2017 を使用して、このような設定をすばやく簡単に制御できるようになりました。

  1. アニメーションを OAM ファイルとしてエクスポートするか、アニメーションを CC ライブラリにアップロードします。
  2. Muse で Web サイトを開きます。
  3. OAM ファイルをインポートするか、Muse の CC ライブラリからアニメーションを使用します。適切な位置に配置してください。

  4. Muse でスクロール効果パネルを開く -> [アニメーション] タブに移動 -> [アニメーション] チェックボックスを選択し、[自動再生] を選択します。

    ここに画像の説明を入力

  5. ブラウザーで Web ページをプレビューすると、下にスクロールしてキャンバスが表示されたときにのみ再生されます。

于 2016-11-23T11:53:15.123 に答える