1

Использую Distortion Hover Effect для анимации изображений. Как настроить переключение анимации при hover на элемент "trigger"?

Мой пример https://codepen.io/spacek8989/pen/poveVGa

Оригинальная анимация https://tympanus.net/Development/DistortionHoverEffect/#

2
  • А с чем возникли трудности? 20 дек 2019 в 13:35
  • неужели чтобы сменить картинку нужно писать такую кучу кода? или тут какой-то спецэффект должен был быть? 20 дек 2019 в 14:10

2 ответа 2

0

Если подобной эффект будет работать только для одного блока на странице, то можно статически прописать параметры в hover.js:

var parent2 = document.querySelector('.trigger');

Будет выглядеть так:

var parent = opts.parent || console.warn("no parent");
var parent2 = document.querySelector('.trigger'); // НОВАЯ ПЕРЕМЕННАЯ
var dispImage = opts.displacementImage || console.warn("displacement image missing");
.......

В блоках:

parent.addEventListener(evtIn, function(e) {
            TweenMax.to(mat.uniforms.dispFactor, speedIn, {
                value: 1,
                ease: easing
            });
});

parent.addEventListener(evtOut, function(e) {
            TweenMax.to(mat.uniforms.dispFactor, speedOut, {
                value: 0,
                ease: easing
            });
});

parent меняем на parent2

parent2.addEventListener(evtIn, function(e) {
            TweenMax.to(mat.uniforms.dispFactor, speedIn, {
                value: 1,
                ease: easing
            });
});

parent2.addEventListener(evtOut, function(e) {
            TweenMax.to(mat.uniforms.dispFactor, speedOut, {
                value: 0,
                ease: easing
            });
});
1
  • Спасибо! А что делать, если несколько таких конструкций? Пробую использовать массивы, но постоянно появляются ошибки codepen.io/spacek8989/pen/gObRaJB
    – spacek
    24 дек 2019 в 15:06
0

Для нескольких блоков. 1) Html будет выглядеть так:

<div class="ticket">
        <div class="trigger">Trigger</div>
      <div class="overlay"></div>
      <div class="flight-info">
        <h3>JUNE 30 2018 12:30PM</h3>
        <div class="flight-locations">
          <h1>LAX</h1>
          <img src="https://cdn-images-1.medium.com/max/800/1*QFU_XYAKOGJ9nunfqvem1w.png" />
          <h1>JFK</h1>
        </div>
      </div>
    </div>

    <div class="ticket">
        <div class="trigger">Trigger</div>
      <div class="overlay"></div>
      <div class="flight-info">
        <h3>JUNE 30 2018 12:30PM</h3>
        <div class="flight-locations">
          <h1>LAX</h1>
          <img src="https://cdn-images-1.medium.com/max/800/1*QFU_XYAKOGJ9nunfqvem1w.png" />
          <h1>JFK</h1>
        </div>
      </div>
    </div>

Блок "trigger" перенесен внутрь родителя "ticket"

2) Вызов функции будет след.:

Array.from(document.querySelectorAll('.ticket')).forEach((el) => {
                //const imgs = Array.from(el.querySelectorAll('img'));
                new hoverEffect({
                    parent: el,
                    parent2: el.querySelector('.trigger'),
                    intensity: el.dataset.intensity || undefined,
                    speedIn: el.dataset.speedin || undefined,
                    speedOut: el.dataset.speedout || undefined,
                    easing: el.dataset.easing || undefined,
                    hover: el.dataset.hover || undefined,
                    image1: 'https://source.unsplash.com/Le7_qK9JaLU/1600x900',
                    image2: 'https://source.unsplash.com/XAqaeyzj3NM/1600x900',
                    displacementImage: el.dataset.displacement
                });

            });

С помощью массива обращаемся к каждому блоку отдельно. Добавляем "parent2: el.querySelector('.trigger')", наш новый элемент

3) В hover.js вносим изменения:

var parent2 = opts.parent2 || console.warn("no parent2");

Будет выглядеть так:

var parent = opts.parent || console.warn("no parent");
    var parent2 = opts.parent2 || console.warn("no parent2");
    var dispImage = opts.displacementImage || console.warn("displacement image missing");
    ....

Ну и опять таки меняем блок прослушки с parent на parent2 Было:

parent.addEventListener(evtIn, function(e) {
            TweenMax.to(mat.uniforms.dispFactor, speedIn, {
                value: 1,
                ease: easing
            });
});

parent.addEventListener(evtOut, function(e) {
            TweenMax.to(mat.uniforms.dispFactor, speedOut, {
                value: 0,
                ease: easing
            });
});

Стало

parent2.addEventListener(evtIn, function(e) {
            TweenMax.to(mat.uniforms.dispFactor, speedIn, {
                value: 1,
                ease: easing
            });
});

parent2.addEventListener(evtOut, function(e) {
            TweenMax.to(mat.uniforms.dispFactor, speedOut, {
                value: 0,
                ease: easing
            });
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.