• Popular
  • Category
  • Tags
  • アーカイブ

News

follow us in feedly
Toggle

モジュール・ライブラリ

Snap.svgを使ったSVGのパスのモーフィングアニメーションデモ

Snap.svgを使ったSVGのパスのモーフィングアニメーションデモ

SVGを変形させたりアニメーションさせることができる、Adobeがオープンソースで提供しているJavaScriptライブラリである「Snap.svg」を使って、SVGのpathを別のpathにモーフィングさせるアニメーションサンプルをご紹介します。 SVGを操作するライブラリはSnap.svgよりもパフォーマンスが良い…
[JS]CSS, SVG, テキスト要素に様々なアニメーションを低負荷で施せる「KUTE.js」

[JS]CSS, SVG, テキスト要素に様々なアニメーションを低負荷で施せる「KUTE.js」

CSSでスタイリングしたHTMLオブジェクト、テキスト、さらにSVGコンテンツまでも様々なアニメーションで変形、移動させることができる、オープンソースのJavascriptアニメーション用モジュール「KUTE.js」をご紹介します。 このモジュールの優れたところは、必要なスクリプトだけを読み込み、シンプルな記述のみでメ…
[JS]背景画像を区分けして浮かび上がるパララックス効果を付けてくれる「Segment Effect」

[JS]背景画像を区分けして浮かび上がるパララックス効果を付けてくれる「Segment Effect」

1枚の背景画像をいくつかのセグメントに区割りして、それぞれがちょっと浮き上がるような面白いオープンソースのJavascriptモジュールを見つけたのでご紹介します。 このモジュールは、Filippo Bello’s Portfolio から着想を得て作られたとのこと。 ダウンロード、ソースコードはこちら。 …
スクロールして要素を個別にアニメーション表示しパララックスにも使える「scrollReveal.js」

スクロールして要素を個別にアニメーション表示しパララックスにも使える「scrollReveal.js」

2、3年前に流行り初めた、Webページをスクロールすることで背景や各要素がアニメーションしながら表示されたり、視差効果を伴って現れる、「パララックス」デザイン。 パララックス効果やスクロールアニメーションを実現できるモジュールはいくつかあるのですが、その中でも「scrollReveal.js」は軽量かつ単体で利用可能で…
アプリでよくみかける左右のスライダーメニューをWebサイトに実装するモジュール

アプリでよくみかける左右のスライダーメニューをWebサイトに実装するモジュール

FacebookアプリやYouTubeアプリなど、ニュースやソーシャル系の最近のスマホアプリでよく見かける左右にレイヤー化したスライダーメニュー。 いちいち新規ウインドウ(ページ)を開き直すこともなく、限られたディスプレイサイズにメニューを表示せずにフルに活用できるので今では徐々にスタンダード化されつつありますよね。 …
【モジュール】エフェクト付きのタブパネルを作れるjQueryモジュール「Tabulous.js」

【モジュール】エフェクト付きのタブパネルを作れるjQueryモジュール「Tabulous.js」

メニューやメインコンテンツをまとめてタブで括ってしまうレイアウトだったり、ブログだとサイドバーでちらほら見かけるタブパネル。 そんなコンテンツをタブでまとめられるjQueryモジュールが「Tabulous.js」。 サイドバーだと「新着記事」、「カテゴリー」、「おすすめ記事」など多くのコンテンツをタブでまとることができ…
Return Top