javascript - 任何延迟边缘动画直到可见的方法

Question

我使用了一些 jQuery 进行延迟加载，并且必须将文本(data-scroll-reveal)添加到效果中，我正在使用 adobe edge animate 和 adobe edge 通过自动渲染带有 id 的 div，但我需要将 (data-滚动显示)以实现 div 自身

我用于延迟加载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 >

或者有什么方法可以延迟边缘动画直到可见？

Answer 1

Ramond Camden 通过近 6 篇专门讨论此问题的博客文章很好地解释了这一点:

以下是博客的逐字文本:

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

First, ensure you disable autoplay on the Stage element:

Next, click on the "Open Actions" panel and enter some text for the creationComplete event. I don't write much JavaScript directly in Edge Animate, instead, I simply put in something simple, like console.log('yo mama!'), just to get Edge Animate to create the event and make it easier for me to find in my editor.

I created a simple application, ran the code, and ensured that it was not running (since I had disabled autoplay). Now for the fun part. How do we tell if we the Edge Animate asset is visible? I turned to Stack Overflow and found a great utility for this (well, for DOM items in general): Check if element is visible after scrolling As you can see, it checks the Window's current scroll setting as well as the DOM item's size.

Given this function, I decided on this basic pseudo-code:

if(visible) run the animation else listen for scroll events and check if visible

Here is the code I came up with:

/***********************
* 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");

You can try a demo of this here: http://www.raymondcamden.com/demos/2013/apr/3/Untitled-1.html Please try not to be too amazed at my incredible animation and design skills.