スタッフブログ STAFF BLOG
雲の足跡 | 2018.06.29
swiperでパララックスを使ってみた
DEMO
ホームページのメインスライダー画像であったり、
ヒーローイメージであったり、
画像をスライド表示させるプラグイン等はたくさんのエンジニアが書いています。
先日スライド画像要素の中身を遅延でアニメーションするという話を聞いたので、
swiper.jsのパララックスを使ってみました。
Swiperの使い方
公式 : http://idangero.us/swiper/
とりあえず、cssとjsを読み込みます。
公式のdemoをそのまま使ってみる
そしてswiperの記述
とりあえず動かすだけならこれで大丈夫です。
Swiperでパララックス(parallax)
オプションをtrueにしましょう。
swiper-slideの子要素達にマークアップしましょう
マークアップするだけで簡単にパララックスでスライダーが動き出します。
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エンジニアの日々の足跡

雲の足跡