CSS animation day35 となりました。
本日は、
position: sticky
を使って、パララックスを表現したいと思います。
1. 完成版
See the Pen Parallax Stich by hiroya iizuka (@hiroyaiizuka) on CodePen.
2. 参考文献
CSS Trciks: Creating sliding effects using sticky positioning
Medium: CSS Position Sticky - How It Really Works!
WPJ: たった数行のCSSでパララックス風表現ができる「position: sticky」の使い方
q-az: CSSのposition:stickyがすごく便利
3. 分解してみる
❶.
1: position: sticky は、あまり聞きなれないですが、一体なんでしょうか？
position:sticky
スクロールで、その指定された位置まできたら、それ以降は、固定されるという効果をもちます。
イメージとして、ゴキブリは最初自由に動いてますが、position: sticky という名のゴキブリホイホイを設置し、そこに捕まるとピタッと動かなくなるイメージです。ご飯中のかた、すみません。。
2: 前回の記事 ででた、position: fixed との違いは何か？
一言で言うと、position:fixed は、最初からゴキブリホイホイにくっついて、微動だにせず、ピタッと1mmも動いて欲しくない時に使い、position: sticky は、指定したところまではいつも通りスクロールすれば動くけど、途中からそこにバシッと固定したい時に使う、と考えれば、良さそうです！
MDN によると
粘着位置指定された要素は、指定したしきい値に達するまでは相対位置指定として、しきい値に達したら固定位置指定として扱われます。
粘着位置指定を想定したとおりに動作させるためには、 top, right, bottom, left のうち少なくとも一つでしきい値を指定しなければならないので、
.container { position: sticky; top: 10px; }
のように設定する必要があります。
overflow: hidden をつけると、効果が消えてしまうようで、注意しましょう。
❷.
マークアップします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="container">
<div class="sticky">パララックス</div>
<div>なんて</div>
<div>楽しいんだ！</div>
</div>
</body>
</html>
body {
background: #fff;
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
width: 100vw;
height: 1500px;
}
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0px;
background: linear-gradient(#efefbb, #d4d3dd);
color: #fff;
font-size: 30px;
margin-bottom: 100px;
width: 100vw;
height: 100px;
}
グラディエントがついている要素が、top: 0 になった瞬間に、位置が固定されました。これが、position: sticky の効果です。
❸.
では、しっかり作っていきましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<p>パララックス1</p>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<p>パララックス2</p>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<p>パララックス3</p>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="footer"></div>
</body>
</html>
body {
background: #fff;
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
width: 100vw;
height: 3000px;
}
p {
position: -webkit-sticky;
position: sticky;
top: 0px;
width: 100vw;
height: 100px;
font-size: 30px;
line-height: 100px;
margin: 0;
color: #fff;
background: #7e0a3b;
}
.one,
.two,
.three {
width: 100vw;
height: 300px;
font-size: 30px;
line-height: 100px;
color: #fff;
}
.one {
background: #8adcaa;
}
.two {
background: #64cf8d;
}
.three {
background: #3ec271;
}
.footer {
position: -webkit-sticky;
position: sticky;
bottom: 0px;
width: 100vw;
height: 50px;
background: linear-gradient(90deg, #8e0e00, #1f1c18);
}
See the Pen Parallax Stich by hiroya iizuka (@hiroyaiizuka) on CodePen.
簡単にパララックスができました!
position: fixed と 同じくらい簡単ですね！
明日は、奥域パララックスをお届けします。それではまた〜