今回は、スクロールする際に文字をパララックスで表示します。
JavaScriptは使わずにCSSだけ使用します。
完成イメージはこんな感じです。
Pure CSS Parallax Websitesというページを参考にしました。
HTML
HTMLのコードから見ていきましょう。
index.html
「あ」から「ん」まであるのでだいぶ長くなってしまいました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Parallax</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="parallax">
<div class="parallax-group">
<div class="parallax-layer layer0">ひらがな</div>
</div>
<div class="parallax-group">
<div class="parallax-layer layer2">
<span style="transform: translateX(-10%)">あ</span>
</div>
<div class="parallax-layer layer0">
<span style="transform: translateX(10%)">い</span>
</div>
<div class="parallax-layer layer1">
<span style="transform: translateX(0%)">う</span>
</div>
<div class="parallax-layer layer-2">
<span style="transform: translateX(30%)">え</span>
</div>
<div class="parallax-layer layer-1">
<span style="transform: translateX(-15%)">お</span>
</div>
</div>
<div class="parallax-group">
<div class="parallax-layer layer-1">
<span style="transform: translateX(-35%)">か</span>
</div>
<div class="parallax-layer layer2">
<span style="transform: translateX(0%)">き</span>
</div>
<div class="parallax-layer layer0">
<span style="transform: translateX(15%)">く</span>
</div>
<div class="parallax-layer layer-2">
<span style="transform: translateX(10%)">け</span>
</div>
<div class="parallax-layer layer1">
<span style="transform: translateX(-10%)">こ</span>
</div>
</div>
<div class="parallax-group">
<div class="parallax-layer layer2">
<span style="transform: translateX(10%)">さ</span>
</div>
<div class="parallax-layer layer1">
<span style="transform: translateX(5%)">し</span>
</div>
<div class="parallax-layer layer-1">
<span style="transform: translateX(15%)">す</span>
</div>
<div class="parallax-layer layer-2">
<span style="transform: translateX(-10%)">せ</span>
</div>
<div class="parallax-layer layer0">
<span style="transform: translateX(0%)">そ</span>
</div>
</div>
<div class="parallax-group">
<div class="parallax-layer layer-2">
<span style="transform: translateX(40%)">た</span>
</div>
<div class="parallax-layer layer0">
<span style="transform: translateX(-10%)">ち</span>
</div>
<div class="parallax-layer layer1">
<span style="transform: translateX(5%)">つ</span>
</div>
<div class="parallax-layer layer-1">
<span style="transform: translateX(15%)">て</span>
</div>
<div class="parallax-layer layer2">
<span style="transform: translateX(-15%)">と</span>
</div>
</div>
<div class="parallax-group">
<div class="parallax-layer layer-1">
<span style="transform: translateX(-5%)">な</span>
</div>
<div class="parallax-layer layer1">
<span style="transform: translateX(-15%)">に</span>
</div>
<div class="parallax-layer layer2">
<span style="transform: translateX(0%)">ぬ</span>
</div>
<div class="parallax-layer layer-2">
<span style="transform: translateX(30%)">ね</span>
</div>
<div class="parallax-layer layer0">
<span style="transform: translateX(15%)">の</span>
</div>
</div>
<div class="parallax-group">
<div class="parallax-layer layer-1">
<span style="transform: translateX(-10%)">は</span>
</div>
<div class="parallax-layer layer1">
<span style="transform: translateX(0%)">ひ</span>
</div>
<div class="parallax-layer layer0">
<span style="transform: translateX(10%)">ふ</span>
</div>
<div class="parallax-layer layer2">
<span style="transform: translateX(15%)">へ</span>
</div>
<div class="parallax-layer layer-2">
<span style="transform: translateX(-35%)">ほ</span>
</div>
</div>
<div class="parallax-group">
<div class="parallax-layer layer-1">
<span style="transform: translateX(0%)">ま</span>
</div>
<div class="parallax-layer layer1">
<span style="transform: translateX(-5%)">み</span>
</div>
<div class="parallax-layer layer2">
<span style="transform: translateX(-13%)">む</span>
</div>
<div class="parallax-layer layer-2">
<span style="transform: translateX(-10%)">め</span>
</div>
<div class="parallax-layer layer0">
<span style="transform: translateX(15%)">も</span>
</div>
</div>
<div class="parallax-group">
<div class="parallax-layer layer-2">
<span style="transform: translateX(0%)">や</span>
</div>
<div class="parallax-layer layer2">
<span style="transform: translateX(15%)">ゆ</span>
</div>
<div class="parallax-layer layer0">
<span style="transform: translateX(-20%)">よ</span>
</div>
</div>
<div class="parallax-group">
<div class="parallax-layer layer-2">
<span style="transform: translateX(-15%)">ら</span>
</div>
<div class="parallax-layer layer2">
<span style="transform: translateX(5%)">り</span>
</div>
<div class="parallax-layer layer0">
<span style="transform: translateX(10%)">る</span>
</div>
<div class="parallax-layer layer-1">
<span style="transform: translateX(-5%)">れ</span>
</div>
<div class="parallax-layer layer1">
<span style="transform: translateX(15%)">ろ</span>
</div>
</div>
<div class="parallax-group">
<div class="parallax-layer layer-0">
<span style="transform: translateX(0%)">わ</span>
</div>
<div class="parallax-layer layer1">
<span style="transform: translateX(-15%)">を</span>
</div>
<div class="parallax-layer layer2">
<span style="transform: translateX(-5%)">ん</span>
</div>
</div>
</div>
</body>
</html>
index.htmlの解説
HTMLの構造としては、body以下、
- parallax
- parallax-group
- parallax-layer layerX
- spanという感じです。
ひとつのparallax-groupごとにあ行、か行・・・と分けています。
layerは5段階用意して、layer0が中間で、-2から2まであり、数字が大きくなるほど手前側になります。
それぞれの文字を左右にバラけさせるために、style="transform: translateX()"を使っています。
一番上のparallaxが、パララックス表現全体のビューポートになります。
CSS
次はCSSを見ていきます。
style.css
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap");
body {
margin: 0;
font-family: "Noto Serif JP", serif;
background-color: #F7F5EB;
color: #1A0000;
}
.parallax {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 300px;
}
.parallax-group {
height: 33vh;
transform-style: preserve-3d;
position: relative;
}
.parallax-layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-size: 4rem;
text-align: center;
padding-bottom: 50vh;
}
.layer2 {
transform: translateZ(180px);
}
.layer1 {
transform: translateZ(90px);
}
.layer0 {
transform: translateZ(0);
}
.layer-1 {
transform: translateZ(-90px);
}
.layer-2 {
transform: translateZ(-180px);
}
span {
display: block;
}
style.cssの解説
.parallaxはビューポートですので、画面全体をカバーしています。
スクロールバーが出ないようにoverflow-x: hidden;、スクロールできるように、overflow-y: auto;となっています。
perspective: 300px;は、3D的な奥行きです。
.parallax-groupは行ごとにまとめたクラスです。
高さは、いろいろ調節した結果33vhにしてあります。
transform-style: preserve-3d;は、子要素にも3D的な効果を許すためのものです。これがないとグチャッとなります。
.parallax-layerは、それぞれの文字ごとのクラスです。
position: absolute;で、top, right, bottom, leftをそれぞれ0にして親要素全体に広げています。
あとは、.layer2から.layer-2までの5段階のレイヤーの設定です。
transform: translateZ();の中の数字が大きいほど手前に来ます。
手前に来た要素は大きくなって大きく動きます、奥に行った要素は小さくなって動きも小さいです。
spanは、中の文字を左右に動かすためにdisplay: block;を指定しています。
その他のCSSは、フォントや見た目の調整です。
Codepen
最後にCodepenを貼っておきます。
See the Pen Untitled by takuyay (@tkyytnm) on CodePen.
おもしろい使い方ができそうですね。
コメント