雲の足跡 ｜ 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

このブログ記事をツイッターで共有する
このブログ記事をフェイスブックで共有する
このブログ記事をラインで共有する
このブログ記事をはてなでブックマークする

このブログについて

WEBを張り巡らせるクモであったり
空をただようくもであったりしたい
WEBエンジニアの日々の足跡

雲の足跡