ver42019/09/19『Bootstrap4で無料テンプレートを作成する』シリーズ4回目です。前回は「AniJS」というアニメーションのライブラリを導入しました。今回は『パララックス』を実装してみました。パララックスとはスクロールした時に背景だけスクロールの速度を変えたり、要素ごとに異なるスピードでスクロールさせるようなWebデザインの手法のひとつ。完成形は以下になります。ver4今回の作成にあたってポイントが3つあります。パララックス縦センタリングPCとスマホで違う画像に切り替える以下、順に解説していきます。パララックスパララックスの実装では『Parallax.js』プラグインを使いました。<公式サイト>使い方1.公式サイトからファイルをダウンロード2.ヘッダタグ内で読み込みjQueryを先に読み込んでダウンロードした「parallax.min.js」を読み込みます。}}"></script>3.パララックス効果をつけたい箇所で下記のように記述します。以下の要素を付け加えます。"実例はこんな感じです。data-image-src="{{asset('assets/images/tpl/main.jpg')}}">これだけで簡単に背景画像にパララックスを適用することができます。縦センタリングメインビジュアルの中にあるテキスト/ボタンを縦センタリングします。縦センタリングのやり方はいろいろありますが、今回はflexboxを使いました。親要素に以下の3つのCSSを指定するだけです。center実例では以下のようになります。埋め込みコードを使用していました。『Parallax.js』との相性が悪いみたいで、パララックスがきちんと機能しませんでした。画像に切り替えたのですが、その際にPCとスマホで違う画像に切り替える処理をしました。