マウスで選択した文字数を数える Result See the Pen WPXdMP by kachibito (@kachibito) on CodePen. マウスドラッグした文字数を数えます。JSはバニラです 使う機会があるかは分かりません ...2019.02.15 | 10時03分12秒
検索アイコンからローディングにアニメーション遷移 Result See the Pen Search loading by kachibito (@kachibito) on CodePen. 検索アイコンから時計アイコン(ローディング)に遷移する、みたいなやつです JSというよ...2018.12.22 | 10時12分47秒
アニメーション付きの数字カウンター Result Webアプリなんかの登録者数アピール等やペラサイトのアフィリの類でよく見かけるやつです 0に戻してからeasingで元の数字に遷移させています jQuery html via2018.11.08 | 10時25分51秒
CSS変数を制御するJavaScriptスニペット Result See the Pen Set CSS Variable with JavaScript by Chris Coyier (@chriscoyier) on CodePen. CSS変数を更新するJSスニペットで...2018.09.15 | 8時31分09秒
スクロールに応じて要素をアニメーション付きで表示させる Result See the Pen show elements on scroll by kachibito (@kachibito) on CodePen. jQuery css html via ...2018.09.04 | 10時09分43秒
placeholderにテキストをランダム表示する Result placeholderのテキストを複数ランダム表示する jQuery html via flex-box nav with random placeholders2018.07.09 | 10時00分12秒
見出しを固定してスクロール分の割合を%とプログレスバーで明示 Result jQuery 見出しの固定はJSではなくCSSのposition: sticky;が使われています html via Sticky Title/Page Progress Bar2018.05.17 | 10時21分39秒
表示されている画像を任意の画像に変更する Result 画像をクリックすると別の任意の画像を選択出来るようになります。 jQuery html via jquery-imgedit2018.03.04 | 11時27分39秒
編集できるtableと、その入力値に連動した簡易的なグラフ Result 編集はcontenteditable属性を使っています。 動作サンプルなのですべてのセルは編集可能となっていますので、コンテンツに応じて便宜変更してください jQuery css html ...2018.02.22 | 11時18分27秒
複数inputに入力された数字の合計を表示する Result jQuery 複数inputに入力された数値の合算を出します。 簡易的な見積もりとかデータを扱う時に使えそうでしょうか html via jQuery: Calculate Sum Of a...2018.01.10 | 10時13分30秒
背景画像を画面いっぱいにしてスライドショー化する Result jQuery css html via Full Clip - fullscreen body background image jQuery plugin2017.11.27 | 11時22分09秒
スクロールに応じて背景画像を徐々にblurさせる Result jQuery css html via Zoom and Blur background Image2017.10.21 | 10時30分01秒
コピーライトの年数表示を自動化する Result 年の値を現地時間で取得するgetFullYearでコピーライトによく表示されてたりする年号表記を自動化します jQuery html via getFullYear メソッド (Date) (J...2017.06.09 | 10時42分51秒
画像の上で右クリック出来ないようにする Result つい最近の案件で相談されたので、まだこういうの需要あるかもと思って書きました。 画像のみ、右クリックを防止しています。あんまり期待する効果は得られないとは思いますが・・画像を保護する目的なら最低でも透かしは必ず入れたほ...2016.12.27 | 10時54分24秒
リストを任意のカラム数に分ける Result 普通のリストを任意のカラム数で分けます。現在は3カラムに分けられています。 var num_cols = 3,の数値を変更すれば設定したカラム数に分けられます。 マークアップには変更を加えず処理出来るので覚えてお...2016.12.26 | 10時33分50秒
リスト内で指定したキーワードにマッチする項目だけハイライトする Result input要素にキーワードを入力するだけでリスト内のマッチする項目をインタラクティブにハイライトします。 jQuery html via jSearch2016.11.27 | 10時31分49秒
Webページをフルスクリーン表示にするボタンを設置する Result ボタンを押せばフルスクリーン表示になりますが、上記はiframeで表示していますのでここで押してもフルスクリーンにならないようです。このあたりはWeb developer guide | MDNの「フルスクリーンの要...2016.11.26 | 10時10分22秒
tableの行をクリックすると下部に詳細が表示される Result jQuery css html via Expand Table Rows Using jQuery, HTML And CSS2016.10.23 | 10時09分12秒
チェックボックスで制限された数以上のチェックをされた際にアラートを表示させる Result チェックボックスの数を制限する時に。 jQuery via How to limit the number of selected checkboxes?2016.07.06 | 11時40分39秒
code、pre内のコードを別窓でtextareaに表示させる Result SyntaxHighlighterによく付いてるやつ。 これ自体需要は少なそうだけど応用すれば一般向けに使えそうです。 jQuery html via via:2016.06.27 | 11時32分41秒