• FVM大賞2015 優秀賞 受賞
  • 平成26年度福岡市トライアル発注認定事業者
  • 平成25年度福岡市ステップアップ最優秀賞 受賞
  • 平成25年度九州ニュービジネス優秀賞 受賞
  • 福岡県情報セキュリティ連絡協議会加盟企業
  • 福岡ベンチャーマーケットプレゼン企業
  • 福岡大学共同開発企業
  • 経営革新計画 第1936承認企業
  • 平成23年度九州地域中小企業事業家支援
    お助け隊事業アドバイザー企業
  • 平成23年度福岡市競争入札参加有資格企業

雲の足跡

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

2018年6月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