<!--
 * 图像悬停扭曲效果
 * https://www.youtube.com/@OnlineTutorialsYT/playlists
 * https://www.youtube.com/watch?v=ZcJ4ANTP8zk&list=PL5e68lK9hEzdwblnDobNUCJKm6mFoWP8m&index=2
 * https://github.com/robin-dela/hover-effect
  -->
<script setup lang="ts">
import { onMounted } from 'vue';
import hoverEffect from 'hover-effect';

onMounted(() => {
  Array.from(document.querySelectorAll('.img-box')).forEach((e) => {
    const imgs = Array.from(e.querySelectorAll('img'));
    new hoverEffect({
      parent: e,
      intensity: 0.3,
      image1: imgs[0].getAttribute('src'),
      image2: imgs[1].getAttribute('src'),
      displacementImage: imgs[0].getAttribute('src'),
    });
  });
});
</script>
<template>
  <div class="box">
    <div class="container">
      <div class="img-box">
        <img src="../imgs/2.jpg" alt="" />
        <img src="../imgs/4.jpg" alt="" />
      </div>
      <div class="img-box">
        <img src="../imgs/5.jpg" alt="" />
        <img src="../imgs/6.jpg" alt="" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.box {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  position: relative;
  width: 1480px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .img-box {
    position: relative;
    width: 700px;
    height: 400px;
    margin: 20px;
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      // https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit
      object-fit: cover;
      display: none;
    }
  }
}
</style>
