monyurinのブックマーク - はてなブックマーク

テキストがシャッフルされてかっこいいMENU実装:phpspot開発日誌

PHP/HTML5/CSS3/JavaScript/CSS等の最新技術情報をお届け

monyurin 2022/04/06

アニメーション

リンク

Matter.jsとPaper.js を使った物理オブジェクトでコンテンツをマスクするデモ:phpspot開発日誌

monyurin 2021/04/14

物理エンジン

リンク

カラフルな球体をWEB上でうごかすThree.jsをつかったサンプル:phpspot開発日誌

monyurin 2021/02/03

3DCG

リンク

画像を円形でくり抜くためのUIを実装する「Cropme」:phpspot開発日誌

Cropme | a javascript image cropper 画像を円形でくり抜くためのUIを実装する「Cropme」プロフィール画像で最近では当たり前のようになった円形画像ですが画像をアップしてどの位置で使うかというUIはよくあります。それを実現するためのJSです。関連エントリホバー時にボーダーをアニメーションさせる「Nicebord.js」 JSでサイト内にスプレッドシートを組み込める「x-spreadsheet」

monyurin 2019/10/31

Javascript

リンク

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

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

monyurin 2019/10/22

音楽

リンク

画面をオーバーレイでかっこよく切り替えるサンプル:phpspot開発日誌

monyurin 2019/08/08

css

リンク

3Dオブジェクトを爆発させて散らばらせる派手なThree.jsを使ったデモ:phpspot開発日誌

CSS3でケン・バーンズエフェクトを使ったスライドショー実装「subtle-sli... 次の記事 ≫：ドラッグ＆ドロップでサイトを作れるようにするJS「VvvebJs」

monyurin 2019/07/18

three.js

リンク

動画のフルスクリーン背景実装jQuery「vidbacking」:phpspot開発日誌

GitHub - souravm84/vidbacking: vidbacking is a jQuery plugin to create HTML5 / Youtube video as background on webpage with fallback image support. It supports mp4 and webm files as well as Youtube video. 動画のフルスクリーン背景実装jQuery「vidbacking」 Youtubeやmp4,webmにも対応している。Youtubeが使えない場合にも活用可能関連エントリ HTMLをCanvasを使って画像に変換するjQueryサンプル

monyurin 2019/06/20

動画

リンク

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

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

monyurin 2019/02/21

リンク

マガジン形式のグリッドレイアウトを実現する「stratum.js」:phpspot開発日誌

GitHub - zaxoavoki/stratum.js: Small jQuery plugin for creating awesome masonry grid マガジン形式のグリッドレイアウトを実現する「stratum.js」この手のライブラリも珍しいものではなくなりましたが、１つの選択肢として覚えておいてもよいかも関連エントリ CSSグリッドを使った斬新なテンプレート「Outdoors Template」

monyurin 2018/10/09

grid

リンク

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

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

monyurin 2018/07/05

ui

リンク

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

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

monyurin 2018/04/19

リンク

リッチなファイルアップロードウィジェットが作れる「filepond」:phpspot開発日誌

GitHub - pqina/filepond: ? A flexible and fun JavaScript file upload library リッチなファイルアップロードウィジェットが作れる「filepond」次のようなリッチなアップロードウィジェットが実現できます関連エントリファイルアップロード前の名前、サイズ、MIMEタイプを得るjQuery 画像や音声ファイルをアップロード前にプレビューできる「jquery_upload_preview」

monyurin 2018/04/10

upload

リンク

シンプルデザインが使いやすそうなWYSIWYGエディタ「RichText」:phpspot開発日誌

GitHub - webfashionist/RichText: WYSIWYG editor developed as jQuery plugin シンプルデザインが使いやすそうなWYSIWYGエディタ「RichText」次のようなフラットデザインでも使えそうなWYSIWYGエディタ実装ができます関連エントリ HTML5ベースのWYSIWYGエディタ「Squire」 Markdown記法そのままでWYSIWYGできるエディタ実装jQueryプラグイン「Markdownify」

monyurin 2018/02/22

wysiwyg

リンク

軽量で依存性なしのレンガ状レイアウト実装JS「Macy.js」:phpspot開発日誌

複数選択が可能なドロップダウンリストが作れるjQueryプラグイン「Janki... 次の記事 ≫：ゲームボーイ版のポケモンフォントが使える「pokemon-font」

monyurin 2017/09/08

カード

リンク

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

GitHub - decease/jquery-skeduler: This is jQuery plugin which provider you simple scheduler with some it ems on OX and 24-hours timeline on OY. Googleカレンダー風のスケジュール表を生成できる「jquery-skeduler」次のようなスケジュール表表を生成できます関連エントリスケジュール表をレスポンシブかつシャレオツに表示するデモ

monyurin 2017/08/29

jQuery plugin

リンク

雑誌風のグリッドレイアウトを各種アニメーションで表示するサンプル集:phpspot開発日誌

Inspiration for Grid Loading Animations | Codrops 雑誌風のグリッドレイアウトを各種アニメーションで表示するサンプル集。単に雑誌風なレイアウトにするだけではなくおしゃれな多数のアニメーションでレイアウトできるデモです。アニメーション効果を付けることでよりモダンにネイティブライクに表示が出来ます関連エントリレスポンシブでソートやフィルタ、ドラッグ＆ドロップできるレンガレイアウト実装「Muuri」レスポンシブなタイル状レイアウトを実現できる「jquery-mosaic」

monyurin 2017/05/02

参考サイト

リンク

引っ張ってリロード機能をブラウザで実現するJS「pull-to-reload」:phpspot開発日誌

GitHub - ErlendEllingsen/pull-to-reload: Pull to reload implementation for the web. Designed to work with both mobile and websites. 引っ張ってリロード機能をブラウザで実現するJS「pull-to-reload」類似のライブラリを以前紹介しましたが、こちらも便利そう関連エントリ Pull to RefreshがWEB上でも簡単に実現できるJS「Pull to Refresh.js」

monyurin 2017/03/14

リンク

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

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

monyurin 2017/03/02