2013-09-11 100 views
0

所以我一直试图按照这个教程http://www.netmagazine.com/tutorials/getting-animations-trigger-right-time,并意识到这些效果只适用于包含图像的元素。我想要对不包含图像的元素(即:一段文本)产生这种效果,但无法使其工作。有没有人有任何想法如何实现这一目标?感谢你们!通过页面滚动显示动画

这里的脚本:

<script> 
if (Modernizr.csstransitions) { 
    function preloadImages(imgs, callback) { 
    var cache = [], 
     imgsTotal = imgs.length, 
     imgsLoaded = 0; 

     $(imgs).each(function (i, img) { 
     var cacheImage = document.createElement('img'); 
       cacheImage.onload = function() { 
       if (++imgsLoaded == imgsTotal) callback(); 
               }; 
       cacheImage.src = $(img).attr('src'); 
       cache.push(cacheImage); 
             }); 
           }; 
           $.fn.trans = function() { 
             var t = arguments[0], 
               d = arguments[1] || ''; 
             if (t) { 
               $.each(this, function (i, e) { 
                 $(['-webkit-', '-moz-', '-o-', '-ms-', '']).each(function (i, p) { 
                   $(e).css(p + 'transition' + d, t); 
                 }); 
               }); 
             } 
           }; 

           document.write('<link rel="stylesheet" href="animations.css" />'); 

           $(function(){ 
             //preload images contained within elements that need to animate 
             preloadImages($('.services img, .featured img'), function() { 
               $('.services, .featured').appear({ 
                 once: true, 
                 forEachVisible: function (i, e) { 
                   $(e).data('delay', i); 
                 }, 
                 appear: function() { 
                   var delay = 150, 
                     stagger = 800, 
                     sequential_delay = stagger * parseInt($(this).data('delay')) || 0; 

                   $(this).children().each(function (i, e) { 
                     $(e).trans(i * delay + sequential_delay + 'ms', '-delay'); 
                   }); 
                   $(this).removeClass('animationBegin'); 
                 } 
               }); 
             }); 
           }); 
         } 
       </script> 

回答

1

你可以找到轻量级的jQuery滚动脚本处理视CSS3动画SEE HERE

我已创建了一个演示这表明它是如何工作的,滚动的小提琴和你将在元素处于视口中时看到动画。

SEE THE DEMO HERE

+0

伟大的东西非常感谢。但是有什么办法可以改变我的代码吗?主要原因是因为在我的示例中,同一个div内的元素将逐个进行动画,而不会单独放置额外的属性。希望这是有道理的。谢谢;) – Tiago

+0

你可以使用延迟来动画css动画一个接一个地在我的代码中。 –