JavaScript - Archives

Webページに「Mastodonで記事をシェア」ボタンを設置するコード

Result See the Pen Untitled by kachibito (@kachibito) on CodePen. 表題の通りで、任意の記事をユーザーにMastodonで投稿して貰う為の共有ボタ...

スクロールに応じて3Dモデルを回転させる

Result See the Pen 3D Model Scroll-Driven Animation (POC) by kachibito (@kachibito) on CodePen. 表題の通りで、3D...

localStorageで保存可能の、シンプルなテーマ切り替え

Result See the Pen Theme Switcher Demo - Cleaned Up by kachibito (@kachibito) on CodePen. ダークモードにも使えるテー...
Ads

目線がマウスの動きを追う的なやつ

Result See the Pen Untitled by kachibito (@kachibito) on CodePen. マウスを目線が追う的なやつです。👆こういうの。 必要性はさほど高くはない...

CSS+JavaScriptでローディング時にスケルトンスクリーン

Result See the Pen Untitled by kachibito (@kachibito) on CodePen. ユーザーに優しいとウワサのローディング時のスケルトンスクリーンを殆どCSS、ほ...

VanillaなJavaScriptでページ内検索

Result See the Pen Demo In-Page filtered Search by kachibito (@kachibito) on CodePen. よくあるページ内インクリメンタル検...

VanillaなJSでスクロールに応じて要素をアニメーション

Result See the Pen How to Animate on Scroll With Vanilla JavaScript by kachibito (@kachibito) on CodePen. こ...

スクロール追従するページ内ナビゲーション

Result See the Pen Smooth Scrolling Sticky ScrollSpy Navigation by kachibito (@kachibito) on CodePen. 少しのVani...

jQueryプラグインのLettering.jsをVanillaに変換

Result See the Pen JjKbdmE by kachibito (@kachibito) on CodePen. CSS-TricksのChris氏が開発した、文字装飾ライブラリはjQueryプラグイン...

スクロールに応じて任意のテキストにアニメーションしながらハイライト

Result See the Pen Mark text effect on scroll w/ IO by kachibito (@kachibito) on CodePen. スクロールするとテキストにアニメー...

文章内に折れ線グラフを挿入する

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に遷移する、みたいなの ...
Ads