JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

テーブル

グラフ

背景

ニュースティッカー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

openBD

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptのライブラリsimplePARALLAX.jsでパララックスのスクロールエフェクト

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

simplePARALLAX.js

JavaScriptのライブラリsimplePARALLAX.jsでパララックスのスクロールエフェクト

JavaScriptのライブラリsimplePARALLAX.jsでパララックスのスクロールエフェクト

パララックス、いいですよね。

少し平面的なデザイン・レイアウトに、パララックス効果を入れることで、「動き」と「奥行き」を出せるので、そんなことも考慮しつつ使ってみるのもオススメです。

そんな時JavaScriptのライブラリsimplePARALLAX.js」で、簡単にパララックス効果をつけることができます。

この記事では、このsimplePARALLAX.js」についてご紹介していくので、ぜひ最後までご覧いただけたら嬉しいです。

simplePARALLAX.js

simplePARALLAX.js」は、簡単にパララックスエフェクトを使うことができるJavaScriptライブラリです。

simplePARALLAX.js
写真:simplePARALLAX.js 公式サイトより
パララックスとは?

パララックスとは、二地点での観測地点の位置の違いにより、対象点が見える方向が異なること、または、その角度差のこと。

引用:Wikipedia より

simplePARALLAX.js」は、サイズが5KB程度と軽量でネイティブなJavaScriptライブラリのため、動作も非常に軽くパララックスエフェクトを簡単に扱うことができるので、非常にオススメです。

公式サイト simplePARALLAX.js

使用方法

使用方法は、<head>〜〜</head>内にいずれかの方法で読み込ませるだけです。

読み込ませる方法は以下の通り、「ダウンロードして使用」か「CDNでの使用」のどちらかです。

<!-- ダウンロードして使用する場合 -->
<script src="simpleParallax.js"></script>
 
<!-- CDNで利用する場合 2022.8.7現在-->
<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.5.1/dist/simpleParallax.min.js"></script>

読み込みが完了したら、img タグに任意のclass名を追加して、次にJavaScriptのコードでオプションを記入するだけで利用可能です。

かかかず
かかかず

これだけでOKです。めちゃめちゃ簡単ですね。

利用可能なオプション

simplePARALLAX.js」では、以下8つのオプションを利用可能です。

オプション内容
orientation視差効果の方向です。
例えば「上」を選択すると、画像が下から上に移動します。2つの方向を組み合わせると、画像は斜めに移動します。
scale数値が高く設定されているほど、視差効果がより顕著になります。
overflowデフォルトでは、オーバーフロー(はみ出す)ことなく視差効果を適用されますが、overflowをオンにすることで、オーバーフローさせることができます。
delayスクロールを停止すると、少し遅延してパララックス効果が適用されます。遅延は秒単位で指定可能です。
transitionCSSの「transition」が遅延設定に追加されるので、上記の「delay」設定と連携させて使います。
customContainerデフォルトの状態のパララックスの計算は、スクロールのパーセンテージで行われます。画像が独自のスクロール領域を持つ場合にはこのオプションで緻密な設定を行うことができます。
customWrapper独自のラッパーを使用する場合のオプション。
maxTransition任意のパーセンテージに変更できます。

これらのオプションは単独で使うのはもちろんですが、掛け合わせて使うことも可能です。詳しくは公式サイトに詳しくあるので、ぜひご覧なってみてください。

公式サイト simplePARALLAX.js

かかかず
かかかず

個人的には「delay」を使うとダイナミックになるので、好きです。

パララックスのサンプルとコード

手順と方法

simplePARALLAX.js」を使ったサンプルは4つです。全て、スクロールインした時にアニメーション効果がついているので、順にご覧ください。

かかかず
かかかず

それぞれの「コードを表示」をクリックすると、当該のHTMLとJavaScriptのコードが見れます。

右から左右に

image
<img class="thumbnail1" src="https://dubdesign.net/wp-content/uploads/2022/06/cafe.jpg" alt="image">

<script>
var image1 = document.getElementsByClassName('thumbnail1');
new simpleParallax(image1, {
	orientation: 'right'
});
</script>

scaleで拡大して上から下

image
<img class="thumbnail2" src="https://dubdesign.net/wp-content/uploads/2022/07/001_building.jpg" alt="image">

<script>
var image2 = document.getElementsByClassName('thumbnail2');
new simpleParallax(image2, {
	scale: 1.5
});
</script>

overflowで左右にはみ出し

image
<img class="thumbnail3" src="https://dubdesign.net/wp-content/uploads/2022/07/002_building.jpg" alt="image">

<script>
var image3 = document.getElementsByClassName('thumbnail3');
new simpleParallax(image3, {
        orientation: 'right',
	overflow: true
});
</script>

delayで時間差のあるアニメーション

image
<img class="thumbnail4" src="https://dubdesign.net/wp-content/uploads/2022/07/003_building.jpg" alt="image">

<script>
var image4 = document.getElementsByClassName('thumbnail4');
new simpleParallax(image4, {
        delay: .6,
	transition: 'cubic-bezier(0,0,0,1)'
});
</script>

さいごに

いかがでしたでしょうか?

導入も手軽にパララックス効果を設定して使うことができるsimplePARALLAX.js」。ぜひ参考にして使ってみてください。

UI

  • 他のウィンドウが開くことができないポップアップのUIです。

    モーダル

    モーダル

  • 並列な関係を持つ情報を1つずつ格納するUIです。

    タブ

    タブ

  • サイドから全体を覆うほど大きいメニュー表示するUIです。

    ドロワー

    ドロワー

  • 画像などのコンテンツをスライド表示させるUIです。

    スライダー

    スライダー

  • スクロールで表示が変化するスニペットです。

    スクロール

    スクロール

  • クリックすると隠れていた部分が開閉するUIです。

    アコーディオン

    アコーディオン

  • ページのhタグを取得して目次を生成するスニペットです。

    目次

    目次

  • ページの読み込み時にアニメーションをするスニペットです。

    ローディングアニメーション

    ローディングアニメーション

  • マウスオーバーした際に表示される補足説明です。

    ツールチップ

    ツールチップ

  • ページ内上部にあるナビゲーションUIです。

    ヘッダー

    ヘッダー

  • 行と列の組み合わせでできているUIです。

    テーブル

    テーブル

  • データを表やグラフで可視化して見せるUIです。

    グラフ

    グラフ

  • 背景をアニメーションで動かすスニペットです。

    背景

    背景

  • 短いテキスト情報をスクロール表示するUIです。

    ニュースティッカー

    ニュースティッカー

フォーム

  • ラジオボタン、チェックボックス、ドロップダウンリストなどを通じて、ユーザーが入力できるUIです。

    フォーム

    フォーム

文字

  • 文字列をJavaScriptで装飾・動きをつけるスニペットです。

    文字の装飾

    文字の装飾

  • 文字列の操作をして、置換・変更を行うスニペットです。

    文字の操作

    文字の操作

  • 文字列をカウントして表示などを行うスニペットです。

    文字のカウント

    文字のカウント

  • 数字の要素を取得して、変更するスニペットです。

    数字の操作

    数字の操作

ウィンドウ

classの操作

  • 要素を取得して、classを追加・削除するスニペットです。

    classの操作

    classの操作

要素の操作

API

  • WordPressのAPIを取得して表示するスニペットです。

    WP REST API

    WP REST API

  • Google Books APIsで書籍の情報を表示するスニペットです。

    Google Books APIs

    Google Books APIs

  • 楽天市場のAPIを取得して表示するスニペットです。

    楽天市場API

    楽天市場API

  • openBDのAPIを取得して表示するスニペットです。

    openBD

    openBD

画像・動画

  • 画像を取得して、アニメーションなどの変化を加えるスニペットです。

    画像の操作

    画像の操作

  • YouTubeの動画を表示するスニペットです。

    YouTube

    YouTube

リンク

  • ページ内のリンクを取得して変更・操作するスニペットです。

    リンク

    リンク

  • Google Analyticsとの連携をするスニペットです。

    Google Analytics

    Google Analytics

cookie

  • ブラウザのcookieを利用するスニペットです。

    cookie

    cookie

検索

  • 指定した要素の中から検索を行うスニペットです。

    検索

    検索