<template>
  <div class="efficient">
    <div data-depth="2.2" ref="efficient" class="content">
      <div data-depth="0.1">
        <img class="img3 animate__animated animate__fadeInTopRight" src="./images/3.png"/>
      </div>
      <div data-depth="0.3">
        <img class="img1 animate__animated animate__fadeInTopLeft" src="./images/1.png"/>
      </div>
      <div data-depth="0.5">
        <img class="img2 animate__animated animate__fadeInBottomRight" src="./images/2.png"/>
      </div>
    </div>
  </div>
</template>
<script>
import Parallax from 'parallax-js'
export default {
  name: 'efficient',
  mounted() {
    // const parallaxInstance = new Parallax(this.$refs.efficient, {
    //   relativeInput: true,
    //   hoverOnly: true,
    // })
    // parallaxInstance.friction(0.2, 0.2)
  }
}
</script>
<style lang="less" scoped>
  .efficient{
    .content{
      margin: auto;
      position: relative;
      .img1{
        width: 466px;
        top: 50px;
        left: 285px;
        &:hover{
          margin-top: -10px;
          margin-left: -10px;
        }
      }
      .img2{
        width: 636px;
        top: 142px;
        left: 350px;
        &:hover{
          margin-top: 10px;
          margin-left: 10px;
        }
      }
      .img3{
        width: 93px;
        top: 80px;
        left: 700px;
      }
      >div{
        padding: 30px;
        >img{
          position: absolute;
          transition: all .3s ease-in-out;
        }
      }
    }
  }
</style>
