パララックスを簡単に導入できるparallax.jsというプラグインが便利でした

# WEB制作

2020.04.06

みなさま、こんにちは。

前記事に続き、背景に対するjQueryのプラグインについてご紹介します。

パララックスな背景を簡単に導入できるparallax.js

まずはデモサイトをご覧ください。

【DEMO】parallax.jsでパララックスを導入する

※スマホでは固定背景になりますので、パソコンでご確認ください。

スクロールすると背景が少しずつ動きます。

最近よく見る仕様ですよね。

導入の仕方

プラグインのファイルはこちらからダウンロードしてください。

使用するのは parallax.min.js だけあれば大丈夫です。

ソースコードの書き方

まずはソースをご覧ください。

headjQueryjquery.mb.YTPlayer を読み込んでください。

特に実行のコードはいりません!

次にコンテンツ内。

背景をつけたブロックに data-parallax="scroll" を付与し、任意の画像を設定してください。

たったこれだけでパララックスが導入完了しました。

【DEMO】parallax.min.jsでパララックスを導入する

パララックスを使用しているだけで、流行りのサイトっぽくなるので、ぜひ参考にしてみてください。

webサイトの制作、お任せください。

あくまでも基本料金になりますので、まずはご連絡ください。

コーディング

トップページ
(ヘッダー・フッター含む)

¥8,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥4,000~

ランディングページ

¥15,000~

※アニメーションはオプション料金

デザイン

トップページ
(ヘッダー・フッター含む)

¥20,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥5,000~

ランディングページ

¥20,000~

※コーディングとのセット料金

サイト構築

10ページ
(お問合せページを含まない)

¥100,000~

20ページ
(お問合せページを含まない)

¥175,000~

Wordpress導入

(上記)+¥50,000~

※お問合せページは¥10,000~