Сделайте игру Adobe Edge-анимации <раз в момент> только при просмотре пользователем части страницы, на которой размещена анимация

Я намерен сделать игру с красной анимацией, когда часть анимации div просматривается/прокручивается на странице, а не зацикливание.Сделайте игру Adobe Edge-анимации <раз в момент> только при просмотре пользователем части страницы, на которой размещена анимация

так я понял из Q & A и нашел коды образца, которые Rich Bradshaw показали на этой странице: Does the code generated by Adobe Edge conform to good programming practice?:

Вот код, он показал:

<!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 as это показано.

результат: краевая анимация перезагружает целые страницы, чтобы снова воспроизвести себя. Тогда я попытался поставить «OnLoad» часть внутри сНа тега я использовал, чтобы показать краевую-анимацию, потому что я думаю, что «OnLoad» часть будет работать в соответствии с которой он вставлен

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

но это делает анимацию не работает :( помогите мне с этим, есть ли способ сделать воспроизведение края-анимации только тогда, когда пользователь просматривает часть страницы?

источник

2013-03-08 ask91

Я создал обработчик события creationComplete в Edge Animate, а затем использовал JS код здесь для проверки, является ли div видимым (Check if element is visible after scrolling). Вот код, который я получил:

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-03 01:55:23

хорошо спасибо за альтернативу createComplete обработчик событий, @raymondCamden ,. : D Я думаю, мне нужно кое-что еще, чтобы вычислить интеграцию анимации между краем и другим событием в моем html – ask91

Этот код входит в кадр одного из сценического уровня, который я предполагаю? Что делать, если анимация должна быть ближе к центру, прежде чем играть, как анимация «двух ключей» здесь: http://mdm.cc/ – Mikeumus

Сделайте игру Adobe Edge-анимации <раз в момент> только при просмотре пользователем части страницы, на которой размещена анимация

ответ

Смежные вопросы