JSを一切使わないCSSでできたドロップダウンなどのUI実装「CSSUI」:phpspot開発日誌
CSSUI - Pure CSS interactive components JSを一切使わないCSSでできたドロップダウンなどのUI実装「CSSUI」 そこまでJSを使わない必要があるのか、と逆に思ってしまいますが、リッチなUIがCSSのみで作れてしまいます
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
CSSUI - Pure CSS interactive components JSを一切使わないCSSでできたドロップダウンなどのUI実装「CSSUI」 そこまでJSを使わない必要があるのか、と逆に思ってしまいますが、リッチなUIがCSSのみで作れてしまいます
abcjs JSで楽譜を描画して再生までできる「abcjs」 あまり音楽の知識はありませんが、なんかすごい感じがします 関連エントリ 超カッコいいスクロールエフェクト実装「lax.js」 リッチでカッコいいカラーピッカー「iro.js」 ホバー時にボーダーをアニメーションさせる「Nicebord.js」
CSS Loaders: A collection of more than 500 loading animations CSSのみで実装された５００種類のローディングアニメーション「CSS Loaders」 3Dやフラットなものなど、実にたくさんのローディングアニメーションがあってみるだけでも楽しい。
GitHub - alejandromur/shyheader: A simple, light-weight and easy-to-use jQuery Plugin that shows/hides the header of the page when users scroll the page down more than its height. However, the header remains watching the page so when users scroll the page up its being showed. すぐ隠れてくれるヘッダー実装「shyheader」。 ページ表示時に表示されてスクロールで消えて上スクロールでうっすら現れるというヘッダーが実装できます 関連エントリ 超カッコいいスクロールエフェクト実装「lax.js」 スクロール量をページトッ
Framer Motion React用アニメーションライブラリ「Framer Motion」 様々なアニメーションを比較的容易に実装できそうです 関連エントリ タイプライターアニメーション「type-this」 美しい背景アニメーション集「Ambient Canvas Backgrounds」 なめらかでFlashみたいなテキストアニメーション「TextyleFLIP.js」
Spotlight.js Demo 軽量のイメージギャラリー「Spotlight.js」 画像を拡大したりスライドショーしたりという豊富な機能がありつつ軽量なギャラリーがつくれます 関連エントリ おしゃれなギャラリー風ページを作るデモ シンプルなグリッドベースのギャラリー実装jQuery「sampGallery」
GitHub - victorqribeiro/isocity: A isometric city builder in JavaScript JSでcimcityっぽく街をモデルする「isocity」 次のような街をブラウザ上でモデリングできるデモです 関連エントリ タイトルをアニメーションさせてタブを目立たせる「blinkTitle.js」 WEBページでダークモードに対応するためのJS「darkmodejs」 ホバー時にボーダーをアニメーションさせる「Nicebord.js」
Emailのドメイン部分のみオートコンプリートしてくれるjQuery「email-autoco... 次の記事 ≫：JSで楽譜を描画して再生までできる「abcjs」
Cropme | a javascript image cropper 画像を円形でくり抜くためのUIを実装する「Cropme」 プロフィール画像で最近では当たり前のようになった円形画像ですが画像をアップしてどの位置で使うかというUIはよくあります。 それを実現するためのJSです。 関連エントリ ホバー時にボーダーをアニメーションさせる「Nicebord.js」 JSでサイト内にスプレッドシートを組み込める「x-spreadsheet」
GitHub - ctrl-freaks/freezeframe.js: freezeframe.js is a library that pauses animated .gifs and enables them to animate on mouse hover / mouse click / touch event, or with trigger / release functions. GIFアニメーションをマウスホバーやクリックによって再生停止できる「freezeframe.js」 再生コントロールが難しいGIFを制御できるのは便利ですね 関連エントリ リアルなタイプライターアニメーション実装「T-Writer Demo」 美しい背景アニメーション集「Ambient Canvas Backgrounds」
Examples & Demos | Cuttr.js - truncate multi-line text テキストを省略してブロックを小さくできる「Cuttr.js」 文字単位、単語単位といった区切りで文書を短くすることができ、Readmoreで全部表示ということが可能です 英語のライブラリなので日本語対応するにはカスタマイズが必要だと思いますが、文字単位ならそのまま使えますね
PHP/HTML5/CSS3/JavaScript/CSS等の最新技術情報をお届け
GitHub - n3r4zzurr0/svg-spinners: A collection of 24 x 24 dp SVG spinners! SVGのローディングアイコン「svg-spinners」 フリーで使えるSVG形式のローディングアイコン。汎用から個性的なものまで。
GitHub - Assortment/darkmodejs: Utility package for managing Dark Mode on the web WEBページでダークモードに対応するためのJS「darkmodejs」 最近話題のダークモードに対応するためのJS。WEBページもダークモード対応。やることがどんどん増えます（笑） 関連エントリ 超カッコいいスクロールエフェクト実装「lax.js」 JSでサイト内にスプレッドシートを組み込める「x-spreadsheet」 リッチでカッコいいカラーピッカー「iro.js」
PHP/HTML5/CSS3/JavaScript/CSS等の最新技術情報をお届け
文字がカッコよく動き回るページデモ「Repetitive Typography Animation」:phpspot開発日誌
Repetitive Typography Animation - Codrops 文字がカッコよく動き回るページデモ「Repetitive Typography Animation」 文字を動かすだけでもこれだけカッコよくできるということで色々応用してみても面白そうです
Revealing Hero Effect in CSS and JavaScript | CodyHouse ページのセクションを分割した感じにできるスクロールエフェクト １ページなのですが、複数のページで構成されている風にアニメーションできて今風のページが作れるデモです 関連エントリ 超カッコいいスクロールエフェクト実装「lax.js」 スクロール量をページトップのプログレスバーで表示できる「scrollpup.js」 WebGLを使ったスクロールでパーティクルがアニメーションするサンプル
GitHub - bpampuch/pdfmake: Client/server side PDF printing in pure JavaScript PureJSでPDFの生成ができるライブラリ「pdfmake」 JSの変数でPDFドキュメントの内容を設定してPDF出力できる模様 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 データのビジュアリゼーションに使えるJSライブラリ「d3.js」
GitHub - hsynlms/autotyperjs: A vanilla javascript plugin for animated typewriting タイプライターアニメーションを実装する「autotyperjs」 文字を1個1個打ってるようにアニメーションするアレが実装できます 関連エントリ リアルなタイプライターアニメーション実装「T-Writer Demo」 美しい背景アニメーション集「Ambient Canvas Backgrounds」
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSで楽譜を描画して再生までできる「abcjs」:phpspot開発日誌
CSSのみで実装された５００種類のローディングアニメーション「CSS Loaders」:phpspot開発日誌
すぐ隠れてくれるヘッダー実装「shyheader」:phpspot開発日誌
React用アニメーションライブラリ「Framer Motion」:phpspot開発日誌
軽量のイメージギャラリー「Spotlight.js」:phpspot開発日誌
JSでcimcityっぽく街をモデルする「isocity」:phpspot開発日誌
ページ内の画像をスムーススクロールするデモ:phpspot開発日誌
画像を円形でくり抜くためのUIを実装する「Cropme」:phpspot開発日誌
GIFアニメーションをマウスホバーやクリックによって再生停止できる「freezeframe.js」:phpspot開発日誌
テキストを省略してブロックを小さくできる「Cuttr.js」:phpspot開発日誌
selectボックスのbootstrap化「bootstrapSelect」:phpspot開発日誌
SVGのローディングアイコン「svg-spinners」:phpspot開発日誌
WEBページでダークモードに対応するためのJS「darkmodejs」:phpspot開発日誌
手書き風ピクトグラムアイコン４００種「Doodle Icons」:phpspot開発日誌
ページのセクションを分割した感じにできるスクロールエフェクト:phpspot開発日誌
PureJSでPDFの生成ができるライブラリ「pdfmake」:phpspot開発日誌
タイプライターアニメーションを実装する「autotyperjs」:phpspot開発日誌
www.works-life.com
card-db.com
ainoyamanoyu.com
realsound.jp
nekozanaruri.hatenablog.com
l.smartnews.com