【jQuery】Youtubeがウィンドウ内に表示されたタイミングで再生させるプラグイン

サイト内でスクロールして表示領域にYoutubeが表示された時に再生、非表示になった時に停止させることができるjQueryプラグイン「jquery.youtube-inview-autoplay.js」の紹介です。

フリーで使用できるモックアップをまとめたサイト「Mockup World」

PC・スマホは勿論、T-シャツ・ボトル・看板など、無料で使用できるモックアップをまとめたサイト「Mockup World」の紹介です。

軽快なアニメーションのバーガーメニュー「Ember Burger Menu」

様々なアニメーションエフェクトでのバーガーメニューを実装することができる「Ember Burger Menu」の紹介です。

インスピレーションを刺激するロゴデザインギャラリー「Logobook」

インスピレーションを刺激するロゴデザインギャラリーLogobook。ロゴデザイン制作時の情報収集のツールとしても活躍しそうなサービスです。アルファベット/数字・オブジェクト・自然・業種・デザイナー・制作会社・国別とカテゴ […]

手書き風SVGアニメーションを簡単に実装できる「vivus.js」

SVGを手書き風のアニメーションにすることができるJSライブラリ「vivus.js」の紹介です。ランディングページなど効果的に使えそうなライブラリです。

デザイナーのポートフォリオをまとめたサイト「Bestfolios」

プロダクトデザイナー・UI/UXデザイナー・グラフィックデザイナーなどのポートフォリオをまとめたインスピレーションサイト「Bestfolios」の紹介です。

立体感のあるアニメーションホバーエフェクト「Stack Motion Hover Effects」

レイヤーとズームを上手く使い要素を立体的なアニメーションエフェクトを実装できる「Stack Motion Hover Effects」の紹介です。

音楽に合わせて要素を動かすことができる「Rythm.js」

サイトのBGMとシンク(同期)させて要素に躍動感・カラー変更などを与える事ができるjavaライブラリ「Rythm.js」の紹介です。

【CSS】CSSアニメーションを簡単に作成できる「Animista」

様々なアニメーションを作成し、コードをコピペして簡単に使用できるCSSアニメーションジェネレーター「Animista」の紹介です。

CSSで出力できるドット絵ジェネレーター「Pixel Art to CSS」

自作のピクセルアートをCSSで出力することができるピクセルアートジェネレーター「Pixel Art to CSS」の紹介です。

180種類のグラデーションがまとめられた「WebGradients」

180種類ものグラデーションのパターンをまとめたサイト「WebGradients」の紹介です。CSS・PNGや、photoshopやsketch用のグラデーションも配布されてます。

CSSで実装するローディングアニメーション「Single Element CSS Spinners」

8種類のスタンダードなローディングアニメーションをCSSで簡単に実装することができる「Single Element CSS Spinners」の紹介です。

きれいなエフェクトの検索フォームUI「Inspiration for Search UI Effects」

サイトの検索フォームをダイナミックにエフェクトさせる「Inspiration for Search UI Effects」のチュートリアルの紹介です。

ブロック要素をドラッグできるグリッドレイアウト「Muuri」

ソートやフィルタリングもできるグリッドレイアウトを実装することができる「Muuri」の紹介です。ブロック要素をドラッグで移動できる優れもの。

【jQuery】チルトホバーエフェクトを実装できる「Tilt.js」

美しいチルトホバーエフェクトを実装することができる「Tilt.js」の動きが心地よいので忘備録。オプションも豊富にありエフェクトを自分好みにカスタマイズすることが可能です。 Tilt.js Tilt.js

RANDOM POST
  • パーツを組み合わせてイラストを作成できる「Open Peeps」
  • レスポンシブ対応の画像を生成してくれる「Responsive Image Breakpoints Generator」
  • 手描きのアニメーションGIFを簡単に作成できる「Brush Ninja」
  • 波の動きの背景を作成することができる「Wavie.js」
  • SNSで使用する画像・動画サイズのテンプレート集「SocialSizes」
  • 【jQuery】画像のドミナントカラーを背景色にする「jquery.adaptive-backgrounds.js」
POPULAR POSTS
  • 【無料】漢字が使える日本語フリーフォント59選
  • Photoshopで簡単に背景を伸ばすテクニック
  • Youtubeの埋め込み動画をレスポンシブに対応させる方法
  • 似たフォントを探したい!フォントを調べる時に役に立つツール・サイト10選
  • CSSで簡単に作れるおしゃれな見出しデザイン20選
PICKUP
  • 無料で使用できる海外のフリー写真素材サイトまとめ
  • 【無料】おすすめのフリー画像・写真素材サイト10選【商用利用可】
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • 【無料・低価格】ロゴ作成に役立つロゴジェネレーター12選
  • CSSで作成する吹き出しとデザインのアイデア