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 that you have read and understand our privacy policy and code of conduct.

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