-
jQueryでAJAXを使う方法！非同期通信で画面の一部だけを更新する方法を解説
今回は、jQueryでAJAX（非同期通信）を使い、サーバー上のリソースを取得して画面の一部だけを更新する方法を解説します。 近年では、ブラウザ標準のfetch APIやAxiosといったライブラリが非同期通信の主流とな…
-
jQueryとは？基本の書き方・よく使うメソッドを解説
コーディング初学者が初めてJavaScriptを学ぶ際に、最初に触れることが多いのがJavaScriptライブラリの「jQuery（ジェイクエリ）」です。 現在のモダン開発のトレンドとは言えないものの、依然としてWebサ…
-
ScrollHintの使い方！横スクロールできる要素にヒントを表示する方法
今回は横スクロールできる要素にヒントを表示するJavaScriptライブラリ「ScrollHint」の使い方を解説します。 ScrollHintを使用すると、要素が横スクロール可能な状態になったタイミングを自動で検知し、…
-
【スライダー実装】Swiperの使い方、便利なオプションまとめ
Webサイトにスライダーを実装したい場合、JavaScriptライブラリ「Swiper」がおすすめです。 SwiperはjQueryを必要とせず、軽量で動作が速く、モバイルデバイスでのタッチ操作にも最適化されているのが特…
-
matchMediaを使ってGSAPアニメーションをレスポンシブ対応させる方法
アニメーションを作っている際に、PCとSPで微妙にアニメーションの動きやscrollTrggerプラグインのトリガー要素を変えたいことがあります。 こんなときGSAPを使っている場合は、mathMediaメソッドを使うこ…
-
【GSAP】アニメーションをクリック・ホバーイベントと連動させる方法
GSAPはデフォルトでは、ページが読み込まれたタイミングでアニメーションが開始されます。 しかし、これを制御して、クリックやホバーなどのイベントが発生してからアニメーションを開始させることもできます。 今回はGSAPのア…
-
【GSAP】ScrollTriggerプラグインの使い方！スクロールとアニメーションを連動させる方法
GSAPは、簡単にトゥイーン（始点と終点の間を補間するアニメーション）を作成できるJSライブラリですが、デフォルトではスクロールと連動していません。 しかし、ScrollTriggerプラグインを使うことで、以下のように…
-
【GSAP】タイムラインの使い方！複数要素のアニメーション順を制御する方法
アニメーションライブラリ「GSAP」を使うと、以下のように複数要素のアニメーション順を制御することができます。 See the Pen GSAP タイムライン機能 by E-VALUE WORKS (@evw) on C…
-
アニメーションライブラリ「GSAP」の基本！to、set、from、fromToメソッドの使い方
GSAP（GreenSock Animation Platform）は、おしゃれなギミックを取り入れたWebサイトを制作する際に便利なアニメーションライブラリです。 GSAPを使えば、複雑な動きも短いコードでスムーズに実…
-
Vivus.jsを使ったSVGアウトラインアニメーションの作り方！
今回は、Vivus.jsを使ってSVGアウトラインアニメーションを作成する方法を解説します。 Vivus.jsを理解すれば、サイト読み込み時などでよく見られる、ロゴの輪郭が線で描かれていく以下のようなアニメーションが作れ…
-
SVGを自在に変形！JSライブラリ「Snap.svg」を使ってモーフィング表現を実装する方法
JSライブラリ「Snap.svg」を使用すると、異なるpathで描いたSVG画像をスムーズに変形アニメーションさせられます。 このように、連続する2つの画像の間をコンピューターグラフィックスによって補間し、自然な変形を実…
-
$(function() {})の意味は？$(window).on(‘load’,function(){})との違い
jQueryの初学者には、$(function() {})を意味も分からず「おまじない」のように記載している方も多いのではないでしょうか？ しかし、実際には、JavaScriptやjQueryを実行するタイミングを決める…
-
【JavaScript】debounce（デバウンス）とは？実装方法を解説
Webサイトやアプリの開発中に、ウィンドウのリサイズやinputの入力時に何らかの処理を行いたい場面がよくあります。 しかし、これらのイベントが発生するたびに処理が連続して呼び出されると、ブラウザに大きな負担がかかり、パ…
