Bootstrap4 テンプレート ver4

『Bootstrap4で無料テンプレートを作成する』シリーズ4回目です。

前回は「AniJS」というアニメーションのライブラリを導入しました。今回は『パララックス』を実装してみました。

完成形は以下になります。

Bootstrap4 無料テンプレート ver4

 
今回の作成にあたってポイントが３つあります。

以下、順に解説していきます。

 

パララックス

パララックスの実装では『Parallax.js』プラグインを使いました。

Parallax.js ＜公式サイト＞

 

使い方

１．公式サイトからファイルをダウンロード

２．ヘッダタグ内で読み込み

jQueryを先に読み込んでダウンロードした「parallax.min.js」を読み込みます。

：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Parallax library -->
<script src="{{ asset('assets/js/parallax/parallax.min.js') }}"></script>

 

３．パララックス効果をつけたい箇所で下記のように記述します。

以下の要素を付け加えます。

• data-parallax="scroll"
• data-image-src=" 背景画像のパス "

実例はこんな感じです。

<div class="jumbotron jumbotron-fluid mb-0" data-parallax="scroll" data-image-src="{{asset('assets/images/tpl/main.jpg')}}">

 

これだけで簡単に背景画像にパララックスを適用することができます。

 

縦センタリング

メインビジュアルの中にあるテキスト／ボタンを縦センタリングします。

縦センタリングのやり方はいろいろありますが、今回はflexboxを使いました。

親要素に以下の３つのCSSを指定するだけです。

• display: flex
• justify-content: center
• align-items: center

実例では以下のようになります。

HTML

<div class="jumbotron jumbotron-fluid mb-0" data-parallax="scroll" data-image-src="{{asset('assets/images/tpl/main.jpg')}}">
    <div class="container">
            <h1 class="display-4" data-anijs="if: scroll, on:window, do: fadeInUp animated, before: scrollReveal">Laravel</h1>
            <p class="lead" data-anijs="if: scroll, on:window, do: fadeInUp animated, before: scrollReveal">ウェブ職人のためのPHPフレームワーク</p>
            <a class="btn btn-secondary btn-lg" href="https://laraweb.net/" target="_blank" role="button" data-anijs="if: scroll, on:window, do: fadeInUp animated, before: scrollReveal">もっと学ぼう</a>
    </div>
</div><!-- /.jumbotron -->

 

CSS

.jumbotron {
    height: 93vh;
    text-align: center;
    color: #ffffff;
    display: flex; /* flexboxを使ってど真ん中に配置 */
    justify-content: center; /* flexboxを使ってど真ん中に配置 */
    align-items: center; /* flexboxを使ってど真ん中に配置 */
    background: transparent; /*パララックス*/
}

 

PCとスマホで違う画像に切り替える

前回のテンプレートサイトでは google trends の埋め込みコードを使用していました。

しかし『Parallax.js』との相性が悪いみたいで、パララックスがきちんと機能しませんでした。

なので、画像に切り替えたのですが、その際にPCとスマホで違う画像に切り替える処理をしました。

HTML

<img class="pc" src="{{ asset('/assets/images/tpl/google_trends.png') }}" class="img-fluid">
<img class="sp" src="{{ asset('/assets/images/tpl/google_trends_sp.png') }}" class="img-fluid">

 

 

CSS

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 767.98px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

 

以上です。

 

-Bootstrap4 テンプレート, 周辺知識