この記事タイトル見て「あ!画像がゆっくり横ループするやつね!」と、イメージする人が多いんじゃないでしょうか。以下のように↓
チビネ
いやー…それじゃなくてこういうの笑↓
今回解説します「スクロールに合わせてテキストが左右に移動する」イメージ動画です。
フォントスタイルやカラー変更することで、お堅いコーポレートサイトからカジュアルサイトまで幅広く合わせらそうですね。
では、早速コードを見ていきましょう!
目次
コード解説
スクロール時にテキストを流れるように横移動させる
See the Pen Untitled by D Hiyoshi (@D-Hiyoshi) on CodePen.
CSSはほぼノータッチ。JavaScriptも長い方ではないため、理解しやすいと思いますよ!
なるべく初心者にも分かるよう解説モトム
では早速、ソースコードを分解して解説していきます。
JavaScriptコード解説
/*-------------------------------------------------------------
スクロールに合わせてテキストが横に移動
-------------------------------------------------------------*/
jQuery(function($) {
const text = document.getElementById("scrolling-text");
// テキストの初期位置設定
let direction = "left";
text.style.top = "0";
text.style.left = "-300%"; // 初期位置を指定
window.addEventListener("load", () => {
// テキストのフェードイン効果
setTimeout(() => {
text.style.opacity = 0.6;
}, 100);
});
let currentPosition = 0;
let lastScrollY = 0;
let isScrolling = false;
function updatePosition() {
// テキストの新しい位置を計算
const newPosition = window.scrollY * (direction === "left" ? -1.5 : 1.5) / 2;
currentPosition = newPosition;
text.style.transform = `translateX(${newPosition}px)`;
}
function applyInertia() {
isScrolling = false;
}
function onScroll() {
const scrollY = window.scrollY || window.pageYOffset;
if (scrollY === 0) {
// スクロールが一番上まで戻った場合、テキストを画面上に設定
direction = "left";
text.style.transform = "translateY(-100%, -50%)";
} else {
// スクロール中はテキストを画面外に移動
direction = "right";
text.style.transform = "translate(-100%, -50%)";
}
if (!isScrolling) {
isScrolling = true;
requestAnimationFrame(() => {
updatePosition();
isScrolling = false;
});
}
lastScrollY = scrollY;
}
window.addEventListener("scroll", onScroll);
// ページ読み込み時にテキストを表示する ※CSSで0.3秒遅れて表示
text.style.display = "block";
});
jQuery(function($){ ... });
- jQueryを使用していることを示す記述です。
$
はjQueryオブジェクトを参照するためのショートカットです。
※WordPressの場合、$(function() {
をjQuery(function($) {
に変更ください。
- jQueryを使用していることを示す記述です。
const text = document.getElementById("scrolling-text");
scrolling-text
というIDを持つ要素を取得し、text
という変数に格納しています。
let direction = "left";
- テキストの移動方向を示す変数
direction
を定義し、初期値を左方向に設定しています。
- テキストの移動方向を示す変数
text.style.top = "0";
- テキスト要素の
top
プロパティを0
に設定して、上端に配置されるようにします。
- テキスト要素の
text.style.left = "-300%";
- テキスト要素の
left
プロパティを-300%
に設定して、初期位置を画面外(左側)に配置します。
- テキスト要素の
window.addEventListener("load", () => { ... });
- ページの読み込みが完了した際に実行されるイベントリスナーを登録しています。
- テキスト要素に対して0.6秒後にフェードイン効果を与える処理が含まれています。
let currentPosition = 0;
- テキスト要素の現在の位置を保持する変数
currentPosition
を初期化しています。
- テキスト要素の現在の位置を保持する変数
let lastScrollY = 0;
- 前回のスクロール位置を保持する変数
lastScrollY
を初期化しています。
- 前回のスクロール位置を保持する変数
let isScrolling = false;
- スクロール中かどうかを示すフラグ変数
isScrolling
を初期化しています。
- スクロール中かどうかを示すフラグ変数
function updatePosition() { ... }
- テキストの位置を更新するための関数です。
- スクロール量に応じてテキストの新しい位置を計算し、
translateX
を使用して位置を設定します。
function applyInertia() { ... }
- 慣性効果を適用するための関数です。
- このコードでは使用されていません。
function onScroll() { ... }
- スクロールイベントが発生した際の処理を行う関数です。
- スクロール位置に応じてテキストの移動方向や位置を設定し、
updatePosition()
を呼び出して位置を更新します。
window.addEventListener("scroll", onScroll);
- スクロールイベントが発生した際に
onScroll()
関数を実行するイベントリスナーを登録しています。
- スクロールイベントが発生した際に
text.style.display = "block";
- ページ読み込み時にテキストを表示するための設定です。
display
プロパティをblock
に設定することで、テキストを表示します。
以上がJavaScriptコードの解説です。
CSSコード解説
.scrolling-text {
position: absolute; /* テキストの位置を絶対位置に設定 */
top: 0; /* 上端からの距離を0に設定 */
left: 0; /* 左端からの距離を0に設定 */
transform: translate(-100%, -50%); /* テキストを左側に移動して中央揃え */
white-space: nowrap; /* テキストが改行されないように設定 */
margin-bottom: 196px; /* 下方向のマージンを設定 */
line-height: 1; /* テキストの行の高さを設定 */
font-size: 64px; /* テキストのフォントサイズを設定 */
font-family: 'Ubuntu', sans-serif; /* テキストのフォントファミリーを設定 */
transition: opacity 1s ease-out; /* テキストの透明度変化に1秒のトランジション効果を設定 */
}
上記のCSSコードは、以下のような役割と設定を持っています。
position: absolute;
:テキストの位置をページ上の絶対位置で指定します。この場合、他の要素に影響を受けず、自由な位置に配置されます。top: 0;
:テキストの上端がページ上端に対して0の位置に配置されます。left: 0;
:テキストの左端がページ左端に対して0の位置に配置されます。transform: translate(-100%, -50%);
:テキストを左側に移動させ、垂直方向に中央揃えにします。-100%
の指定により、テキストは左端から完全に見えなくなります。white-space: nowrap;
:テキストが自動的に改行されないように設定します。テキストが水平方向に一直線に表示されます。margin-bottom: 196px;
:テキストの下方向のマージンを設定します。これにより、テキストの下部に余白が作られます。line-height: 1;
:テキストの行の高さを設定します。ここでは、1の値が指定されており、テキストのフォントサイズに応じて適切な行の高さが設定されます。font-size: 64px;
:テキストのフォントサイズを設定します。ここでは、64ピクセルのサイズが指定されています。font-family: 'Ubuntu', sans-serif;
:テキストのフォントファミリーを設定します。ここでは、’Ubuntu’というフォントが指定され、もし’Ubuntu’が利用できない場合には代替のサンセリフフォントが使用されます。transition: opacity 1s ease-out;
:テキストの透明度の変化に対して、1秒の時間をかけてスムーズに変化させるトランジション効果を設定します。
以上がCSSコードの解説です。
コメント