Question

是否有一种方法可以确保使用此代码始终首先显示出现的第一项？目前，它会根据元素的顺序触发。我之所以问是因为元素的顺序在整个站点中都在变化-我宁愿不为每种不同的情况创建一个新的场景。有人可能会看到一个聪明的方法。感谢您的任何帮助。

$('.data-scrollIn').each(function(index, elem) {
  // Init ScrollMagic Controller
  var controller = new ScrollMagic.Controller();

  // Create Animations
  h2 = $(elem).find('h2');
  h3 = $(elem).find('h3');
  btn = $(elem).find('.btn');
  p = $(elem).find('p');
  img = $(elem).find('img');
  span = $(elem).find('span.js-fade-order');

  var tl = new TimelineMax({
    pause: true
  });
  tl.add("start") // add timeline label

  .fromTo(span, 0.6, {
    opacity: 0,
    y: "40px",
  }, {
    opacity: 1,
    y: "0",
    ease: Power0.easeInOut
  },  0.3, "start")

    .fromTo(h2, 0.6, {
      opacity: 0,
      y: "40px",
    }, {
      opacity: 1,
      y: "0",
      ease: Power0.easeInOut
    },  0.6, "start")

    .fromTo(img, 0.6, {
      opacity: 0,
      y: "40px",
    }, {
      opacity: 1,
      y: "0",
      ease: Power0.easeInOut
    }, 0.9, "start")

    .fromTo(h3, 0.6, {
      opacity: 0,
      y: "40px",
    }, {
      opacity: 1,
      y: "0",
      ease: Power0.easeInOut
    }, 1.2, "start")

    .fromTo(p, 0.6, {
      opacity: 0,
      y: "40px",
    }, {
      opacity: 1,
      y: "0",
      ease: Power0.easeInOut
    }, 1.5, "start")

    .fromTo(btn, 0.6, {
      opacity: 0,
      y: "40px",
    }, {
      opacity: 1,
      y: "0",
      ease: Power0.easeInOut
    }, 1.8, "start")
   // Create the Scene and trigger when visible
    var sceneFade = new ScrollMagic.Scene({
      triggerElement: elem,
      offset: -100 /* offset the trigger Npx below scene's top */
    })
    .setTween(tl)
    .addTo(controller);
 });

Answer 1

 $('.data-scrollIn').each(function(index, elem) {
  // Init ScrollMagic Controller
  var controller = new ScrollMagic.Controller();

  // Create Animations
  fadeElem = $(elem).find('h2, h3, .btn, p, img, span.js-fade-order ');

  var tl = new TimelineMax({
    pause: true
  });
  tl.add("start") // add timeline label

    .staggerFromTo(fadeElem, 0.6, {
      opacity: 0,
      y: "40px",
    }, {
      opacity: 1,
      y: "0",
      ease: Power0.easeInOut
    },  0.6, "start")

  // Create the Scene and trigger when visible
    var sceneFade = new ScrollMagic.Scene({
      triggerElement: elem,
      offset: -100 /* offset the trigger Npx below scene's top */
    })
    .setTween(tl)
    .addTo(controller);
});

ScrollMagic-始终先对第一项进行动画处理

1 个答案: