当前位置 : 主页 > 编程语言 > 其它开发 >

鼠标悬浮图片的特效

来源：互联网 收集：自由互联 发布时间：2022-05-30
新手入门 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/pho
新手入门 
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/

决定自己的高度的是你的态度，而不是你的才能 记得我们是终身初学者和学习者

总有一天我也能成为大佬

上一篇：芯片背景知识（一）SoC设计流程，SoC描述层次
下一篇：没有了
网友评论
相关栏目
最近更新
热门文章