将Adobe边动画播放＆LT;一旦在时间＆gt;只有当用户视图，动画位于页面的一部分 [英] Make Adobe Edge-animation play <once at time> only when user view part of the page where animation located
问题描述
我打算做一个边动画播放，一旦格动画部分被视为/滚动在一个页面，而不是循环。
I intend to make an edge-animation play, once the div animation part is viewed/scrolled in a page, and not looping.
所以我在Q＆放想通了; A，发现样品codeS的丰富布拉德肖显示在这一页：
<一href=\"http://stackoverflow.com/questions/7665961/does-the-$c$c-generated-by-adobe-edge-conform-to-good-programming-practice?answertab=votes#tab-top\">Does由Adobe边缘产生的code符合良好的编程习惯：
so i figured out from the Q&A and found sample codes that Rich Bradshaw showed at this page: Does the code generated by Adobe Edge conform to good programming practice? :
这里的code，他发现：
Here's the code he showed:
<!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页面，我把
I tried to implement that in my sample html page, i put the
'onload="JavaScript:timedRefresh(500);"
BODY标记的HTML里面，因为它的表现。
inside the BODY tag html as it's showed,.
结果，边缘动画重新加载整个页面重新发挥自身,.
然后我试图把为onload的一部分div标签我用来显示边缘动画里面，因为我认为'onload事件部分将根据它的插在那里工作。
the result is, the edge-animation reload entire pages to re-play itself,. Then i tried to put the 'onload' part inside the div tag i used to show edge-animation, because i think the 'onload' part will work according to where it's inserted
<div id="Stage" class="EDGE-109228010" onload="JavaScript:timedRefresh(5000);"> </div>
但是，使动画没有工作:(
帮助我。有没有什么办法，使边缘的动画只有玩的时候，用户浏览页面的一部分？
but that makes the animation didn't work :( help me with this ,. is there any way to make edge-animation play only when user view the part of page ?
推荐答案
我创建了Edge Animate中一个creationComplete事件处理函数，然后在这里使用的JS code检查，如果一个div可见（的检查元素滚动后可见）。这里是code我结束了：
I created a creationComplete event handler in Edge Animate and then used the JS code here for checking if a div is visible (Check if element is visible after scrolling). Here is the code I ended up with:
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");
}
});
});
这篇关于将Adobe边动画播放＆LT;一旦在时间＆gt;只有当用户视图，动画位于页面的一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
