0

我目前正在使用整页 js 和 lottie 动画构建一个网站。现在我试图在用户滚动到带有动画的部分时触发动画。这是我尝试过的：（请注意，我对 js 很陌生）

$(document).ready(function($) {'use strict';

$('#fullpage').fullpage({
sectionsColor: ['white', '#004E8A', 'white','#004E8A', 'white', '#004E8A', 
'white','#004E8A', 'white'],
anchors:['startseite','pers_vermittler','team','konzept','rechner','mod_portfolio','sicherheit','absatz'],

onLeave: function(index, nextIndex, direction) {
    if( index == 3 && direction == 'down' ) {
    lottie.play('k2an');
  }

（在正文部分的末尾->）

<script>
var params = {
    container: document.getElementById('k2an'),
    renderer: 'svg',
    loop: true,
    autoplay: false,
    path: 'k2an.json',
};

anim = lottie.loadAnimation(params);

4

2 回答 2

0

您应该使用fullPage.js 回调来触发您的 JS 动画。

请参阅示例：

$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

    afterLoad: function(anchorLink, index){
        var loadedSection = $(this);

        //using index
        if(index == 3){
            alert("Section 3 ended loading");
        }

        //using anchorLink
        if(anchorLink == 'secondSlide'){
            alert("Section 2 ended loading");
        }
    }
});

也可以随意查看我的视频教程，了解如何使用fullPage.js 状态类创建动画。

于 2018-04-24T10:58:21.967 回答
-1

现在我在几个生产站点上使用这种方法。它在用户滚动时播放动画。

我基本上检查在视口中可见多少动画对象框，计算动画的总长度（以帧为单位），然后将百分比投影到我 gotoAndStop() 的帧。

var anim = <YOUR LOTTIE ANIMATION OBJECT>

// play around with these
var speed = 1; // speed of animation
var scrollOffset = 0; // start animation sooner / later

function scrollHandler() {
            if (!anim.isLoaded) return;
            p = percentageSeen(e) / 100 - (scrollOffset || 0);
            if (p <= 0 || p >= 1) return

            var length = anim.totalFrames / anim.frameModifier;
            var pos = length * p * (speed || 1);
            anim.goToAndStop(pos);
}

$(window).on('scroll', scrollHandler);




/**
 * returns percentage of scrolling element through viewport
 * 0% until element-middle is at bottom of viewport
 * 100% if element-middle is at top of viewport
 *
 * @param id
 * @returns {number}
 */
function percentageSeen(idOrElement) {
    var $element;

    if (typeof idOrElement === 'object') {
        $element = idOrElement;
    } else {
        $element = $('#' + id);
        if (!$element[0]) return 0;
    }

    var $win = $(window), viewportHeight = $(window).height(),
        scrollTop = $win.scrollTop(),
        elementOffsetTop = $element.offset().top,
        elementHeight = $element.height();


    if (elementOffsetTop > (scrollTop + viewportHeight)) {
        return 0;
    } else if ((elementOffsetTop + elementHeight) < scrollTop) {
        return 100;
    } else {
        var distance = (scrollTop + viewportHeight) - elementOffsetTop - (elementHeight / 2);
        if (distance < 0) return 0;
        var percentage = distance / (viewportHeight / 100);
        if (percentage > 100) return 100;
        return percentage;
    }
}

如果您只想启动动画并让它运行（独立于进一步的用户滚动行为），只需使用 jquery inview 插件，禁用动画上的自动播放并触发 play() 一次，如下所示：

$(".animation-container").one("inview", function() { 
    anim.play()
});

于 2018-05-01T08:52:23.727 回答