Javascript

【Javascript】2つのレイヤーをスライディングエフェクトSplit-Screen-Slider

September 18, 2017
Split-Screen-Slider-

シンプルなCSSとJSを使用して2つのレイヤーをスライディングエフェクトする

HTML

<section id="wrapper" class="skewed">
    <div class="layer bottom">
      <div class="content-wrap">
        <div class="content-body">
          <h1>Look Sharp</h1>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut quisquam temporibus dolore vero reiciendis atque debitis. Sequi at consequatur deserunt?</p>
        </div>
        <img src="img/pc1.jpg" alt="">
      </div>
    </div>

    <div class="layer top">
        <div class="content-wrap">
          <div class="content-body">
            <h1>Stay Cool</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut quisquam temporibus dolore vero reiciendis atque debitis. Sequi at consequatur deserunt?</p>
          </div>
          <img src="img/pc2.jpg" alt="">
        </div>
      </div>

      <div class="handle"></div>
</section>
<script src="js/main.js"></script>