Bootstrap 5 + scroll-margin-top + ダークモード + パララックス についてメモ

経緯

Bootstrap 5 で JavaScript の記述なしにアンカーリンクへのアニメーション付きスクロールが scroll-behavior で実装されていることを最小限構成で確認したので、改めて Bootstrap 5 で検証したいと思います。

デモ

早速ですがデモを。

scroll-margin-top

上述の通り、 Bootostrap 5 ではアンカーリンクへのアニメーション付きスクロールは scroll-behavior: smooth; で実装されているのでこの部分はそちらに任せて、 scroll-margin-top のみ自前で記述。

// foundation/_variable.scss
$navbar-height: 56px;

/* css変数 + Scss変数 */
:root {
    --navbar-height: #{$navbar-height};
}


// object/utility/_u-ssnapmt.scss
.u-ssnapmt {
    scroll-margin-top: var(--navbar-height);
}

今回は css変数 + Scss の併用で記述してみました。

css変数 + ページごとのキービジュアル画像の変更

キービジュアル (ページ最上部にある画像 + 見出し + キャッチコピー等のパーツ) の背景画像について、ページごとに異なる画像を表示させたい、というのはよくある話だとは思います。

<head>
    <style>
        .c-eyecatch {
            /* css変数で キービジュアル の画像をページごとに切替 */
            background-image: var(--img);
        }
    </style>
</head>
<body>
    <!-- css変数で キービジュアル の画像をページごとに切替 -->
    <div class="p-3 p-sm-5 c-eyecatch" style="--img:url('https://source.unsplash.com/ROVBDer29PQ/1920x1080')">
        <div class="container">
            <h1 class="display-4">ほげ</h1>
            <p class="lead">ふがふが</p>
        </div>
    </div>
    <main class="l-main">
        <section class="container py-5">
            <h1 class="display-4">ぴよ</h1>
            <p>ほげら</p>
        </section>
        <!-- 流用 -->
        <div class="p-3 p-sm-5 mb-4 c-eyecatch" style="--img:url('https://source.unsplash.com/lNxMcE8mvIM/1920x1080')"></div>
</body>

今回は css変数 を使って

  • 予め headタグ 内の styleタグ では background-image: var(--img); でcss変数で指定しておく
  • 各要素で変数の値を都度差し替える

という形で画像を切り替える形式を採ってみました。

なお、今回はデモなので Jumbotron風 の実装で。

ダークモード

// layout/_l-main.scss
@charset "utf-8";

@use "../foundation" as f;

.l-main {
    background-color: f.$bg-color;
    color: f.$color;
    #dark > & {
        /* ダークモード対応 */
        @media (prefers-color-scheme: dark) {
            background-color: f.$color;
            color: f.$bg-color;
        }
    }
}

メディアクエリ @media (prefers-color-scheme: dark) によるダークモードを試しに記述。

ブログのような色に対して中立性の高いコンテンツの場合は使えそうですが、ブランドカラーが決まっている場合は難しそうな感。

個人的には基本ダークモードの方がありがたいのですが……。

パララックス

最後はパララックス。これについてはパッケージを利用しました。

    "dependencies": {
        "ukiyojs": "^3.0.0"
    },
import Ukiyo from 'ukiyojs';

window.addEventListener( 'load', () => {
    const ukiyoParallaxes = document.querySelectorAll( '.ukiyo' );
    ukiyoParallaxes.forEach( ( ukiyoParallax ) => {
        new Ukiyo( ukiyoParallax, {
            scale: 1.75,
            speed: 1.75,
        } );
    });
});

公式のドキュメント通りです。

検索すると自前実装も出てくるのですが、後々を考えるとパッケージの方が良さそうな気がするので。

参考

scroll-margin-top

Bootstrap 5 での jumbotron

css変数 で背景画像指定

ダークモード

パララックス

単語

vault

他を見よ (と言いたかった)

prefers-color-scheme scroll-behavior scroll-margin-top scroll-snap ukiyo.js ダークモード

この記事を書いた人

アルム＝バンド

フロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。

記事一覧