WordPress フルスクリーンスクロールプラグイン - Gutenberg/エレメン用fullPage.js

コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

下の映像のように、マウスをスクロールすると、セクション単位で移動しながらの側面に点になったナビゲーションに進行状況が表示されるサイトをワードプレスで作成したい場合、有料のプラグインを使用することができます。 fullPage.jsというプラグインを使用すると、全画面スクロールサイトを作成することができます。 このプラグインは、現在のグーテンベルクの(Gutenberg)とエレメンページビルダー(Elementor Page Builder)用など二つのバージョンで販売されています。

ワードプレス全画面スクロールプラグイン - fullPage.js plugin for Gutenberg / Elementor

ワードプレス全画面スクロールプラグイン -  fullPage.js

フルスクリーンスクロールサイトを制作したい場合fullPage.jsというライブラリを使用することができます。 GitHubにソースが公開されているのでダウンロードして適用することができます。 ハングルがよくなっているので適用時、ハングル文書を参照してみてください。

fullPage.jsは...

(単一ページのウェブサイトやワンページサイトでも知られている)全画面スクロールのWebサイトを作成する簡単で、使いやすいライブラリです。 全画面スクロールのWebサイトを作成することができ、ウェブサイト区域内に水平方向のスライダを追加することができます。

ワードプレスに適用が困難な場合、プラグインを使用することができます。 現在グーテンベルク(ブロックエディタ;ワードプレスデフォルトのエディタ)と エレメンページビルダーに使用できるプラグインが出ています。 DiviテーマのDiviビルダー用のプラグインも作っているようです。

  • fullPage.js plugin for Gutenberg(グーテンベルグ用):https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/
  • fullPage.js plugin for Elementor(エレメン用):https://alvarotrigo.com/fullPage/wordpress-plugin-elementor/

下のビデオでグーテンベルク用のプラグインのデモを見ることができます。

上記の動画では、右にドットで区切られナビゲーション(ナビゲーション)が表示されませんがエレメン用のプラグインのデモでは、表示されます。 この部分については、開発者にお問い合わせしてみるとグーテンベルクとエレメン用のプラグインの両方にセクションナビゲーション(Section Navigation)を表示するためのオプションが提供されるとします。

ワードプレス全画面スクロールプラグイン - グーテンベルク/エレメン用fullPage.jsプラグイン

各プラグインは、XNUMXつのプラン(プラン)で販売されています。

ワードプレスfullPage.js plugin for Gutenberg / Elementorプラグインプラン(プラン)

三プランすべて無制限の更新(Unlimited Updates)が提供される表記されています。 Hobby料金制は1人の開発者のための、1つのサイトに適用可能であり、1ヶ月のサポートを受けることができます。 Professionalプランは最大8人の開発者は、最大3つのウェブサイト、3ヶ月のサポートが提供され、Businessプランは無制限の開発者、100個のウェブサイト、1年プレミアムサポートが提供されます。

サポートは、githubのフォーラムでバグを報告するとの質問をすることができるものであり、プレミアムサポートはチャット/メール問い合わせが可能で、最大48時間以内に回答を得ることができるとします。

これとは別にfullPage.jsエクステンションも個別に販売されています。 詳細については、プラグインのサイトを参照してみてください。

おわりに

ワードプレスのサイトに全画面スクロールの効果を実装したい場合本文で紹介したプラグインを使用してみることができるようになります。 コーディングの知識があればGitHubサイトからソースをダウンロードして、ワードプレスに適用することも可能になります。

fullPage.jsと同様のjQueryプラグインでjQuery Scrollify(https://github.com/lukehaas/Scrollify)があります。 検索してみる、さまざまなソースを見つけることができるでしょう。

参考



コメントを残す

コメント