CSSのみで実装された５００種類のローディングアニメーション「CSS Loaders」:phpspot開発日誌

2023/09/20 6 users ローディングアニメーション CSS たくさん 500種類

CSS Loaders: A collection of more than 500 loading animations CSSのみで実装された５００種類のローディングアニメーション「CSS Loaders」 3Dやフラットなものなど、実にたくさんのローディングアニメーションがあってみるだけでも楽しい。 続きを読む

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」 続きを読む

斜めがかったおしゃれなスライドショー実装「Crossroads Slideshow」:phpspot開発日誌

2019/07/25 9 users モーションブラー Codrops SVG デモ スライドショー

Crossroads Slideshow | Codrops 斜めがかったおしゃれなスライドショー実装「Crossroads Slideshow」 文字と写真が交差するおしゃれなスライドショー実装デモです 関連エントリ スライドショーにSVGでモーションブラーをかけてかっこ良くするデモ 超カッコいいApple風スライドショーギャラリー作成チュートリアル 続きを読む

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

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

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

WEB上で動くプレゼンテーション作成「Presentr」:phpspot開発日誌

2018/11/13 6 users PowerPoint ユーティリティ SVG形式 通貨 コード

Presentr WEB上で動くプレゼンテーション作成「Presentr」 PowerPointなしでもブラウザ上でサクサクプレゼンテーション 関連エントリ ブラウザ上でリアルタイム顔認識JS「pico.js」 JSのコードをSVG形式のフローチャートにして見やすくする「js2flowchart」 通貨を扱う際のユーティリティ「currency.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の... 続きを読む

どんな要素もblinkさせられる「jquery.blink」:phpspot開発日誌

2017/08/31 9 users blink Twitter GitHub 要素 関連エントリ

GitHub - johnboker/jquery.blink: jquery blink plugin どんな要素もblinkさせられる「jquery.blink」 <blink>タグとしてNetscape等で実装されていたものですが、jQueryプラグインにて復活。 点滅させることでシンプルですが目立たせることが出来ます 関連エントリ FB/Google/Twitterへのシェアボタンを簡単に... 続きを読む

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 AOS Sketch スクロール アニメーション html属性

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

タイムライン形式のスライダー実装「Timeline.js」:phpspot開発日誌

2017/06/07 8 users スライダー実装 slider タイムライン形式 年号 沿革

Timeline.js - easily creates timeline slider タイムライン形式のスライダー実装「Timeline.js」 年号等と同時に画像、テキストを表示することが出来、何らかの歴史等を表示するのに最適っぽいUIが実現できます。 コーポレートサイトの沿革、何かにも使えそうです 関連エントリ 分かりやすく美しい直感的に使えるタイムラインを実装できる「Timeline J... 続きを読む

画像や音声ファイルをアップロード前にプレビューできる「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() を呼び出すだけで速... 続きを読む