Использую Distortion Hover Effect для анимации изображений. Как настроить переключение анимации при hover на элемент "trigger"?
Мой пример https://codepen.io/spacek8989/pen/poveVGa
Оригинальная анимация https://tympanus.net/Development/DistortionHoverEffect/#
Если подобной эффект будет работать только для одного блока на странице, то можно статически прописать параметры в 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) 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
});
});
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Создал кнопку, которая при нажатии ищет панель Window (Delete)Снизу скрипт
Стал сталкиваться с такой вот ошибкой:
У меня есть WEB-сервер, созданный на C#, он основан на TcpListener и выглядит всё это так(работа с клиентом)
Во первых стоит сказать что я не очень хорош в C# и поэтому не исключаю что ответ довольно простойТем не менее, в игре которую я делаю, я хочу...