Google今日はウェブサイトにお手軽にパララックス効果の画像を設置できるJavaScriptプラグイン[simpleParallax.js]の使い方を紹介します。本体を読み込んで画像に任意のクラス名を指定すればスグに実装できます。[simpleParallax.js]の特徴[simpleParallax.js]はjQueryなどに依存せず、単体でパララックス効果を付与することができるJavaScriptライブラリです。非常に軽量で、簡単に導入できるのが特徴。オプション設定は少ないですが、クオリティが高いので充分に使えます。データのダウンロードは下記公式サイトからどうぞ。[simpleParallax.js]の使い方を紹介します。インストールまずは本体ファイルをインストールします。CDNで提供されているので、そちらを利用するのが手っ取り早いでしょう。src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.6.1/dist/simpleParallax.min.js"></script>上記のコードをHTMLの適当な箇所に記述します。このプラグインはjQueryに依存します。HTML内でファイルを読み込む際には、先にjQueryの本体ファイルのURLを指定しておきましょう。npm経由でインストールする場合は次のコードを実行してください。続いてはパララックス効果を適用させたい画像を用意します。マークアップ方法は簡単で、パララックスを付与したい画像に任意のクラス名を追加するだけ。ここでは仮にclass="thumbnail"を付与します。HTMLHTMLの記述は次のとおり。class="thumbnail">JavaScript最後にJavaScriptで初期化を行います。simpleParallax(image);</script>基本的には上記で導入完了。ほとんど手間がかかりませんね。簡単なサンプルを用意しましたので、以下のリンクから実際の挙動を確認できます。「1」から「99」までのパーセントで指定オプション設定の例オプションの使い方の一例です。'.wrapper'});注意点[simpleParallax.js]はIEには対応していません。12.2+もしIE11でも動くようにしたい場合はpolyfillを使いましょう。src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.closest%2CArray.from%2CIntersectionObserver%2CObject.assign%2CArray.prototype.includes%2CString.prototype.includes"></script>Polyfill.ioから取得した上記のコードをHTMLに追記して読み込みます。これでIE11でも[simpleParallax.js]を動かすことができます。[simpleParallax.js]の公式サイトはこちらです。オンズ株式会社オンズ制作チーム。ウェブサイト制作、デザイン制作でお悩みの際はお気軽にご相談ください。https://on-ze.comTwitterFacebookFeedlyLINEこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。Height]の使い方。【JavaScript】jQuery不要で動く[wow.js]でスクロール連動型アニメーションを実装。【JavaScript】ツールチップを表示させる超軽量ライブラリ[Tippy.js]の使い方WordPressの[404.php]などに設定しておくと便利な各種リダイレクトの方法。【最新バージョン7.3対応】jQuery無しで動く神スライダー[Swiper]が便利すぎて。使って、ブラウザのステータスバーにメッセージを表示する方法。