「Lazy Line Painter」 は、最近流行のSVGを使ったパスアニメーションを手軽に作れるプラグインです。自分で描いた線画をSVG形式で読み込み、手で描いたような動きをつけて表示できます。 あまり複雑な動きはできませんが、「Tatenaga GIF」のiPhoneの線画のように、さりげなく取り入れるにはぴったりのプラグインです。 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、Lazy Line PainterをGitHubからダウンロードします。ページ右下の「Download ZIP」ボタンからダウンロードできます。

画像をCSSで好きな形に切り抜けるclip-pathプロパティって知っていますか？ SVGのパスで自由にクリッピングできちゃうので、おしゃれサイトの演出などにとても重宝しそうです。 Webの表現はおもに長方形です。一方、印刷メディアではさまざまな形状が使われます。この違いには多くの理由がありますが、印刷メディアのような適切なツールがWebにはないことも1つに挙げられます。 この記事では要素の一部が表示されないようにする、clip-pathというCSSプロパティを紹介します。clip-pathを使うと、設定した値によって表示領域を決定できます。クリッピングの基礎から始めて、構文を確認し、さらに高度なコンセプトを紹介します。 クリッピングの基礎知識 クリッピングとは、ある物から一部を切り取ることです。今回の場合、Webページの要素を完全に、または部分的に隠す操作のことです。この記事では、クリッ

2020年にFlashのサポートが終了すると発表されました。すでにFlashを使う機会はほとんどなくなっていますが、代替となるWebアニメーション技術を学びたい人のためにGreenSockの使い方を紹介します。 GreenSockはGSAP（GreenSockアニメーションプラットホーム）として知られている、パフォーマンスに優れた、モダンWeb用のプロフェッショナル向けHTML5アニメーションエンジンです。 GSAPにはたくさんの機能があり、1つの記事では扱いきれません。GreenSockライブラリーのさまざまな側面に焦点を当てた記事を数回に分けて執筆します。 詳細は次のとおりです。 第1回では、GreenSockの特長と機能、ライセンスモデル、コアコンポーネント、DOM要素にトゥイーン（tween）やstaggerを実装する基本構文を紹介 第2回では、GreenSockのネイティブタイム