视觉盛宴：鼠标悬停带来的视差滚动效果

前端

2023-01-14 13:05:36

用CSS打造引人入胜的图片视差滚动效果

简介

图片视差滚动效果可以为你的网站增添一抹动态感，吸引浏览者的注意力。本文将深入探讨如何使用CSS的clip-path和transform属性，一步步创建一个令人惊叹的图片视差滚动效果。

第一步：准备图片素材

选择一张高质量的图片作为素材，在放大时也能保持清晰。你可以从网上下载或自己拍摄。

第二步：设置图片容器

用一个div或span标签创建图片容器，并指定适当的宽度和高度，与图片大小一致。

<div id="image-container">
  <img src="path/to/image.jpg" alt="Image Description">
</div>

第三步：添加CSS样式

设置初始状态

使用clip-path属性裁剪图片形状，transform属性设置位置和旋转角度。

#image-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

#image-container img {
  clip-path: circle(50% at center);
  transform: scale(1) rotate(0deg);
  transition: all 0.5s ease-in-out;
}

添加鼠标悬停事件

使用JavaScript或CSS的伪类触发视差效果。

document.getElementById("image-container").addEventListener("mouseover", function() {
  this.querySelector("img").style.clipPath = "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)";
  this.querySelector("img").style.transform = "scale(1.2) rotate(10deg)";
});

document.getElementById("image-container").addEventListener("mouseout", function() {
  this.querySelector("img").style.clipPath = "circle(50% at center)";
  this.querySelector("img").style.transform = "scale(1) rotate(0deg)";
});