Question

我使用anime-js创建动画。但是，它远在页面中。我想在屏幕上出现要动画的项目的部分时启动我的动画功能。

我尝试了一个我喜欢使用的插件（jquery viewportchecker），但它似乎没有这样做。

你能帮助我吗？

谢谢

Answer 1

您是否尝试过在加载方法上使用JQuery？

像

这样的东西

$(document).ready(function(){ var gradi = []; for (var i = 0; i < 6; i++) { gradi[i] = 0; }; var scheda = []; for (var i = 1; i < 7; i++) { scheda[i] = $("main div:nth-child("+i+")").offset().top; } var schermo = $(window).height(); $(window).on("scroll", function(){ var percorso = $(this).scrollTop(); if (percorso > scheda[1] && percorso < scheda[2]) { var quantita = (percorso-scheda[1])/10; ruota(1, quantita); } else if (percorso > scheda[2] && percorso < scheda[3]) { var quantita = (percorso-scheda[2])/10; ruota(2, quantita); } else if (percorso > scheda[3] && percorso < scheda[4]) { var quantita = (percorso-scheda[3])/10; ruota(3, quantita); } else if (percorso > scheda[4] && percorso < scheda[5]) { var quantita = (percorso-scheda[4])/10; ruota(4, quantita); } else if (percorso > scheda[5] && percorso < scheda[6]) { var quantita = (percorso-scheda[5])/10; ruota(5, quantita); } else { $(".hero").css({ transform: "rotateX(0deg)"}); } }); function ruota(i, n){ var indice = i-1; var opacita = n/110; gradi[indice] = n; $("main > div:eq("+indice+") > div") .css({ transform: "rotateX("+gradi[indice]+"deg)", opacity: 1-opacita }); $("main > div:eq("+i+") > div") .css("transform", "rotateX(0deg)"); } });

Answer 2

jQuery.appear

此插件实现自定义的显示/消失事件，当元素在浏览器视口中变得可见/不可见时会触发这些事件。

https://github.com/morr/jquery.appear

$('someselector').on('appear', function(event, $all_appeared_elements) {
  // this element is now inside browser viewport
});
$('someselector').on('disappear', function(event, $all_disappeared_elements) {
  // this element is now outside browser viewport
});

此插件还提供自定义jQuery过滤器，用于手动检查元素外观。

$('someselector').is(':appeared')

Answer 3

我找到了解决方案。你的方法的问题是函数重复到无穷大。

我创建了一个小函数来检查元素是否可见。有了它，不需要插件。

function checkVisible( elm, evale ) {
    var evale;
    evale = evale || "object visible";
    var viewportHeight = $(window).height(), // Viewport Height
        scrolltop = $(window).scrollTop(), // Scroll Top
        y = $(elm).offset().top,
        elementHeight = $(elm).height();

    if (evale == "object visible") return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight)));
    if (evale == "above") return ((y < (viewportHeight + scrolltop)));
}

我还创建了一个变量var counter = 0;。一旦调用该函数，我就会增加1。

$(window).on('scroll',function() {
    if (counter == 0){
        if (checkVisible($('.frontend'))) {
           // Your function here
         }
       }
     }

第一次调用该函数时，counter将为1，因此该函数不会重复。谢谢你的帮助！

运行function（）如果出现在视口中？ jQuery的视口检查器

3 个答案:

jQuery.appear