一个有趣的图片过度动画效果

前言

昨天在网上冲浪的时候,看到了一个关于AI修正图片的网站(GoEnhance AI - Video to video, Image enhancer and upscaler),这个网站上面有一个图片过渡的效果,就是根据你的鼠标移动来改变图片的展示效果。

实现原理

我看到这个效果的一瞬间就感到很好玩,于是就想了想怎么实现它,发现还是很简单的。

首先

我们先创建一个大盒子(.container),在它里面创建两个子盒子(.box),再在这两个盒子里面分别添加一个img图片标签。(ps:当然你也可以直接将图片放到子盒子中,当它们的背景图片)

ini 复制代码
<div class="container" id="container">
      <div class="box">
        <img src="./images/at.jpg" alt="你自己图片地址">
      </div>
      <div class="box" id="box2">
        <img src="./images/gs.jpg" alt="你自己图片地址">
      </div>
      <div class="line" id="line"></div>
 </div>

然后

我们开始写css样式。

css 复制代码
 * {
        margin: 0;
        padding: 0;
      }
      .container {
        width: 500px;
        height: 500px;
        margin: 0 auto;
        position: relative;
      }
      .box {
        width: 100%;
        text-align: center;
        position: absolute;
        overflow: hidden;
      }
      img {
        height: 500px;
      }
      .box:nth-child(2) {
        width: 50%;
      }
      .line{
        content: '';
        position: absolute;
        height: 100%;
        border: 1px solid #000;
        left: 50%;
        transform: translate(50%);
      }

最后

我们开始写js执行脚本,思路是先获取.cantainer、.line和.box2的元素节点,然后再在 .cantainer盒子上面绑定一个鼠标移动事件,再然后获取鼠标在视图上的x轴的位置和.cantainer在视图上的x轴的位置,将它们相减就可以得到鼠标在.cantainer上的位置了,最后把它赋值给.line和.box2上面就好。js代码如下:

ini 复制代码
var con = document.getElementById('container')
    var line = document.getElementById('line')
    var box2 = document.getElementById('box2')
    con.addEventListener('mousemove', (event)=>{
        var mouseX = event.clientX

        var boxRect = con.getBoundingClientRect()
        var boxX = boxRect.left

        var offsetX = mouseX - boxX

        
        line.style.left = `${offsetX}px`
        box2.style.width = `${offsetX}px`
        console.log(offsetX)
    })
   console.log(con.style)

实现效果

相关推荐
teeeeeeemo几秒前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
每天开心23 分钟前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
zhanshuo41 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
JohnYan41 分钟前
模板+数据的文档生成技术方案设计和实现
javascript·后端·架构
撰卢1 小时前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机1 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js
sophister1 小时前
Flex 布局中容易踩的那些坑,你踩过几个?
前端·css·html
lemonzoey1 小时前
Node.js child_process 核心 API 详解
前端·javascript
lemonzoey1 小时前
pnpm 与 npm 的依赖管理机制深度解析
前端·javascript
lemonzoey1 小时前
PNPM 全局存储机制深度解析
前端·javascript