最近のWebサイトで見かけるHTML/CSSスニペット・JSライブラリ33個まとめ

最近のWebサイトでよく見かけるアニメーションやインターフェースを簡単に実装できる、便利なHTML/CSSスニペット、JavaScriptライブラリを紹介します。

スポンサーリンク

背景にインクが広がるエフェクト(CSS)

CSSのstepsを使って、背景にインクを広げるアニメーションを実装します。

ink
Ink Transition Effect | デモ

かわいいボタンデザイン(CSS)

手書き風ボーダーのボタンなど、普段見かけないオリジナリティあるボタンをCSSで実装します。

cap002
CSSで実装できる可愛いデザインに使えそうなボタンデザインやホバーエフェクト 10+

CSS3を使ったホバーエフェクト(CSS)

シームレスな動作で、クオリティの高いホバーエフェクトをCSS3を使って実装できます。

cap09
Ultimate image hover effects using css3 | デモ

ハンバーガーメニューのCSSアニメーションセット(CSS)

スマホサイトに欠かせないハンバーガーメニューの様々なCSSアニメーションが紹介されています。

cap09
Tasty CSS-animated hamburgers

ハンバーガーメニューのアニメーション15選(CSS)

ハンバーガーメニューのアニメーション、15種類のサンプル集です。

mobile-header-animations
15 CSS Mobile Header Animations | デモ

Instagram風のCSSフィルター(CSS)

写真にInstagramのようなフィルターをかけるスタイルシートです。

cap01
CSSGram

VSCO風のCSSフィルター(CSS)

写真加工アプリとして人気のVSCOのようなフィルターを実装できるスタイルシートです。

cap02
CSSCO

Instagram風に加工するチュートリアル(CSS)

ブレンドモードを使って、写真をInstagram風に加工する方法が紹介されています。

Instagram-style filters in HTML5 Canvas

モダンブラウザ向けのclearfix最新版(CSS)

clearfixの最新版です。

cap02
The very latest clearfix reloaded

ポリゴン風のアニメーション(JS)

クリックすると、ポリゴン風のエフェクトでコンテンツをアニメーション表示します。

CardExpansion
Card Expansion Effect with SVG clipPath | デモ

幾何学のローディングアニメーション(JS)

オリジナリティのあるローディングアニメーションです。

lice04
Spring Loaders with Rebound and Canvas | デモ

クールなローディングボタン(JS)

成功/失敗をクールに表示するローディングボタンです。

cap08
Loading Buttons | デモ

画像にピンを立てて、注釈を表示するjQueryライブラリ(JS)

ECサイトや、写真に注釈をつけるときに使えます。

cap04
jquery.easypin
 | デモ

ブラウザ上に画像の編集機能を実装できるJSライブラリ(JS)

ブラウザ上に画像の切り抜き、拡大縮小、回転、反転といった編集機能を実装できます。

cap10
Photo Editor | デモ

おしゃれな製品画像のスライドショー(JS)

サークルで囲まれた製品がスライドします。

ElasticCircleSlideshow_Dribbble
Elastic Circle Slideshow | デモ

描画ツールをサイトに埋め込むスクリプト(JS)

canvasタグを使った描画ツールをサイトに埋め込めるスクリプトです。

Drawingboard
Drawingboard.js

画像を保存するときに案内表示(JS)

ロゴや画像を保存しようと右クリックすると、このページからダウンロードできるよ!と通知を表示するスクリプトです。

Right Click Logo to Show Logo Download Options | デモ

いいねボタンのクールなアニメーション(JS)

いいねボタンを押した時の、クールなアニメーションを実装します。

cap04
mo.js | デモ

枠からはみ出たテキストを省略表示するライブラリ(JS)

はみ出た部分を自動省略できます。日本語もOKです。

cap05
Jquery-quickfit

リストやテーブルのリアルタイム検索(JS)

面倒なリストやテーブルのリアルタイム検索をさくっと実装できます。

cap01
List.js | デモ

GIFアニメーションの再生・停止をコントロール(JS)

クリックでGIFアニメーションを再生・停止することができます。

スクリーンショット 2016-03-20 11.42.18
Facebook Like GIF Preview Using jQuery | デモ

回転エフェクト(JS)

ボタンやタブ、ラジオボタン、チェックボックスなど様々な要素に回転エフェクトをつけることができます。

スクリーンショット 2016-03-20 12.00.28
TURNBOX.js

マテリアルデザインの日付ピッカー(JS)

マテリアルデザインのクールな日付ピッカーです。

cap003
Material-datetime-picke | デモ

モバイルに最適なデートピッカー(JS)

モバイルのインターフェースに最適化された日付ピッカーを実装できます。

datedropper
datedropper

本文中の自然な画像ズームエフェクトを実装(JS)

コンテンツの途中で自然な画像ズームを実装できるJSライブラリです。

cap004
enhance.js | デモ

Webサイトに華やかな表現を加えるライブラリ(JS)

光の粒子がきらめく華やかな表現をサイトに実装できます。

eyecatch
ParticleJS | デモ1 | デモ2 | デモ3

Google Analytics用の便利なライブラリ(JS)

外部リンクのクリック、フォーム送信などの計測を簡単に実装できるライブラリです。Analyticsコードをカスタマイズせずに利用している場合に使えます。

cap003
analytics.js の自動トラッキング機能の紹介

画像のExif情報を読み取るライブラリ(JS)

cap003
Exif.js

フォームの自動入力機能対応、最適化(HTML)

今どきの入力フォームの書き方について、HTMLコーダーが抑えておくべきポイントを解説しています。

160310_form_ng
今どきの入力フォームはこう書く! HTMLコーダーが抑えるべきinputタグの書き方まとめ

Option要素の追加・削除インターフェースを実装できるライブラリ(JS)

フォームのインターフェースでよくある、選択した要素を追加・削除できるJSライブラリです。

PickList
pickList | デモ

画像を拡大する虫眼鏡機能(JS)

画像を拡大できる虫眼鏡機能を実装できます。

jfMagnify
jfMagnify | デモ1 | デモ2

ボタンにホバーするとツールチップを表示するCSS

ボタンにマウスをホバーすると、ツールチップを表示します。

ボタンにホバーするとツールチップを表示するCSS
Balloon.css | デモ

スポンサーリンク

みんなが見ている人気記事

コメントを投稿する

  • Posted on 2016.03.29
  • Views 4,457