雲の足跡｜ 2018.06.29

swiperでパララックスを使ってみた

DEMO

ホームページのメインスライダー画像であったり、
ヒーローイメージであったり、
画像をスライド表示させるプラグイン等はたくさんのエンジニアが書いています。

先日スライド画像要素の中身を遅延でアニメーションするという話を聞いたので、
swiper.jsのパララックスを使ってみました。

Swiperの使い方
公式 : http://idangero.us/swiper/

とりあえず、cssとjsを読み込みます。


<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/
    4.3.3/css/swiper.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.js"></script>
  </head>
  <body>
  </body>
</html>

公式のdemoをそのまま使ってみる


<body>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
  </div>

  <!-- Swiper JS -->
  <script src="../dist/js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container');
  </script>
</body>

そしてswiperの記述


<script>
  var swiper = new Swiper('.swiper-container');
</script>

とりあえず動かすだけならこれで大丈夫です。

Swiperでパララックス(parallax)

オプションをtrueにしましょう。


var swiper = new Swiper('.swiper-container', {
  parallax: true,
});

swiper-slideの子要素達にマークアップしましょう


data-swiper-parallax-x - same but for x-axis direction
data-swiper-parallax-y - same but for y-axis direction
data-swiper-parallax-scale - scale ratio of the parallax element 
when it is in "inactive" (not on active slide) state
data-swiper-parallax-opacity - opacity of the parallax element 
when it is in "inactive" (not on active slide) state
data-swiper-parallax-duration - custom transition duration for parallax elements

マークアップするだけで簡単にパララックスでスライダーが動き出します。

DEMO