JavaScript - addClass()

ミニ折れ線グラフ

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

mailtoリンクのクリックでクリップボードにコピーする

Result See the Pen Copy mailto: email to clipboard by kachibito (@kachibito) on CodePen. mailtoリンクをクリックすると、...

検索アイコンからローディングにアニメーション遷移

Result See the Pen Search loading by kachibito (@kachibito) on CodePen. 検索アイコンから時計アイコン(ローディング)に遷移する、みたいなやつです JSというよ...
Ads

スクロールに応じて要素をアニメーション付きで表示させる

Result See the Pen show elements on scroll by kachibito (@kachibito) on CodePen. jQuery css html via ...

編集できるtableと、その入力値に連動した簡易的なグラフ

Result 編集はcontenteditable属性を使っています。 動作サンプルなのですべてのセルは編集可能となっていますので、コンテンツに応じて便宜変更してください jQuery css html ...

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

Result jQuery css html via

リストを任意のカラム数に分ける

Result 普通のリストを任意のカラム数で分けます。現在は3カラムに分けられています。 var num_cols = 3,の数値を変更すれば設定したカラム数に分けられます。 マークアップには変更を加えず処理出来るので覚えてお...

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

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

緯度経度を指定したテキストにマウスを乗せるとGoogleMapも動くようにする

Result マウスホバーでGoogle Mapが動的に移動する、みたいなの。リストには予めカスタムデータ属性で緯度経度を設定してあります。 Google map APIも読み込みます。 jQuery css ...

li要素をクリックでハイライトする

Result li要素をクリックでハイライトする。1つの情報が多いリストの可視性を高めたり等、他にも応用できそう。このままのコードだとネストされたリストは子要素も全てハイライトするので入れ子に対応するには少し工夫が必要になります。 ...

レスポンシブWebデザイン対応のメガメニュー

Result See the Pen megamenu.js - Last responsive megamenu you'll ever need by Mario Loncarek (@riogrande) on CodePen. ...

inputやtextareaで、指定した文字数を超えた際に警告文を出す

Result maxlength属性は何かとアレなので文字数自体は制限せずに、予め設定した文字数を超過した際に警告文を出すようにする jQuery html via Maximum Characters lim...

テーブル内で空の要素をハイライトさせる

Result 動的に作られたテーブル向けになりそうです。空の要素がある行を削除、みたいな応用もできそう。 jQuery css html via

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

ベーシックなアニメーションエフェクト付きのタブ

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

マウスを乗せるとフィードバック用のフォームが出る

要素を画面上に沢山降らせる

スクロールに応じて背景を変える

クリックでアニメーションしながら開閉するアコーディオン

エフェクトなしの普通のアコーディオン

少しずつ流れて、マウスを乗せるとストップするニュースティッカー

Ads