スライダーのパララックス実装は手間がかかるイメージがありますが、Swiperを使った場合は数行のコードで作ることができます。公式サイトの説明はこちら
まずはサンプルをどうぞ。
See the Pen Swiper Parallax Simple by hakoirioyaji (@hakoirioyaji) on CodePen.
背景が固定化されて少しズームしたり、テキストが少しずれて表示されたりと一見手間がかかりそうなパララックスです。普通に作るならCSSのtransitionを考えたり、JSをゴリゴリ書く必要がありますが、これを数行で作ることが可能です。
JSコードは以下のようになります。
new Swiper('.swiper', {
speed: 1000,
autoplay: {
delay: 5000
},
loop: true,
allowTouchMove: true,
parallax: true
});Swiperのパラメーターに8行目のparallax: trueを入れるだけで、あとはHTMLにパララックスの動作コードを書くだけです。
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80"
data-swiper-parallax-x="100%"
data-swiper-parallax-scale="1.1">
<div class="texts"
data-swiper-parallax-x="80%"
data-swiper-parallax-opacity="0">
<p class="title"
data-swiper-parallax-x="-60%"
data-swiper-parallax-duration="1000">Tokyo</p>
<p data-swiper-parallax-x="-60%"
data-swiper-parallax-duration="1100">Tokyo is the political and economic center of the country, as well as the seat
of the Emperor of Japan and the national government. As of 2021, the prefecture has an estimated population
of 14.04 million.</p>
</div>
</div>
</div>
</div>6, 7行目のようにdata-swiper-parallax-***のdata属性を入れるだけでパララックスを実現できます。
設定可能な項目は以下です。
data-swiper-parallax-x- X軸の設定data-swiper-parallax-y- y軸の設定data-swiper-parallax-scale- 非アクティブスライドのスケール値data-swiper-parallax-opacity- 非アクティブスライドの透過値data-swiper-parallax-duration- トランジションの時間
殆どの場合はこの項目だけで十分なアニメーションが作れると思います。
JSとHTMLはこれだけで、後はCSSに画像を固定化させるコード等を少しだけ入れて完了です。
非常に短い時間とコードでパララックスを実装できるので、何か物足りないなと感じたら試してみてはどうでしょうか。
もっと凝った事をするならEventsのsliderMoveなど各種イベントを駆使して自作するか、ソースコードを拡張することになるので、何にしてもソースコードを見るのが近道だと思います。
コピペで試せるソースコード
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Swiper Parallax</title>
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
<style>
* {
box-sizing: border-box;
}
html {
font-size: 10px;
}
body {
margin: 0;
font-size: 1.6rem;
letter-spacing: 0.1em;
color: #fff;
background: #000;
}
h1 {
text-align: center;
}
.swiper-slide {
width: 100%;
height: 400px;
overflow: hidden;
padding: 2em;
}
.swiper-slide img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.swiper-slide .texts {
min-width: 40%;
max-width: 600px;
padding: 1.5em;
background-color: rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.swiper-slide .title {
font-size: 3rem;
margin-top: 0;
}
</style>
</head>
<body>
<h1>Swiper Parallax</h1>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" data-swiper-parallax-x="100%" data-swiper-parallax-scale="1.1">
<div class="texts" data-swiper-parallax-x="80%" data-swiper-parallax-opacity="0">
<p class="title" data-swiper-parallax-x="-60%" data-swiper-parallax-duration="1000">Tokyo</p>
<p data-swiper-parallax-x="-60%" data-swiper-parallax-duration="1100">Tokyo is the political and economic center of the country, as well as the seat
of the Emperor of Japan and the national government. As of 2021, the prefecture has an estimated population
of 14.04 million.</p>
</div>
</div>
<div class="swiper-slide">
<img src="https://images.unsplash.com/photo-1492666673288-3c4b4576ad9a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" data-swiper-parallax-x="100%" data-swiper-parallax-scale="1.1">
<div class="texts" data-swiper-parallax-x="80%" data-swiper-parallax-opacity="0">
<p class="title" data-swiper-parallax-x="-60%" data-swiper-parallax-duration="1000">New York</p>
<p data-swiper-parallax-x="-60%" data-swiper-parallax-duration="1100">New York, often called New York City (NYC) to distinguish it from the state of New York, is the most populous city in the United States. With a 2020 population of 8,804,190 distributed over 300.46 square miles (778.2 km2), New York City is also the most densely populated major city in the United States.</p>
</div>
</div>
<div class="swiper-slide">
<img src="https://images.unsplash.com/photo-1513635269975-59663e0ac1ad?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" data-swiper-parallax-x="100%" data-swiper-parallax-scale="1.1">
<div class="texts" data-swiper-parallax-x="80%" data-swiper-parallax-opacity="0">
<p class="title" data-swiper-parallax-x="-60%" data-swiper-parallax-duration="1000">London</p>
<p data-swiper-parallax-x="-60%" data-swiper-parallax-duration="1100">London is the capital and largest city of England and the United Kingdom. It stands on the River Thames in south-east England at the head of a 50-mile (80 km) estuary down to the North Sea, and has been a major settlement for two millennia.[9] The City of London, its ancient core and financial centre, was founded by the Romans as Londinium and retains boundaries close to its medieval ones.</p>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script>
new Swiper('.swiper', {
speed: 1000,
autoplay: {
delay: 5000,
},
loop: true,
allowTouchMove: true,
parallax: true,
});
</script>
</body>
</html>おまけ
See the Pen Swiper Parallax Simple 2 by hakoirioyaji (@hakoirioyaji) on CodePen.
コメント