ヤッチーのブログ

PHP,Bootstrap,J Query,Swiftやサーバ管理、トラウトのルアー釣り、ハードロック等の記録です

Bootstrapにパララックス効果を導入

Bootstrapにパララックス効果を導入しました。

作業最終形デモ 

https://burrn.work/honoka/top5.html

WEBサイトを縦スクロールする際に、縦スクロールの移動距離に対して、画像の移動距離が短く、閲覧者にトリッキーな印象を与える効果があります。

Bootstrapに導入してみました。

Parallax.js | Simple Parallax Scrolling Effect with jQuery

こちらより、いつも通り制作者に感謝してダウンロードさせていただきます。

解凍して、parallax.jsを ./jsに配置します。

HTMLファイル内に以下を追記します。

<script src="./js/parallax.js"></script>

私の場合は、HTMLファイルのかなり下部に追記しました。

パララックス効果を得たい箇所に以下を記載しました。 

<div class="parallax-window" date-android-fix="false" data-image-src="./images/para_image_4.jpg">

    <p>パララックスで<BR>視差効果を得ます</p>

</div>

そして、CSSファイルに以下を追記しました。

.parallax-window {
 padding:30px;
 min-height: 360px;
 background: transparent;
}

min-heightの値を大きくすれば、見える画像ファイルの縦が長くなります。

400px未満で小さくが私としては好みです。

画像だけでは寂しいので、文字列「パララックスで視差効果を得ます」を画像に入れました。

作業最終形デモ 

https://burrn.work/honoka/top5.html