Question

我对scrollmagic很新，我希望在整个页面中多次使用单个类来进行动画处理。这可能吗？

欢迎任何指示。

$(function() {
    controller = new ScrollMagic();
    var tween5 = TweenMax.to(".animate", 0.5,{scale: 1.02,
    backgroundColor: 'rgb(255, 39, 46)'
    });
    var scene5 = new ScrollScene({
            duration: 200,
            triggerElement: ".animate",
            triggerHook: "onCenter",
        })
        .setTween(tween5)
        .addTo(controller);

      scene5.addIndicators();
});

Answer 1

要知道如何解决这个问题，你需要知道两个框架如何对提供的多个元素做出反应（如果你提供一个解析为多个元素的类，那么这就是你所做的）。

TweenMax将同时为所有元素设置动画，而ScrollMagic每个场景只能有一个触发元素（因为每个场景只能有一个开始和结束），这就是为什么它将使用匹配集的第一个元素

所以从逻辑上讲，只要第一个元素通过触发器，上面的代码就会导致所有元素都被动画化。

要解决此问题，您必须为每个元素定义一个场景：

$(function() {
    controller = new ScrollMagic();
    $(".animate").each(function (index, elem) {
        var tween = TweenMax.to(elem, 0.5,
                               {scale: 1.02, backgroundColor: 'rgb(255, 39, 46)' }
                    );
        new ScrollScene({
                duration: 200,
                triggerElement: elem,
                triggerHook: "onCenter",
            })
            .setTween(tween)
            .addTo(controller)
            .addIndicators();
    });
});

更新了笔：http://codepen.io/janpaepke/pen/JoygRd

Answer 2

scrollmagic triggerElement钩子动态添加了新元素

from src.mysqlClient import db_session
from src.mysqlClient.models import AdvertDom

def function_one():
    with db_session() as session:
        advert_doms = session.query(AdvertDom).all()
    return advert_doms

def function_two()
    advert_doms = function_one()

    # TODO: Do something here so that the code below will work.

    for advert_dom in advert_doms:
        print(advert_dom.HTMLContent)

使用相同的类使用scrollmagic为视图设置动画

2 个答案: