实现图片随鼠标移动的动态视觉差特效

效果如下

 

代码如下

 <script  src="./jq/parallax.min.js"></script>

需要使用一个js的文件

 <script>

        var scene = document.getElementById('scene');

       var parallaxInstance = new Parallax(scene);

   </script>

HTML

<div class="win">
    <div class="win-bgc1">
        <h2 class="win-zi1">LPL十年记录</h2>
        <span><a class="win-zi2" href="#">LPL名人堂</a>
            <i class="win-bgc2"></i>
    </div>
    <div class="win-lpl" >
        <div id="scene">
            <img class="layer" data-depth="0.2" src="./img/LPL十年历程.png" width="1300px" height="400px" alt="LPL十年记录">
        </div>
    </div>
</div>

CSS

.win {
    width: 100%;
    background-color: #ededed;
    padding-top: 40px;
}

.win-bgc1 {
    display: flex;
    width: 1340px;
    height: 160px;
    background-color: #ededed;
    background-image: url(../img/十年经历-title-背景.png);
    background-position: 30% 70%;
    background-repeat: no-repeat;
    background-size: 1920px 120px;
    position: relative;
    margin: 0 auto;
}

.win-zi1 {
    position: absolute;
    left: 60px;
    top: 80px;
    color: #1c2132;
}

.win-zi2 {
    position: absolute;
    right: 0;
    top: 130px;
    font-size: 12px;
    color: #1c2132;
}

.win-lpl {
    width: 1300px;
    height: 400px;
    background: url(../img/winlol-bgc.jpg) no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
    background-attachment: fixed;
}

.win-lpl>img {
    margin: 0 auto;
}