サービス内容
Service
JavaScript・jQuery
kanvasで行うJavaScript・jQueryのコーディングをご紹介します。
プラグインを利用するものや、CSSと連携して行うものについてご説明します。
※WordPressでの制作をベースにルールを記載しています。
1.スライドショー
スライドショーとは「バナーなどのコンテンツを、特定のエリア内を左右または上下にスライドさせる方法」です。スライドショーは、主にトップページのメインビジュアルで利用します。
優れたプラグインが多く開発されているので、仕様に合ったものを選び実装します。
2.ページトップ
ページトップとは「現在の位置からページの先頭まで、スクロールして移動させる方法」です。縦に長いページなどで有効な方法で、多くのホームページで利用されています。
3.ドロワーメニュー
ドロワーメニューとは「ボタンをクリックすると、サイドからメニューをスライドさせて表示する方法」です。スマホなど、幅の量が少ない画面の時に効果的なメニューの表示方法で、Facebookでも使われているナビゲーションです。
サイトの構造が深く、ドロップダウンが必要な場合はプラグインを利用して実装します。
4.ローディングアニメーション
ローディングアニメーションとは「全ての要素の読み込みが完了するまでの間に、アニメーションを表示する方法」です。
画像ファイルが多い場合、読み込みが完了する前に要素が描画されてしまい、レイアウトの崩れが一時発生します。それを防ぐ目的で、読み込みが完了するまではアニメーションを表示して、ユーザーに待機してもらいます。
ロゴマークをラインアニメーションさせるなど、独自にカスタマイズした仕様も実装できます。
5.各種アニメーション
最近のホームページでは「要素の表示領域までスクロールすると、要素がアニメーションしながら表示される」ような、リッチな表現が見られるようになりました。
フェードインしながら表示させたり、中央からスライドしながら表示させたりと、アニメーションしながら要素を表示させます。