html 视差上鼠标移动

Posted 2021-05-10

$('.js-parallax').parallax();

/*=PARALLAX=*/
.parallax-wrapper {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 50%;
    max-width: 1920px;
    height: 100%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
.parallax-scene {
    overflow: hidden;
    width: 100%;
    height: 100%;
    li {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
}

<div class="parallax-wrapper">  
  <ul class="parallax-scene js-parallax" data-scalar-y="2">
    <li class="layer" data-depth="0.05">
      <img src="img/p-home-story-1.png" alt="">
    </li>
    <li class="layer" data-depth="0.15">
      <img src="img/p-home-story-2.png" alt="">
    </li>
  </ul>
</div>