Bootstrap4 テンプレート ver4

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

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

パララックスとは

スクロールした時に背景だけスクロールの速度を変えたり、要素ごとに異なるスピードでスクロールさせるようなWebデザインの手法のひとつ。

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

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

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

 

パララックス

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

Parallax.js <公式サイト>

 

使い方
1.公式サイトからファイルをダウンロード
2.ヘッダタグ内で読み込み

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>

 

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

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

  • 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を使いました。

親要素に以下の3つの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; }
}

 

以上です。

本庄マサノリ

仕事で Laravel を使っています。気づいたことや新しい発見など情報を発信していきます。問い合わせはこちら

>> Twitter をフォローする

 

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

おすすめ記事

動画で学習するなら ドットインストール、Schoo、Udemyのどれがいい?

フリーランスを目指すなら フリーランスエージェントTOP3