鼠标悬浮图片特效如何实现？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1947个文字，预计阅读时间需要8分钟。
使用npm安装hover-effect插件，并在代码中引入使用：
javascriptnpm install hover-effectimport 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...'});
新手入门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: '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: 'images.unsplash.com/photo-1494756739853-38af58aa9dd0?ixlib=rb-0.3.5&s=121d4a13a0ca8125ea7bb70eae292900&auto=format&fit=crop&w=1351&q=80',
displacementImage: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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>
演示网址tympanus.net/Development/DistortionHoverEffect/#
rippleEffectgithub.com/SaboSuke/ripple-hover-effect
水平波纹的效果
github.com/victorqribeiro/rippleEffect
victorribeiro.com/rippleEffect/
决定自己的高度的是你的态度，而不是你的才能 记得我们是终身初学者和学习者总有一天我也能成为大佬
本文共计1947个文字，预计阅读时间需要8分钟。
使用npm安装hover-effect插件，并在代码中引入使用：
javascriptnpm install hover-effectimport 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...'});
新手入门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: '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: 'images.unsplash.com/photo-1494756739853-38af58aa9dd0?ixlib=rb-0.3.5&s=121d4a13a0ca8125ea7bb70eae292900&auto=format&fit=crop&w=1351&q=80',
displacementImage: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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>
演示网址tympanus.net/Development/DistortionHoverEffect/#
rippleEffectgithub.com/SaboSuke/ripple-hover-effect
水平波纹的效果
github.com/victorqribeiro/rippleEffect
victorribeiro.com/rippleEffect/
决定自己的高度的是你的态度，而不是你的才能 记得我们是终身初学者和学习者总有一天我也能成为大佬