Блог

Главная - Вопросы по программированию - Использование вывода и анимации с помощью ScrollMagic

Использование вывода и анимации с помощью ScrollMagic

#jquery #html #css #scrollmagic

#jquery #HTML #css #scrollmagic

Вопрос:

Я работаю над проектом, в котором мне нужно, чтобы несколько divs запускались, а затем прикреплялись к экрану во время прокрутки. Я попытался сложить их вместе, но это приводит к странному перемещению div. Как pin, так и tween отлично работают по отдельности, но я не могу заставить их правильно работать вместе. Есть предложения? У меня есть несколько фрагментов кода ниже.

jQuery:

 controller = new ScrollMagic();

var myTween = new TimelineMax()
    .add(TweenMax.to("#myTarget", .5, {
        top: "-=500"
        autoAlpha: 1,
        left: " =300",
        color: "#aaaaaa"
    }));

new ScrollScene({triggerElement: "#myTrigger"})
    .setTween(myTween)
    .setPin('#myTarget')
    .addTo(controller);

HTML:

 <div id="myTrigger" class="space50"></div>
<div id="myTarget" class="label">Stuff</div>

CSS:

 .space50 {
    height: 50px;
}
.label {
    border-radius: 8px;
    display: inline-block;
    position: relative;
    text-align: center;
    vertical-align: middle;
}

Ответ №1:

Анимировать цель pin-кода не очень хорошая идея. Причина в том, что выполняется много вычислений, чтобы убедиться, что элемент отображается в правильном положении во время вывода. Простое решение — создать оболочку вокруг вашего элемента и закрепить его вместо этого. То, что происходит внутри оболочки (анимации), является отдельным, поэтому проблем нет. 🙂

Для получения дополнительной помощи следуйте этому руководству: https://github.com/janpaepke/ScrollMagic/blob/master/CONTRIBUTING.md