Question

我使用了一些jQuery进行延迟加载，并且必须将文本（数据滚动显示）添加到效果中，并且我使用adobe edge animate和adobe edge通过自动渲染div与id但我需要放（数据 - 滚动揭示）实现自我分裂

我用于延迟加载scrollreveal http://scrollrevealjs.org/

在源代码中呈现，如

<div id="Stage_Ellipse" style="position: absolute; margin: 0px; 
 left: 0px; top: 0px; width: 166px; height: 166px; right: auto; 
 bottom: auto; border-radius: 50%; transform-origin: 50% 50% 0px; 
 transform: translate(66px, 16px) rotate(0deg) scale(1, 1); 
 border: 0px none rgb(0, 0, 0); background-color: 
 rgb(192, 192, 192);" class="Stage_Ellipse_id">
</div>

有没有办法将（data-scroll-reveal）添加到

的div中

我的意思是下面的

<div id="Stage_Ellipse" data-scroll-reveal >

或延迟Edge Animate直到可见的任何方式？

Answer 1

~~Ramond Camden在近六篇专门讨论这个问题的博客文章中解释得非常好：~~

以下是博客中的文字：

Delaying an Edge Animate asset until visible - Part 1 (April 3, 2013)

首先，确保在Stage元素上禁用自动播放：

接下来，点击＆＃34;打开操作＆＃34;面板并输入一些文本   creationComplete事件。我不会直接在Edge中编写很多JavaScript   相反，Animate，我简单地说了一些简单的东西，比如   console.log（＆＃39;哟妈妈！＆＃39;），只是为了让Edge Animate创建活动   并让我更容易在我的编辑器中找到。

我创建了一个简单的应用程序，运行代码，并确保它是   没有跑（因为我禁用了自动播放）。现在是有趣的部分。怎么样   我们是否可以看出Edge Animate资产是否可见？我转向Stack   溢出并找到了一个很好的实用程序（好吧，对于DOM中的DOM项目）   general）：滚动后检查元素是否可见正如您所见，   它检查Window的当前滚动设置以及DOM   项目的大小。

鉴于此功能，我决定使用这个基本的伪代码：

如果（可见）运行动画，则监听滚动事件并检查   如果可见

以下是我提出的代码：

/***********************
* Adobe Edge Animate Composition Actions
*
* Edit this file with caution, being careful to preserve 
* function signatures and comments starting with 'Edge' to maintain the 
* ability to interact with these actions from within Adobe Edge Animate
*
***********************/
(function($, Edge, compId){
var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes

   //Edge symbol: 'stage'
   (function(symbolName) {


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

    //http://stackoverflow.com/a/488073/52160
        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) );
        }         

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

      });
      //Edge binding end

   })("stage");
   //Edge symbol end:'stage'

})(jQuery, AdobeEdge, "EDGE-62515662");

您可以在此处尝试演示： http://www.raymondcamden.com/demos/2013/apr/3/Untitled-1.html请尽量不要对我令人难以置信的动画和设计技巧感到惊讶。

任何延迟Edge Animate直到可见的方法

1 个答案: