お役立ちコラム

今回は、Vivus.jsを使ってSVGアウトラインアニメーションを作成する方法を解説します。 Vivus.jsを理解すれば、サイト読み込み時などでよく見られる、ロゴの輪郭が線で描かれていく以下のようなアニメーションが作れ…

JSライブラリ「Snap.svg」を使用すると、異なるpathで描いたSVG画像をスムーズに変形アニメーションさせられます。 このように、連続する2つの画像の間をコンピューターグラフィックスによって補間し、自然な変形を実…

SVGアイコンはインラインで表示すると、CSSで色を変えられたり色々便利です。 しかし、コードが長くなってしまうため、たとえばボタンの矢印部分をSVGアイコンで繰り返し使う場合などは、記述量が多くなってしまいソースが読み…

SVGはベクター形式の画像データです。 ベクター形式は、点や線、色、カーブを数値データで記録するため、軽量で拡大しても画像が荒れない点が大きな特徴です。 今回は、SVGとJPG・PNGとの違いやメリット・デメリット、SV…

今回は、画像を様々な形でクリッピングしたい場合に便利なCSSプロパティclip-pathの使い方を解説します。 clip-pathが使えるようになると、指定した要素の一部のみをくり抜いて表示させることができるようになりま…

jQueryの初学者には、$(function() {})を意味も分からず「おまじない」のように記載している方も多いのではないでしょうか？ しかし、実際には、JavaScriptやjQueryを実行するタイミングを決める…

PHPで取得した配列の中身を、何らかの規則に則って並び替えたくなる場合があります。 そういった際に便利なのがusort() 関数です。 今回はusort()関数を使って配列の中身を並び替える方法を解説します。 usort…

Webサイトやアプリの開発中に、ウィンドウのリサイズやinputの入力時に何らかの処理を行いたい場面がよくあります。 しかし、これらのイベントが発生するたびに処理が連続して呼び出されると、ブラウザに大きな負担がかかり、パ…