東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

Parallax.jsで簡単にパララックスを実装する

2018.04.25 Posted by

tecmemo1804
こんにちは、ウェブラボクリエイターズメモです。

最近個人的にパララックスなどWebサイトに動きを付ける機会が多くあり、いいプラグインなど無いかな?

と思い探してみたところ見つけたのでその紹介をしたいと思います。

まずは作成したDEMOをご覧下さい

スクロールすると背景が少しずつ動いていく良く見るパララックスですね。

これがとても簡単に実装できてしまうんです!

まずは下記の公式サイトからプラグインをダウンロードしてきましょう。

Parallax.js公式

ダウンロードしたファイルのparallax.min.jsだけあれば大丈夫です。

ではまずはHTMLから解説していきます。

まずはjQuery本体と一緒にプラグインを読み込ませます。

■HTML スクリプト部分

次に以下のように記述します。

■HTML

パララックスを付けたい場所にdata-parallax=”scroll”を、 data-image-src=”画像のパス”で背景に指定したい画像の指定します。クラス名は何でも大丈夫です。

最後にCSSの記述をします。

■CSS

公式には書いてありませんでしたが私の環境では.parallax-slider~の記述を書かないと背景の位置がずれてしまったので参考までに。。。

対応ブラウザですが、ざっと見た感じだとIEは10から動くみたいです。ただ動作がかなりカクついていたので使用する際には注意が必要ですね。

オプションも色々とあるようですので時間があるときにでも試してみようかなと思います。

以上、クリエイターズメモでした。

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278