【 WEBデザイン 】 パララックス用ライブラリ 「skrollr.js 」 FirE♯543
パララックス用ライブラリ 「skrollr.js 」と、「グリッドレイアウト」を使って、画像に動きをつけて表示してみます。
【 実装するもの 】
こちらを実装します。
サイズを"0.5"でご覧ください。
グリッドレイアウトで、配置した画像を、スクロール値に応じて、動きをつけて表示します。
この動きの指定は、HTMLで行います。
【 skrollr.js 】
「skrollr」というライブラリを利用します。ダウンロードして使う場合は、こちらです。
https://github.com/Prinzhorn/skrollr
今回は、CDNを使って実装します。
jQueryを利用しているためそちらも読み込む必要があります。
読み込みは、HTMLの<head>タグ内で行います。
では、HTMLです。
■ HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--reset CSS-->
<link rel="stylesheet" href="css/reset.css">
<!--CSS-->
<link rel="stylesheet" href="css/style.css">
<title>skrollr</title>
<!--jQuery読み込み-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!--skrollr読み込み-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"
integrity="sha512-A2+khatRDWHUE2VUtN4xUTkr1nc4YfDBw9Sg3ea6x0aRPfpcYieDZji4D2edDHy/yF5NsYzP7kL8sSM8s5EqCw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<header>
<h1>skrollr</h1>
</header>
<div class="photoGarelly-container">
<!--グリッドレイアウト-->
<ul class="photoGarelly">
<!--アイテム１-->
<li class="item01" data-0="transform:translate(-110%,0);" data-200="transform:translate(0%,0);">
<p class="text">Menu01</p>
<img src="https://drive.google.com/uc?export=view&id=1IqbAvVw9cK56RMxQPMsy9q_465j-m6P1" alt="">
</li>
<!--アイテム2-->
<li class="item02" data-500="transform: scale(0);" data-800="transform: scale(1);">
<p class="text-small">Menu02</p>
<img src="https://drive.google.com/uc?export=view&id=1o3bZFvMN0pzmNfFxpD-8RAt1X-4HxucY" alt="">
</li>
<!--アイテム3-->
<li class="item03" data-0="transform:translate(110%,0);" data-500="transform:translate(0%,0);">
<p class="text-small">
Menu03</p>
<img src="https://drive.google.com/uc?export=view&id=1KOR2ZHjkPWoTedLfjM39PHS0dD6X87n1" alt="">
</li>
<!--アイテム4-->
<li class="item04" data-0="transform:translate(110%,0);" data-600="transform:translate(0%,0);">
<p class="text-small">
Menu04</p>
<img src="https://drive.google.com/uc?export=view&id=1CajH5VpwTlgAy6Cv27S1IiY2MDkznhjc" alt="">
</li>
<!--アイテム5-->
<li class="item05" data-0="transform:translate(110%,0);" data-1200="transform:translate(0%,0);">
<p class="text">
Menu05</p>
<img src="https://drive.google.com/uc?export=view&id=1cO9d3BJV_ERL88pEg1TgjePgdRlfxHRp" alt="">
</li>
<!--アイテム6-->
<li class="item06" data-0="transform:translate(-110%,0);" data-1600="transform:translate(0%,0);">
<p class="text-small">
Menu06</p>
<img src="https://drive.google.com/uc?export=view&id=1aj-j33i5Avsu8SlLKgQhmpKf9Lh-KSBO" alt="">
</li>
<!--アイテム7-->
<li class="item07" data-0="transform:rotateY(0deg);" data-1300="transform:rotateY(180deg);" data-1500="transform:rotateZ(360deg);">
<p class="text">
Menu07</p>
<img src="https://drive.google.com/uc?export=view&id=1re1ivj62Mx7lEaB7Y703cKsfgw_d7eVJ" alt="">
</li>
</ul>
</div>
<!--jsファイル読み込み-->
<script src="skrollr.js"></script>
</body>
</html><ul>は、グリッドコンテナーとなります。
この中身、<li>の中の画像を動かしたいのでこのように書ききます。
<!--アイテム１-->
<li class="item01" data-0="transform:translate(-110%,0);" data-200="transform:translate(0%,0);">
<p class="text">Menu01</p>
<img src="https://drive.google.com/uc?export=view&id=1IqbAvVw9cK56RMxQPMsy9q_465j-m6P1" alt="">
</li><li>の中の、data-0= に続いて動きを指定します。
<!--アイテム１-->の場合は、この部分が動きを指定しています。
data-0="transform:translate(-110%,0);"
data-200="transform:translate(0%,0);data-0 は、スクロール値が0の時という意味です。
つまり、
スクロール値が0の時は、transform:translate(-110%,0); する。
-110%の位置＝左側の画面外に位置を変更します。
そして、200の位置までスクロールされるまでに、transform:translate(0%,0)するなので、0%の位置＝元の位置に戻します。
200の位置になったら、一気に元の位置に戻るのでは、200の位置になるまでに、元の位置へ移動してくるで、スクロールに応じて画像が動きます。
続いて、CSSです。
■ CSS
@charset "utf-8";
html {
overflow: auto;
}
body {
overflow: hidden;
}
header {
width: 100%;
height: 200px;
text-align: center;
}
h1{
font-size:120px;
}
.menu {
position: fixed;
right: 6%;
top: 6%;
z-index: 999;
}
.menu span {
display: block;
width: 40px;
height: 2px;
background-color: #00f;
margin-bottom: 8px;
}
.photoGarelly {
display: grid;
grid-template-rows: 400px 300px 300px 400px 400px;
grid-template-columns: 1fr;
gap: 10px;
grid-template-areas:
"item01 item01"
"item02 item03"
"item02 item04"
"item05 item05"
"item06 item07";
}
.item01 {
grid-area: item01;
}
.item02 {
grid-area: item02;
}
.item03 {
grid-area: item03;
}
.item04 {
grid-area: item04;
}
.item05 {
grid-area: item05;
}
.item06 {
grid-area: item06;
}
.item07 {
grid-area: item07;
}
.photoGarelly li img {
width: 100%;
height: 100%;
object-fit: cover;
}
.text {
font-size: 100px;
color: #fff;
position: absolute;
top: 20%;
right: 10%;
}
.text-small {
font-size: 60px;
color: #fff;
position: absolute;
top: 20%;
right: 10%;
}
CSSのポイントは、グリッドレイアウトです。
こわしくはこちらです。
■ JavaScript
var s = skrollr.init();
//('.js-rellax');は好きなクラス名でOK!
var rellax = new Rellax(".js-rellax");JSはこれだけ。
コピペで完了です。
【 完成 】
再度こちら。
グリッドレイアウトを変更したり、動きを変更してカスタマイズできます。
実装したい動きを試してみましょう。
【 まとめ 】
skrollr.jsを使って、画像に動きをつける方法を解説しました。
簡単に実装できるので、ぜひ使ってみてください。