jQuery フェードインアウト fadeIn,fadeOutのメソッドは、ミリ秒単位で速さの指定ができます。 jQueryの使う上で、最もシンプルでよく使う演出の一つです。 .demo_btn{ display:... 2019-07-29 05:14:24
jQuery 処理を遅らせる delayメソッドを使ったサンプルです。 演出や処理の都合で、わざと遅らせることがあります。 何秒おきというわけではなく、単純に指定秒の間、待つメソッドを使います。 .demo_div{ width:10... 2019-07-29 20:51:10
CSS3 やわらかい動き ポヨンと弾力のあるアニメーションの演出です。 CSSのアニメを使ってやわらかい表現を付加します。 表示時とクリックしたときに発動するサンプルです。 クラスを設定すれば、要素は画像でもSVGでも文字で... 2019-08-03 22:14:07
jQuery キーを押されたら実行 キーボードのボタンを押されたときに何かを実行するときのサンプルです。 例えば「a」のボタンが押されたときに、何かイベントを発動させたいときjQueryで発動させることができます。 まずは、キーを押された時に取得できる値を確認... 2019-08-03 22:05:56
jQuery 日付指定 jQueryのUIに特化したプラグインを利用した日付を選択する入力欄の作り方です。 文字を入力して日付を記入するのは、面倒ですし、フォーマットがそろわなくて、データとして使いにくい値になってしまいます。 そんな時に以下のようなサンプ... 2019-08-07 22:52:52
jQuery BMIの計算ツール JSはいろいろできるので、せっかくなので標準体重を図るツールを作りました。 BMI (Body Mass Index)と呼ばれる指数は、成人の体格の肥満度を表す指数です。 算出方法は「体重(kg)÷身長(m)の二乗」とシンプルですので、JSを用いて計算す... 2019-08-03 21:52:15
jQuery 画像読み込んでから発火 重い画像を読み込んだ後に表示します。 大きな画像や画質の高い画像は読み込みに若干時間がかかります。 読み込み中にJSが発火してしまうと、画面がガタついたり、予期せぬ動きをしてしまったりしま... 2019-08-07 21:46:57
jQueryとCSS カードをクリックでめくる表現 jQueryとCSSのアニメーションを使って、カードをクリックすると画像がめくれる表現のサンプルです。 以前カードをめくるような表現のサンプルを記載しましたが、改善版です。 要素をコピペで量産、順番を変えてもJSの修正は不要のため、編集が楽になりました。... 2019-07-28 04:58:36
jQuery スクロールでクラス付加、解除 スクロールするとクラスを追加して、変化させるサンプルです。 要素がブラウザの中央付近になったときに、エフェクトがかかるデザインをよく見かけるようになりました。 このサンプルでは、特定クラスで囲った要素までスク... 2019-07-28 17:14:04
jQuery マウスのトリガーいろいろ マウスの動きで発動させる場合によく使われる記述を一部列挙しておきます。 クリックしたら、何かが起こる仕掛けはよく使われますが、ダブルクリックや右クリック(=コンテクストメニュー)でも発動させることが可能です。 マウスの場... 2019-07-29 21:39:13