애니메이션이있는 페이지의 사용자보기 부분이

인 경우 가장자리 애니메이션을 재생하려는 경우에만 Adobe Edge 애니메이션 재생을 한 번만 수행하십시오 (div 애니메이션 부분을 한 번 보거나 스크롤하면됩니다). 루핑.애니메이션이있는 페이지의 사용자보기 부분이

은 그래서 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 페이지, 나는 BODY 태그 HTML로 내부

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

를 넣어 보여 줬어.

결과적으로 edge-animation은 전체 페이지를 다시로드하여 다시 재생합니다. 내가 '온로드'부분이

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

삽입되는 위치에 따라 작동합니다 생각하기 때문에 그럼 난 에지 애니메이션을 표시하는 데 사용 div 태그 안에 '온로드'부분을 넣어 시도하지만 애니메이션을 만든다 작동하지 않았다 : ( 사용자가 페이지의 일부만 볼 때 가장자리 애니메이션을 재생할 수있는 방법이 있습니까?

출처

2013-03-08 ask91

Edge Animate에서 creationComplete 이벤트 처리기를 만든 다음 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

creationComplete 이벤트 처리기 대신 @raymondCamden을 사용해 주셔서 감사합니다. : D 나는 내 HTML에서 가장자리와 다른 이벤트 케이스 사이의 통합 애니메이션을 알아내는 데 더 많은 것을 필요로한다고 생각한다. – ask91

이 코드는 스테이지 레이어의 프레임 중 하나에 들어간다고 가정한다? 여기에 "two keys"애니메이션처럼 재생하기 전에 애니메이션이 화면 가운데에 더 가까워 지도록하려면 어떻게해야합니까? http://mdm.cc/ – Mikeumus

애니메이션이있는 페이지의 사용자보기 부분이

답변

관련 문제