0

divアニメーション部分がページで表示/スクロールされ、ループしないようになったら、エッジアニメーションを再生するつもりです。

そこで、Q＆Aから理解し、 Rich Bradshaw がこのページに示した サンプルコードを見つけました。AdobeEdgeによって生成されたコードは、優れたプログラミング手法に準拠していますか？：

彼が示したコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <title>Adobe EDGE TEST August 1, 2011</title>
<!--Adobe Edge Runtime-->
    <script type="text/javascript" src="edge_includes/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="edge_includes/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="edge_includes/edge.0.1.1.min.js"></script>
    <script type="text/javascript" src="edge_includes/edge.symbol.0.1.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="adobe_edge_test_edge.js"></script>
    <link rel="stylesheet" href="adobe_edge_test_edge.css"/>
<!--Adobe Edge Runtime End-->

<script type="text/JavaScript">
<!--
function timedRefresh(timeoutPeriod) {
    setTimeout("location.reload(true);",timeoutPeriod);
}
//   -->
</script>

</head><body onload="JavaScript:timedRefresh(4000);">
    <div id="stage" class="symbol_stage">
    </div>
</body>
</html>

私はそれを私のサンプルhtmlページに実装しようとしました、私は

'onload="JavaScript:timedRefresh(500);"

示されているように、BODYタグhtml内。

その結果、エッジアニメーションはページ全体をリロードして、それ自体を再生します。次に、エッジアニメーションを表示するために使用したdivタグ内に「onload」部分を配置しようとしました。これは、「onload」部分が挿入された場所に応じて機能すると思うためです。

<div id="Stage" class="EDGE-109228010" onload="JavaScript:timedRefresh(5000);"> </div>

しかし、それではアニメーションが機能しませんでした:(これを手伝ってください。ユーザーがページの一部を表示したときにのみエッジアニメーションを再生する方法はありますか？

4

1 に答える 1

1

Edge Animate で creationComplete イベント ハンドラーを作成し、ここで JS コードを使用して、div が表示されているかどうかを確認しました (スクロール後に要素が表示されているかどうかを確認します)。これが私が最終的に得たコードです：

  Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {
     // insert code to be run when the symbol is created here
     console.log('Start');

    function isScrolledIntoView(elem)
    {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
          && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
    }         

     $(window).on("scroll", function(e) {
         if(isScrolledIntoView(sym.element)) {
            console.log('Start me up'); 
             sym.play(0);
             $(window).off("scroll");
         }
     });


  });
于 2013-04-03T01:55:23.903 に答える