制作ノウハウ swiperでパララックスを使ってみた
2018年06月29日
swiperでパララックスを使ってみた
ホームページのメインスライダー画像であったり、
ヒーローイメージであったり、
画像をスライド表示させるプラグイン等はたくさんのエンジニアが書いています。
先日スライド画像要素の中身を遅延でアニメーションするという話を聞いたので、
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 directiondata-swiper-parallax-y - same but for y-axis directiondata-swiper-parallax-scale - scale ratio of the parallax element when it is in "inactive" (not on active slide) statedata-swiper-parallax-opacity - opacity of the parallax element when it is in "inactive" (not on active slide) statedata-swiper-parallax-duration - custom transition duration for parallax elementsマークアップするだけで簡単にパララックスでスライダーが動き出します。
