длительность переключателя img src, немедленно оживляет - PullRequest
Новая
       76

длительность переключателя img src, немедленно оживляет

0 голосов
/ 04 сентября 2018

У меня есть логотип в заголовке и при прокрутке вниз, я хотел бы инвертировать цвета. Я использую скроллмагию. Я уже настроил изображение с обратной версией.

Вот что у меня сейчас: 

var logo = $('header.banner .brand img'),
    logo_org = $('header.banner .brand img').data('original'),
    logo_alt = $('header.banner .brand img').data('reverse');

var brandLogo = TweenMax.fromTo("header.banner .brand img", 0.15,
      {onUpdate: function() { $(logo).attr("src", logo_org); }},
      {onUpdate: function() { $(logo).attr("src", logo_alt); }, ease: Linear.easeNone});

    // image src switcher
    new ScrollMagic.Scene({
      triggerElement: ".section-1",
      triggerHook: 0.5
    })
    .setTween(brandLogo)
    .addTo(controller);

.section-1 появляется, и остальные анимации заголовка начинаются, но логотип изменился на обратную версию в момент загрузки страницы.

Если я добавлю: 

duration: "100%"

это не имеет никакого эффекта, анимация по-прежнему срабатывает немедленно. Я пробовал разные спусковые крючки, разные задержки и т. Д., Но безрезультатно. Что, черт возьми, мне не хватает? Извиняюсь, если это что-то до боли очевидное, но я только что начал баловаться со scrollmagic и gsap.

1 Ответ

0 голосов
/ 19 сентября 2018

Невозможно анимировать атрибут src. Атрибут src может иметь одно значение в данный момент времени, а не процент от двух значений.

Чтобы добиться того, что вы пытаетесь сделать, вы можете иметь два изображения поверх другого и настроить непрозрачность обоих с помощью "autoAlpha" в GSAP.

Или посмотрите на этот похожий вопрос для некоторых рабочих скрипок => Анимация атрибута "src"

Лучшим решением было бы использовать SVG вашего логотипа и анимировать различные свойства заливки вашего логотипа для разных цветов, которые вы хотите.

...