2022.1.16 更新
皆さまこんにちは。
本日はパララックス(視差効果)が簡単に実装出来るskrollrというライブラリをを使ってみましたので、ご紹介しようと思います。
デモを作ってみましたので、こちらをご覧下さい。
skrollr.jsをダウンロードし、htmlファイルに読み込む
まずGitHubからskrollr.jsをダウンロードします。
html側にはskrollr.min.jsファイルとjqueryを読み込ませます。
下のコードをhtmlのどこかにペースト、以上です。簡単ですね！
<script src="js/skrollr.min.js"></script>
<script>
var s = skrollr.init();
</script>デモではほぼ全てのdivにdata属性をつけて動かしています。
ポイントは、
- data-○○=”ここに普通にcssを書く”
- 色はrgb(a)かhsl(a)で指定する
- 単位を揃える。%やpxを混ぜて使わない
- ベンダプレフィックスは必要なし
- skrollrにはmodeが二つ。[absolute mode] とは、スクロール量で変化させるモード
- [relative mode] とは、data-anchor-targetを指定し相対的に変化させるモード
私は6.の[relative mode]のdata-anchor-targetの使い方に最初つまずきました。
「要素Aが現れたら要素Bがアクションを起こす」としたい場合、
要素Aにidを付けておいて、要素Bにdata-anchor-target=”#要素Aにつけたid名”を記述し、起こしたいアクションを続けて記述する。
これだけのことだったのでした。
最後にデモのソースです。data量を変えたり、数値やCSSを変えたりして動きを試してみて下さい。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>skrollr</title>
<style>
body{
font-family: serif;
color: #555;
overflow-x:hidden;
}
#bg1 {
background: url(img/dot-2.png) repeat 0 0 scroll;
}
h1{
font-size: 3em;
padding: 2em 2em 5em;
margin-top: 0em;
}
#gradi{
color: white;
}
.box1{
border:3px solid #555;
border-radius: 5px;
position: fixed;
top: 7em;
right: 5em;
padding:5em;
z-index: 1;
}
.box2 {
border:3px solid #555;
border-radius: 5px;
padding:5em;
margin: 5em;
background-color: #fcfaf5;
}
</style>
</head>
<body
<div id="bg1"
data-2000="background-position:800px -1000px;"
data-0="background-position:0px 0px;">
</div>
<h1>skrollr入門</h1>
<div class="box1"
data-anchor-target="#gradi"
data-bottom-top="background-color:rgb(255,255,255);"
data-top="background-color:rgb(130,163,140);">
[relative mode] グラデーションさせているdivが画面に現れ始めたら色を変化させる。<br><br>
今回の場合はまず、グラデーションさせているdivにid="gradi"をつけた。<br>
次にdata-anchor-target="#gradi"を変化を起こしたいdiv（つまりこのdiv)に指定した。<br>
</div>
<div class="box2"><h3>skrollrのポイント</h3>
<ol>
<li>色はrgbかhslで指定する。</li>
<li>単位を揃える。</li>
<li>ベンダプレフィックスは必要なし。</li>
<li>[absolute mode] とは、スクロール量で変化させるモード。</li>
<li>[relative mode] とは、data-anchor-targetを指定し相対的に変化させるモード。</li>
</ol>
</div>
<div class="box2"
data-0="background-color:rgb(242,142,151);"
data-500="background-color:rgb(241,202,108);">
[absolute mode] 色をスクロール量で変えてみる。</div>
<div class="box2"
data-600="transform:translate(-110%,0)"
data-700="transform:translate(0%,0)">
[absolute mode] 左から出現して止まる。
</div>
<div class="box2"
data-800="transform:translate(-110%,0)"
data-900="transform:translate(0%,0)"
data-1100="transform:translate(0%,0)"
data-1200="transform:translate(120%,0)">
[absolute mode] 左から出現して右へ消える。data-○○○はいくつ並べてもOK。
</div>
<div class="box2"
data-1300="transform:rotateZ(0deg);"
data-1400="transform:rotateZ(180deg);"
data-1500="transform:rotateZ(360deg);">
[absolute mode] 回転させる。
</div>
<div class="box2" id="gradi"
data-0="background-image:linear-gradient(0deg, hsl(0, 100%, 50%), hsl(40, 50%, 50%));"
data-2000="background-image:linear-gradient(360deg, hsl(360, 100%, 50%), hsl(400, 100%, 50%));">
[absolute mode] <br><br>背景色をグラデーションさせてみる。<br><br>
</div><!--linear-gradient(開始位置と角度, 開始色, 途中色, 終了色);-->
<div class="box2"
data-center-top="transform:rotate(0deg);"
data-top="transform:rotate(360deg);">
[relative mode] ブラウザの画面のcenterに要素のtopが来たら回転が始まり、画面のtopに要素のtopが来たら回転が止まる。
</div>
<script src="js/skrollr.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var s = skrollr.init();
</script>
</body>
</html>次回はこのskrollrを使い、シングルページのスクロールサイトを作ってみますよ。
それではごきげんよう。
●skrollrを使ってパララックスのシングルページのサイトを作ってみました
skrollrの使い方については、勉強会でも何度かテーマに取り上げていまして、倶楽部りんごのサイトにジェイ子さんがとっても詳しくわかりやすい記事ををUPして下さったので、こちらも併せてご覧下さい。
“パララックスが簡単に実装出来る！skrollrの使い方” への5件の返信