JSを一切使わないCSSでできたドロップダウンなどのUI実装「CSSUI」:phpspot開発日誌

2022/02/23 12 users CSS UI実装 ドロップダウン

CSSUI - Pure CSS interactive components JSを一切使わないCSSでできたドロップダウンなどのUI実装「CSSUI」 そこまでJSを使わない必要があるのか、と逆に思ってしまいますが、リッチなUIがCSSのみで作れてしまいます 続きを読む

JSで楽譜を描画して再生までできる「abcjs」:phpspot開発日誌

2019/10/22 34 users カラーピッカー 楽譜 ボーダー ホバー時 関連エントリ

abcjs JSで楽譜を描画して再生までできる「abcjs」 あまり音楽の知識はありませんが、なんかすごい感じがします 関連エントリ 超カッコいいスクロールエフェクト実装「lax.js」 リッチでカッコいいカラーピッカー「iro.js」 ホバー時にボーダーをアニメーションさせる「Nicebord.js」 続きを読む

Vanillaベースのオートコンプリート実装「autoComplete.js」:phpspot開発日誌

2019/02/21 11 users オートコンプリート 実装 関連エントリ デザイン

autoComplete.js - Vanilla Javascript library Vanillaベースのオートコンプリート実装「autoComplete.js」 次のようなモダンでクールなデザインのオートコンプリートが実装可能です 関連エントリ Github風絵文字のオートコンプリートを実現する「At.js」 続きを読む

横スクロールできるよ、というヒントを表示する「ScrollHint」:phpspot開発日誌

2018/07/24 10 users 縦スクロール 関連エントリ ヒント ケース 項目

ScrollHint 横スクロールできるよ、というヒントを表示する「ScrollHint」 縦スクロールが当たり前のページ内で横スクロールできるというのは意外と分かりづらいケースもあると思いますが、こちらを使えばアニメーションつきでスクロールできるよということを示すことが出来ます。 関連エントリ スクロールしても項目が... 続きを読む

JS＆Canvasで背景を水玉バブルアニメーションにする「bubbly-bg」:phpspot開発日誌

2018/07/12 20 users GitHub ファンシー グラデーション ＦＬＡSＨ時代 背景

GitHub - tipsy/bubbly-bg: Beautiful bubbly backgrounds in less than 1kB (750 bytes gzipped) JS＆Canvasで背景を水玉バブルアニメーションにする「bubbly-bg」 背景をファンシーかつポップに。Flash時代を思い出します 関連エントリ CSS3のグラデーションで背景アニメーションできるjQueryプラグイン「Gradientify... 続きを読む

複数選択、検索が可能なselectボックス実装「multi.js」:phpspot開発日誌

2018/07/05 22 users Demo 複数選択 検索 selectボックス デフォルト

Demo ? multi.js 複数選択、検索が可能なselectボックス実装「multi.js」 複数のアイテムを選択するような場合にわかりやすく使いやすいUIが提供可能です 関連エントリ Selectボックスをポップアップ形式に変更できる「PopSelect」 デフォルトのselectボックスをかっこいいドロップダウンに変更するjQueryプラグイン 続きを読む

CSS3で簡単アニメーション「MotionCSS」:phpspot開発日誌

2018/07/03 12 users ライブラリ アニメーション class指定 フレーム クール

Awesome CSS3 animation - example CSS3で簡単アニメーション「MotionCSS」 豊富なアニメーションがclass指定で簡単に実現できるライブラリ 関連エントリ 超クールなSVGストロークアニメーションデモ フレームがクールにアニメーションするスライドショー実装デモ 超ユニークなアニメーションが詰まった「Woah.css」 続きを読む

クリエイティブなオーディオビジュアライザー実装デモ:phpspot開発日誌

2018/04/19 14 users ビジュアルエフェクト Codrops SVG 実装 音楽

Creative Audio Visualizers | Codrops クリエイティブなオーディオビジュアライザー実装デモ 音楽にあわせてグリグリ動くビジュアルエフェクトの実装がすごい 関連エントリ SVGとanime.jsを使った機敏に動くツールチップ実装「Playful Little Tooltip Ideas」 続きを読む

Flashみたく文字列を綺麗にアニメーションさせる「Moving Letters」:phpspot開発日誌

2017/11/06 10 users border Flash アニメーション anime.js

Moving Letters | Text animated with JavaScript & anime.js Flashみたく文字列を綺麗にアニメーションさせる「Moving Letters」 Flash全盛の頃を思い出しました。Flashが消えるだなんて誰も思ってなかったあの時期。 関連エントリ Sketchでアニメーションを直接つくれるプラグイン「AnimateMate」 borderの... 続きを読む

Googleカレンダー風のスケジュール表を生成できる「jquery-skeduler」:phpspot開発日誌

2017/08/29 14 users GitHub スケジュール表

GitHub - decease/jquery-skeduler: This is jQuery plugin which provider you simple scheduler with some items on OX and 24-hours timeline on OY. Googleカレンダー風のスケジュール表を生成できる「jquery-skeduler」 次のようなスケジュール表表... 続きを読む

ブラウザでExcelデータを吐き出せるjQueryプラグイン「ExportToExcel」:phpspot開発日誌

2017/07/13 38 users GitHub jQueryプラグイン サーバ 関連エントリ

GitHub - maynard88/ExportToExcel: jQuery Client Side Excel Export Plugin Library ブラウザでExcelデータを吐き出せるjQueryプラグイン「ExportToExcel」 ブラウザ上で吐き出すのでサーバにやさしく使えそうです 関連エントリ ページ内にお手軽にExcelスプレッドシート風UIを入れられる「jExcel」 続きを読む

スクロールインした際のアニメーションを簡単実装「AOS」:phpspot開発日誌

2017/07/06 20 users Sketch スクロール アニメーション html属性 ページ

AOS - Animate on scroll library スクロールインした際のアニメーションを簡単実装「AOS」 html属性にアニメーションタイプを指定するだけで、スクロールインした際にアニメーションしてくれます。 シンプルだけど動きもいれたいページに使えそうですね 関連エントリ 綺麗なアニメーション表示のドロップダウン実装「SweetDropdown」 Sketchでアニメーションを直... 続きを読む

画像や音声ファイルをアップロード前にプレビューできる「jquery_upload_preview」:phpspot開発日誌

2017/05/24 12 users preview jQuery GitHub 音声ファイル 画像

GitHub - opoloo/jquery_upload_preview: This is a small jQuery plugin, which provides a live preview of selected files before they're actually uploaded to the server. 画像や音声ファイルをアップロード前にプレビューできる「jquery_... 続きを読む

アクセス時間によってCSSの出し分けを制御できる「STIMED.js」:phpspot開発日誌

2017/05/17 23 users CSS jQu 空色 日照 関連エントリ

STIMED.js | jQuery plugin for controlling CSS styles over time アクセス時間によってCSSの出し分けを制御できる「STIMED.js」 例えば夜におとずれると画面が黒く、朝だと白く、といったことが可能になります 日照のように背景を空色でグラデーションさせたり要素のrotate具合を設定できたりして面白いです 関連エントリ CSSとjQu... 続きを読む

背景画像をダイナミックに動かしつつParallax効果を作れる「fullPage.js」:phpspot開発日誌

2017/05/10 17 users fullPage.js パラメータ 挙動 上下 カスタマイズ

fullPage.js - Parallax Extension 背景画像をダイナミックに動かしつつParallax効果を作れる「fullPage.js」 上下だけに画面が動くのでなく左右のスライド実装もできます。 挙動についてはパラメータでカスタマイズが効きます 関連エントリ スクロールと同時にアニメーションする様々なパララックスエフェクト実装「paroller.js」 続きを読む

大量の汎用SVGアイコンがダウンロードできる「Zondicons」:phpspot開発日誌

2017/04/28 13 users Zondicons

Zondicons 大量の汎用SVGアイコンがダウンロードできる「Zondicons」 一般的に使えそうな汎用アイコンが収録されていて順次ア... 続きを読む

文章の中央に画像等をドンと綺麗に配置するjQueryプラグイン「pull-quote-center」:phpspot開発日誌

2017/04/20 12 users GitHub center jQueryプラグイン 文章 中央

GitHub - jakedowns/pull-quote-center: A jQuery plugin utility which dynamically inserts a symmetrical pull-quote element clone to enable a hacky float: center 文章の中央に画像等をドンと綺麗に配置するjQueryプラグイン「pull-quot... 続きを読む

JSベースの2D物理エンジン「p2.js」:phpspot開発日誌

2017/03/02 16 users JSベース GitHub 物理エンジン 関連エントリ サンプル

GitHub - schteppe/p2.js: JavaScript 2D physics library JSベースの2D物理エンジン「p2.js」 豊富なサンプルも公開されていて見るだけでもわりと楽しめます。 関連エントリ シンプルな3D物理エンジンライブラリ「cannon.js」 Google Gravityみたいな物も再現できる物理エンジン「PhysicsJS」 続きを読む

引っ張って更新を簡単実装できる「Pull to Refresh.js」:phpspot開発日誌

2017/01/12 30 users ヘッダー 関連エントリ ページ遷移 テーブル 固定

Pull to Refresh.js 引っ張って更新を簡単実装できる「Pull to Refresh.js」 アプリではもう一般的になった引っ張って更新をWEBでも実現します。依存性なしなので手軽に使えそう 関連エントリ ページ遷移をアプリっぽくすることができる「jQuery.smoothState.js」 テーブルのヘッダーを固定表示することが出来る「jQuery.floatThead」 枠のサ... 続きを読む

テーブルのヘッダーを固定表示することが出来る「jQuery.floatThead」:phpspot開発日誌

2016/01/22 16 users ヘッダー テーブル elem 固定 ヘッダ

jQuery.floatThead テーブルのヘッダーを固定表示することが出来る「jQuery.floatThead」 スクロールしてヘッダが消えるとこの列が何を意味しているのか分からなくなるということがよくありますが、HTMLテーブルでもそれを回避するためにヘッダを固定することが出来るようにするjQueryプラグインです。 のように  $(elem).floatThead() を呼び出すだけで速... 続きを読む

文書スクロールと共に地図をアニメーション表示できるデモがすごい:phpspot開発日誌

2015/12/28 14 users アニメーション デモ 地図 Codrops スクロール

Animated Map Path for Interactive Storytelling | Codrops 文書スクロールと共に地図をアニメーション表示できるデモがすごい 旅のログ等に表示すると超わかりやすそうなUIを作れます。 スクロールに応じてページ内容をアニメーションさせたりするといった手法はよく使われるようになりましたが、こういうアイデアをWEB上で実装したのは初めて見た気がします。... 続きを読む

ブラウザベースのRPGがつくれる「RPG JS」:phpspot開発日誌

2015/12/15 32 users ブラウザベース プログレスバー RPG 関連エントリ 背景

RPG JS ブラウザベースのRPGがつくれる「RPG JS」 現段階ではどの程度本格的な物がつくれるかは分かりませんが、サイトをRPG風のUIにしたホームページ等を作ってみても面白いかも。 マップ上でキャラを動かして何かを紹介する、というUIが適したサイト等があるかもしれませんね。 関連エントリ ブラウザトップのプログレスバーを簡単実装できる「ToProgress.js」 HTML5動画を背景に... 続きを読む

CSSオンリーで作られたLightBox「css-lightbox」:phpspot開発日誌

2015/12/10 11 users lightbox lightGallery CSS 全部 機能

Cerealkillerway/css-lightbox GitHub CSSオンリーで作られたLightBox「css-lightbox」 CSSのみで作られたとは思えないような感じのLightboxがピュアCSSで実現されています。 関連エントリ 必要な機能は全部入ったモダンなLightBox実装jQueryプラグイン「lightGallery」 レスポンシブで全画面やズーム表示に対応したLi... 続きを読む

モバイル対応でクールにアニメーションする複数階層メニュー実装デモ:phpspot開発日誌

2015/11/26 21 users クール Blueprint モバイル対応

Blueprint: Multi-Level Menu | Codrops モバイル対応でクールにアニメーションする複数階層メニュー実装デモ... 続きを読む

デザイナー必携。フォント管理時に役立つ、最新のフォント管理ツール「FontBase」:phpspot開発日誌

2015/11/23 38 users 最新

デザイナー必携。フォント管理時に役立つ、最新のフォント管理ツール「FontBase」 2015年11月23日- FontBase ? a blazing fast, beautiful and free font manager for Windows. デザイナー必携。フォント管理時に役立つ、最新のフォント管理ツール「FontBase」 UIがモダンなフォント管理ツールがダウンロードして利用でき... 続きを読む