jQuery

【jQuery】フェードイングリッドを構築するFade in Grid on Scroll

July 1, 2017
fade in grid on scroll

Fade in Grid on Scrollはページを下にスクロールするとカードをフェードインするグリッドを作成する。

<div class="container">
    <section class="float-cards">

      <div class="left-side">

        <!--  -->
        <div class="card shown bg-alt1">

          <figure class="feature-item">
            <div class="screen">
              <!-- iPhone demo goes here -->
              <video type="video/mp4" src=""></video>
            </div>
          </figure>

          <div class="card-copy">
            <h3>Add your title here.</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
          </div>

        </div>
....
      </div>

    </section>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
  <script src="assets/script.js"></script>