JavaScript - ユニーク

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

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

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

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

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

Result See the Pen Stonks – Sparklines Renderer by kachibito (@kachibito) on CodePen. 非依存のvanillaなコードで動作します...
Ads

ミニ折れ線グラフ

Result See the Pen Micrographs by kachibito (@kachibito) on CodePen. jQueryを使ったミニ折れ線グラフです。コードは長いのでCodepenでご参照...

FlexboxとJavaScriptで、異なる文字数の行の幅を自動で一律にそろえる

Result See the Pen Flexible Full-Width “Justified” Text Blocks by kachibito (@kachibito) on CodePen. text-a...

マウスで選択した文字数を数える

Result See the Pen WPXdMP by kachibito (@kachibito) on CodePen. マウスドラッグした文字数を数えます。JSはバニラです 使う機会があるかは分かりません ...

特定の文字だけスタイリングする

Result jQuery css html via

Wikipedia内を検索する

Result Wikipedia内を検索、その場に表示 jQuery html via Wikipedia Viewer

コピーライトの年数表示を自動化する

Result 年の値を現地時間で取得するgetFullYearでコピーライトによく表示されてたりする年号表記を自動化します jQuery html via getFullYear メソッド (Date) (J...

tableの行をクリックすると下部に詳細が表示される

Result jQuery css html via Expand Table Rows Using jQuery, HTML And CSS

code、pre内のコードを別窓でtextareaに表示させる

Result SyntaxHighlighterによく付いてるやつ。 これ自体需要は少なそうだけど応用すれば一般向けに使えそうです。 jQuery html via via:

HTMLをCanvasにして画像としてダウンロードできるようにする

Result See the Pen beGPjj by kachibito (@kachibito) on CodePen. スニペットとは言えませんが・・w html2canvasとjQueryを使ってCanvas化、ダウンロ...

テキストをツートンカラーにする

Result jQuery css html via Is it possible to apply CSS to half of a character?

普通のリストに任意の文字列と番号を加える・改正

「普通のリストに任意の文字列と番号を加える」のコードが、同じページ内で複数作ると上手く動作しない、と連絡を頂いたので改正版。 Result jQuery index()メソッドで取得したインデックス番号は0からなので1を足...

Youtubeの動画再生後に関連動画を表示させない

Result 埋め込みコードにいちいちrel=0パラメーターを加えるのは面倒なので関連動画が自動でOffになるようにする。他のパラメーターも同じ方法で挿入できますね。 jQuery html 埋め込みコードはそのまま...

簡易的なSyntax Highlighterを実装する

モバイル時はタップ式、PCサイトではドロップダウンに切り替える

テキストを1文字ずつclass付きのspanで囲う

マウスを乗せると背景画像が動く

シンプルなビフォー/アフター

ボタンをクリックした時に一瞬だけメッセージを表示する

「タイピングしてる」っぽいテキストエフェクトを作る

Ads