Как настроить работу скрипта?

205
10 января 2022, 02:40

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

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

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

Answer 1

Если подобной эффект будет работать только для одного блока на странице, то можно статически прописать параметры в 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
            });
});
Answer 2

Для нескольких блоков. 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
            });
});
READ ALSO
NullReferenceException при поиске с использованием GameObject.Find

NullReferenceException при поиске с использованием GameObject.Find

Создал кнопку, которая при нажатии ищет панель Window (Delete)Снизу скрипт

80
Getting control 1&#39;s position in a group with only 1 controls when doing repaint (Unity)

Getting control 1's position in a group with only 1 controls when doing repaint (Unity)

Стал сталкиваться с такой вот ошибкой:

325
Как отправить изображение вместе с Html в C#

Как отправить изображение вместе с Html в C#

У меня есть WEB-сервер, созданный на C#, он основан на TcpListener и выглядит всё это так(работа с клиентом)

185
Как в Юнити 2D менять изображение?

Как в Юнити 2D менять изображение?

Во первых стоит сказать что я не очень хорош в C# и поэтому не исключаю что ответ довольно простойТем не менее, в игре которую я делаю, я хочу...

156