鼠标悬浮图片的特效

新手入门

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/

posted @ 2022-04-30 14:53 猫神甜辣酱阅读(279) 评论(0) 编辑收藏举报

刷新页面返回顶部

房东家的猫