鼠標懸浮圖片的特效

新手入門

npm install hover-effect

使用

import hoverEffect from 'hover-effect'

 new hoverEffect({
    parent: document.querySelector('.ticket'),
    intensity1: 0.1,
    intensity2: 0.1,
    angle2: Math.PI / 2,
    image1: 'https://images.unsplash.com/photo-1518824547657-2bb07e2978ba?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&ixid=eyJhcHBfaWQiOjF9&s=942862481ea16bf420e9014eb479e866',
    image2: 'https://images.unsplash.com/photo-1494756739853-38af58aa9dd0?ixlib=rb-0.3.5&s=121d4a13a0ca8125ea7bb70eae292900&auto=format&fit=crop&w=1351&q=80',
    displacementImage: 'https://cdn.rawgit.com/robin-dela/hover-effect/b6c6fd26/images/stripe1mul.png?raw=true'
  });

<div class="ticket" style="width: 400px;height: 400px;"></div>

image1 照片1

image2 照片2

displacemenImage 兩者之間的過渡照片

我們可以實驗下換一行照片

displacementImage: 'https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2018/04/1.jpg'

就有了另一種特效

文檔

姓名	類型	默認	描述
parent	Dom element	null	將注入動畫的 DOM 元素。動畫的圖像將採用父級的大小。
image1	Image	null	Image動畫的第一部。
image2	Image	null	動畫的第二部Image。
displacementImage	Image	null	Image用於在兩個主要圖像之間進行過渡。

可選參數

姓名	類型	默認	描述
intensity	Float	1	用於確定失真效果的強度。0 是沒有效果，1 是完全失真。
intensity1	Float	intensity	覆蓋第一張圖像的失真強度。
intensity2	Float	intensity	覆蓋第二張圖像的失真強度。
angle	Float	Math.PI / 4	以弧度表示的扭曲效果的角度。默認爲 Pi / 4（45 度）。
angle1	Float	angle	覆蓋第一張圖像的扭曲角度。
angle2	Float	-angle * 3	覆蓋第二張圖像的扭曲角度。
speedIn	Float	1.6	入站動畫的速度（以秒爲單位）。
speedOut	Float	1.2	出站動畫的速度（以秒爲單位）。
hover	Boolean	true	如果設置爲 false，則不會在懸停時觸發動畫（請參閱next和previous函數進行交互）
easing	String	Expo.easeOut	過渡的緩和，見greensock easing
video	Boolean	false	定義是否要使用視頻而不是圖像（注意：您需要 2 個視頻，它不適用於一個圖像和一個視頻。）
imagesRatio	Float	1	如果您想要一種background: cover行爲類型，請指定一個值，否則它將應用方形縱橫比。用法：image height / image width示例：1080 / 1920

方法

姓名	描述
next	過渡到第二張圖片。
previous	過渡到第一張圖片。

來一個完整的案例

 import hoverEffect from 'hover-effect'

   const el: any = document.querySelector('.ticket')
    new hoverEffect({
      parent: el,
      intensity1: -0.65,
      speedIn: 1.2,
      speedOut: 1.2,
      image1: 'https://images.unsplash.com/photo-1518824547657-2bb07e2978ba?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&ixid=eyJhcHBfaWQiOjF9&s=942862481ea16bf420e9014eb479e866',
      image2: 'https://images.unsplash.com/photo-1494756739853-38af58aa9dd0?ixlib=rb-0.3.5&s=121d4a13a0ca8125ea7bb70eae292900&auto=format&fit=crop&w=1351&q=80',
      displacementImage: '/assets/8.jpg'
    });

    const el1: any = document.querySelector('.ticket1')
    new hoverEffect({
      parent: el1,
      intensity1: 0.2,
      speedIn: 1.6,
      speedOut: 1.6,
      image1: 'https://images.unsplash.com/photo-1518824547657-2bb07e2978ba?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&ixid=eyJhcHBfaWQiOjF9&s=942862481ea16bf420e9014eb479e866',
      image2: 'https://images.unsplash.com/photo-1494756739853-38af58aa9dd0?ixlib=rb-0.3.5&s=121d4a13a0ca8125ea7bb70eae292900&auto=format&fit=crop&w=1351&q=80',
      displacementImage: '/assets/4.png'
    });
    const el2: any = document.querySelector('.ticket2')
    new hoverEffect({
      parent: el2,
      intensity1: -.4,
      speedIn: 0.7,
      speedOut: 0.3,
      easing:'Sine.easeOut',
      image1: 'https://images.unsplash.com/photo-1518824547657-2bb07e2978ba?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&ixid=eyJhcHBfaWQiOjF9&s=942862481ea16bf420e9014eb479e866',
      image2: 'https://images.unsplash.com/photo-1494756739853-38af58aa9dd0?ixlib=rb-0.3.5&s=121d4a13a0ca8125ea7bb70eae292900&auto=format&fit=crop&w=1351&q=80',
      displacementImage: '/assets/1.jpg'
    });
    const el4: any = document.querySelector('.ticket3')
    new hoverEffect({
      parent: el4,
      intensity1: 0.9,
      speedIn: 0.8,
      speedOut: 0.4,
      easing:'Circ.easeOut',
      image1: 'https://images.unsplash.com/photo-1518824547657-2bb07e2978ba?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&ixid=eyJhcHBfaWQiOjF9&s=942862481ea16bf420e9014eb479e866',
      image2: 'https://images.unsplash.com/photo-1494756739853-38af58aa9dd0?ixlib=rb-0.3.5&s=121d4a13a0ca8125ea7bb70eae292900&auto=format&fit=crop&w=1351&q=80',
      displacementImage: '/assets/7.jpg'
    });
    const el5: any = document.querySelector('.ticket4')
    new hoverEffect({
      parent: el5,
      intensity1: 0.7,
      speedIn: 1,
      speedOut: 0.5,
      easing:'Power2.easeOut',
      image1: 'https://images.unsplash.com/photo-1518824547657-2bb07e2978ba?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&ixid=eyJhcHBfaWQiOjF9&s=942862481ea16bf420e9014eb479e866',
      image2: 'https://images.unsplash.com/photo-1494756739853-38af58aa9dd0?ixlib=rb-0.3.5&s=121d4a13a0ca8125ea7bb70eae292900&auto=format&fit=crop&w=1351&q=80',
      displacementImage: '/assets/10.jpg'
    });
    const el6: any = document.querySelector('.ticket5')
    new hoverEffect({
      parent: el6,
      intensity1: 0.6,
      speedIn: 1.2,
      speedOut: 0.5,
      easing:'Power2.easeOut',
      image1: 'https://images.unsplash.com/photo-1518824547657-2bb07e2978ba?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&ixid=eyJhcHBfaWQiOjF9&s=942862481ea16bf420e9014eb479e866',
      image2: 'https://images.unsplash.com/photo-1494756739853-38af58aa9dd0?ixlib=rb-0.3.5&s=121d4a13a0ca8125ea7bb70eae292900&auto=format&fit=crop&w=1351&q=80',
      displacementImage: '/assets/6.jpg'
    });
    const el7: any = document.querySelector('.ticket6')
    new hoverEffect({
      parent: el7,
      intensity1: 0.4,
      speedIn: 1,
      speedOut: 1,
      image1: 'https://images.unsplash.com/photo-1518824547657-2bb07e2978ba?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&ixid=eyJhcHBfaWQiOjF9&s=942862481ea16bf420e9014eb479e866',
      image2: 'https://images.unsplash.com/photo-1494756739853-38af58aa9dd0?ixlib=rb-0.3.5&s=121d4a13a0ca8125ea7bb70eae292900&auto=format&fit=crop&w=1351&q=80',
      displacementImage: '/assets/11.jpg'
    });
    const el8: any = document.querySelector('.ticket7')
    new hoverEffect({
      parent: el8,
      intensity1: 0.6,
      speedIn: 1,
      speedOut: 1,
      image1: 'https://images.unsplash.com/photo-1518824547657-2bb07e2978ba?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&ixid=eyJhcHBfaWQiOjF9&s=942862481ea16bf420e9014eb479e866',
      image2: 'https://images.unsplash.com/photo-1494756739853-38af58aa9dd0?ixlib=rb-0.3.5&s=121d4a13a0ca8125ea7bb70eae292900&auto=format&fit=crop&w=1351&q=80',
      displacementImage: '/assets/2.jpg'
    });
    const el9: any = document.querySelector('.ticket8')
    new hoverEffect({
      parent: el9,
      intensity1: -0.1,
      speedIn: 0.4,
      speedOut: 0.4,
      easing:'power2.easeInOut',
      image1: 'https://images.unsplash.com/photo-1518824547657-2bb07e2978ba?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&ixid=eyJhcHBfaWQiOjF9&s=942862481ea16bf420e9014eb479e866',
      image2: 'https://images.unsplash.com/photo-1494756739853-38af58aa9dd0?ixlib=rb-0.3.5&s=121d4a13a0ca8125ea7bb70eae292900&auto=format&fit=crop&w=1351&q=80',
      displacementImage: '/assets/15.jpg'
    });
    const el10: any = document.querySelector('.ticket9')
    new hoverEffect({
      parent: el10,
      intensity1: 0.2,
      image1: 'https://images.unsplash.com/photo-1518824547657-2bb07e2978ba?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&ixid=eyJhcHBfaWQiOjF9&s=942862481ea16bf420e9014eb479e866',
      image2: 'https://images.unsplash.com/photo-1494756739853-38af58aa9dd0?ixlib=rb-0.3.5&s=121d4a13a0ca8125ea7bb70eae292900&auto=format&fit=crop&w=1351&q=80',
      displacementImage: '/assets/13.jpg'
    });

<div style="display: flex; flex-direction: row-reverse">
  <div class="ticket" style="width: 825px;height: 825px;"></div>
</div>
<div class="ticket1" style="width: 400px;height: 400px;"></div>
<div class="ticket2" style="width: 400px;height: 400px;"></div>
<div class="ticket3" style="width: 400px;height: 400px;"></div>
<div class="ticket4" style="width: 400px;height: 400px;"></div>
<div class="ticket5" style="width: 400px;height: 400px;"></div>
<div class="ticket6" style="width: 400px;height: 400px;"></div>

演示網址https://tympanus.net/Development/DistortionHoverEffect/#

ripple-hover-effect

https://github.com/SaboSuke/ripple-hover-effect

rippleEffect

水平波紋的效果

https://github.com/victorqribeiro/rippleEffect

https://victorribeiro.com/rippleEffect/