スクロールに応じて任意のテキストにアニメーションしながらハイライト
Result See the Pen Mark text effect on scroll w/ IO by kachibito (@kachibito) on CodePen. スクロールするとテキストにアニメー...
JavaScript - Archives
文章内に折れ線グラフを挿入する
Result See the Pen Stonks – Sparklines Renderer by kachibito (@kachibito) on CodePen. 非依存のvanillaなコードで動作します...
Excel等のスプレッドシートの表のコピーをMarkdown記法に変換する
Result See the Pen xxGeWEy by kachibito (@kachibito) on CodePen. 万能ではないですが、ExcelやGoogleスプレッドシートなどの表のコピーをMar...
Webページのサイドに自動で目次を作る
Result See the Pen Dynamic Active Table of Contents by kachibito (@kachibito) on CodePen. 左ペインの目次を自動で生成する、と...
入力したパスワードの文字の長さに応じて背景画像が鮮明になっていく
Result See the Pen Image Password Strength - #046 of #100Days100Projects by kachibito (@kachibito) on CodePen. ...
ミニ折れ線グラフ
Result See the Pen Micrographs by kachibito (@kachibito) on CodePen. jQueryを使ったミニ折れ線グラフです。コードは長いのでCodepenでご参照...
簡易的なダークモード
Result See the Pen Smarter inverted “dark mode” by kachibito (@kachibito) on CodePen. 簡単なダークモードを少しのCSSとJSで実装す...
iframeでもHTMLでも対応できる超軽量で非依存のLightboxスクリプト
Result See the Pen GVpdWB by kachibito (@kachibito) on CodePen. こういうベーシックなもの最近は全く見かけなくなりましたけど・・案件になると割と要望は頂...
table内をテキスト検索して該当キーワードを持つ列を表示する
Result See the Pen Light Javascript Table Filter by kachibito (@kachibito) on CodePen. table内のすべてのテキストから検索し...
Webページ最上部に、スクロールに応じてプログレスバーを表示する
Result See the Pen QRrYyV by kachibito (@kachibito) on CodePen. スクロールするとプログレスバーが表示されるやつ。非依存です 仕様が分かりやすいようにド派...
FlexboxとJavaScriptで、異なる文字数の行の幅を自動で一律にそろえる
Result See the Pen Flexible Full-Width “Justified” Text Blocks by kachibito (@kachibito) on CodePen. text-a...
mailtoリンクのクリックでクリップボードにコピーする
Result See the Pen Copy mailto: email to clipboard by kachibito (@kachibito) on CodePen. mailtoリンクをクリックすると、...
フォームの内容を元に任意のUIに遷移
Result See the Pen CSS Grid: Form to Badge by kachibito (@kachibito) on CodePen. フォームの内容から別のUIに遷移する、みたいなの ...
マウスで選択した文字数を数える
Result See the Pen WPXdMP by kachibito (@kachibito) on CodePen. マウスドラッグした文字数を数えます。JSはバニラです 使う機会があるかは分かりません ...
検索アイコンからローディングにアニメーション遷移
Result See the Pen Search loading by kachibito (@kachibito) on CodePen. 検索アイコンから時計アイコン（ローディング）に遷移する、みたいなやつです JSというよ...
アニメーション付きの数字カウンター
Result Webアプリなんかの登録者数アピール等やペラサイトのアフィリの類でよく見かけるやつです 0に戻してからeasingで元の数字に遷移させています jQuery html via
CSS変数を制御するJavaScriptスニペット
Result See the Pen Set CSS Variable with JavaScript by Chris Coyier (@chriscoyier) on CodePen. CSS変数を更新するJSスニペットで...
スクロールに応じて要素をアニメーション付きで表示させる
Result See the Pen show elements on scroll by kachibito (@kachibito) on CodePen. jQuery css html via ...
placeholderにテキストをランダム表示する
Result placeholderのテキストを複数ランダム表示する jQuery html via flex-box nav with random placeholders
見出しを固定してスクロール分の割合を%とプログレスバーで明示
Result jQuery 見出しの固定はJSではなくCSSのposition: sticky;が使われています html via Sticky Title/Page Progress Bar
表示されている画像を任意の画像に変更する
Result 画像をクリックすると別の任意の画像を選択出来るようになります。 jQuery html via jquery-imgedit
編集できるtableと、その入力値に連動した簡易的なグラフ
Result 編集はcontenteditable属性を使っています。 動作サンプルなのですべてのセルは編集可能となっていますので、コンテンツに応じて便宜変更してください jQuery css html ...