タグ "jQuery" を含む投稿を表示中:97件
-
【JavaScript】マウスホバー時のテキストカラーをカスタムデータ属性で指定する方法 たとえば次のようなHTMLを書いたとき。 <a href=”#” data-color=”#ff0066″>リンク文字列</a> カスタムデータ属性(この場合は「data-color」)で指定した値を、マウスホバー時… 【JavaScript】マウスホバー時のテキストカラーをカスタムデータ属性で指定する方法続きを読む →
-
【 jQuery】プラグイン無しで[Contact Form 7]にjQuery Datepicker(カレンダー機能)を追加する方法 ワードプレスプラグインの[Contact Form 7]使用時に、日付選択でカレンダー機能を追加する場合、4〜5年前までは[Contact Form 7 Datepicker]を利用するケースがほとんどでした。 しかしながら[Contact… 【 jQuery】プラグイン無しで[Contact Form 7]にjQuery Datepicker(カレンダー機能)を追加する方法続きを読む →
-
初心者ウェブクリエイターの方々に「動くWebデザインアイディア帳」をオススメします 「ウェブサイトのアニメーションの基礎を網羅している書籍がほしい」 そんな想いを抱く初心者ウェブクリエイターの方々に超絶オススメの書籍があります。 『動くWebデザインアイディア帳』です。 久保田涼子さんと杉山彰啓さんによる共著。 とある場所… 初心者ウェブクリエイターの方々に「動くWebデザインアイディア帳」をオススメします続きを読む →
-
【HTML5 + jQuery】音声ファイルの再生/停止を制御するボタン ウェブサイトで音声ファイルを再生したい場合、HTML5で単純にaudioタグを使うだけで実現できますが、今回はさらにJQueryを利用して再生と停止をコントロールする方法を紹介します。 まずはHTMLの記述です。 <audio src… 【HTML5 + jQuery】音声ファイルの再生/停止を制御するボタン続きを読む →
-
【jQuery】右クリックを禁止する方法 ウェブサイトで右クリックを禁止して、コンテキストメニューを表示させなくする方法を紹介します。 ウェブサイト全体で右クリックを禁止にする方法 なにがなんでも、とにかく右クリックを禁止にする方法です。 以下のコードで実装できます。 $(func… 【jQuery】右クリックを禁止する方法続きを読む →
-
【jQuery】特定の要素をクリックしたことにする .trigger() の使い方 ある要素をクリックしたことにする .trigger() の使い方を紹介します。 $(‘#sample’).trigger(“click”); これで[id=”sample”]と名付けられた要素をクリックしたことにでき… 【jQuery】特定の要素をクリックしたことにする .trigger() の使い方続きを読む →
-
【jQuery】順番に処理を実行する .when() と .done() の使い方 JavaScript を書いているときに、複数の処理を順番に実行したい場面に遭遇します。 そんなときに[.when()]と[.done()]を使うのが便利です。 .when() は先に実行したい処理。 .done() は後で実行したい処理。… 【jQuery】順番に処理を実行する .when() と .done() の使い方続きを読む →
-
【JavaScript】スマホやタブレット端末で、デバイスを回転させたときにイベントを発動する方法 スマートフォンやタブレット端末で、デバイスを回転させて画面が縦横に切り替わったときに、イベントの判定処理を行う方法を紹介します。 回転イベント「orientationchange」を使う デバイスを回転させたときにイベントを発火させるには「… 【JavaScript】スマホやタブレット端末で、デバイスを回転させたときにイベントを発動する方法続きを読む →
-
ブラウザの「戻る」ボタンで画面遷移したときに強制的にリロードする方法 ブラウザの「戻る」ボタンを押したとき。通称「ブラウザバック」と呼ばれる画面遷移が行われたときに、強制的にページを再読み込みさせる方法です。 window.onpageshow = function(event) { if (event.pe… ブラウザの「戻る」ボタンで画面遷移したときに強制的にリロードする方法続きを読む →
-
【jQuery】テキストにアニメーションを施す[textillate.js]の使い方 テキストにアニメーションを追加するjQueryプラグイン[textillate.js]の使い方を紹介します。 まずはサンプルをご覧ください。 textillate.js : http://textillate.js.org エフェクト部分は… 【jQuery】テキストにアニメーションを施す[textillate.js]の使い方続きを読む →
-
【jQuery + CSS】レスポンシブでヌルヌル動く[Expanding Column Layout]を使ってみました。 先日CODEPENで「何か使えるテクニックはないかな〜」とネットサーフィンしながらイロイロと物色していたところ、「Expanding Column Layout」というスタイルシートのテクニックを見つけました。 以前、本ブログで「CSS3 … 【jQuery + CSS】レスポンシブでヌルヌル動く[Expanding Column Layout]を使ってみました。続きを読む →
-
【jQuery】指定したアニメーションでモーダルウィンドウが表示される[animatedModal.js]の使い方 指定した様々なアニメーションでモーダルウィンドウを表示するjQueryプラグイン[animatedModal.js]の使い方を紹介します。 まずはサンプルをどうぞ。 DEMO : https://on-ze.com/demo/jquery-… 【jQuery】指定したアニメーションでモーダルウィンドウが表示される[animatedModal.js]の使い方続きを読む →
-
【jQuery】ページのスクロールに応じて要素を表示する[Scrolla]の使い方 Webページのスクロールに合わせて要素を表示させるjQueryプラグイン[Scrolla]を紹介します。 同様の機能を持つプラグインでは[ScrollReveal]や[jquery.inview]または[WOW.js]などが有名ですが、これ… 【jQuery】ページのスクロールに応じて要素を表示する[Scrolla]の使い方続きを読む →
-
複数のjQueryライブラリ併用時のコンフリクト(衝突)を回避する jQueryプラグインをいくつか同時に使っていると、稀に正しいコードを記述しているはずなのに動かないという事態に陥ります。 これはjQuery同士がコンフリクト(衝突)しているのが原因です。 コンフリクト(競合)とは バージョンの違うプラグ… 複数のjQueryライブラリ併用時のコンフリクト(衝突)を回避する続きを読む →
-
【jQuery】テキストで背景を切り抜く[TextHoler.js]の使い方 今回ご紹介する[TextHoler.js]を使うと、テキストで背景画像をマスキングして切り抜き表示してくれます。 まずはサンプルをご覧ください。 DEMO : https://on-ze.com/demo/jquery-textholer…. 【jQuery】テキストで背景を切り抜く[TextHoler.js]の使い方続きを読む →
-
映画『マトリックス』の背景エフェクトを canvas で実装してみた。 映画『マトリックス』のオープニングで使われている、コンピューターの画面上を緑の文字が流れる映像。通称「マトリックス・コード」を、ウェブページの背景エフェクトとして canvas で実装したサンプルを紹介します。 もとはネットサーフィン中に見… 映画『マトリックス』の背景エフェクトを canvas で実装してみた。続きを読む →