株式会社オンズのブログ記事一覧
タグ "jQuery" を含む投稿を表示中：98件
-
【JavaScript】マウスホバー時のテキストカラーをカスタムデータ属性で指定する方法 カスタムデータ属性（この場合は「data-color」）で指定した値を、マウスホバー時のテキストカラーとして使う方法を紹介します。 現在のCSSの仕様では、要素の属性値を直接CSSのプロパティ値として使用することはできないので、JavaSc... 【JavaScript】マウスホバー時のテキストカラーをカスタムデータ属性で指定する方法続きを読む →
-
-
-
【HTML5 + jQuery】音声ファイルの再生／停止を制御するボタン ウェブサイトで音声ファイルを再生したい場合、HTML5で単純にaudioタグを使うだけで実現できますが、今回はさらにJQueryを利用して再生と停止をコントロールする方法を紹介します。 まずはHTMLの記述です。 <audio src... 【HTML5 + jQuery】音声ファイルの再生／停止を制御するボタン続きを読む →
-
【jQuery】右クリックを禁止する方法 ウェブサイトで右クリックを禁止して、コンテキストメニューを表示させなくする方法を紹介します。 ウェブサイト全体で右クリックを禁止にする方法 なにがなんでも、とにかく右クリックを禁止にする方法です。 以下のコードで実装できます。 $(func... 【jQuery】右クリックを禁止する方法続きを読む →
-
【jQuery】特定の要素をクリックしたことにする .trigger() の使い方 jQueryの.trigger()メソッドを使うことで、特定のイベントを強制的に発生させることができます。 例えば、ボタンやリンクのクリックイベントをプログラム上で発生させたいときに使います。 ある要素をクリックしたことにする .trigg... 【jQuery】特定の要素をクリックしたことにする .trigger() の使い方続きを読む →
-
【jQuery】順番に処理を実行する .when() と .done() の使い方 JavaScript を書いているときに、複数の処理を順番に実行したい場面に遭遇します。 そんなときに［.when()］と［.done()］を使うのが便利です。 .when() は先に実行したい処理。 .done() は後で実行したい処理。... 【jQuery】順番に処理を実行する .when() と .done() の使い方続きを読む →
-
【JavaScript】スマホやタブレット端末で、デバイスを回転させたときにイベントを発動する方法 スマートフォンやタブレット端末で、デバイスを回転させて画面が縦横に切り替わったときに、イベントの判定処理を行う方法を紹介します。 回転イベント「orientationchange」を使う デバイスを回転させたときにイベントを発火させるには「... 【JavaScript】スマホやタブレット端末で、デバイスを回転させたときにイベントを発動する方法続きを読む →
-
ブラウザの「戻る」ボタンで画面遷移したときに強制的にリロードする方法 ブラウザの「戻る」ボタンを押したとき。通称「ブラウザバック」と呼ばれる画面遷移が行われたときに、強制的にページを再読み込みさせる方法です。 window.onpageshow = function(event) { if (event.pe... ブラウザの「戻る」ボタンで画面遷移したときに強制的にリロードする方法続きを読む →
-
ブラウザの「戻る」ボタンで画面遷移したときに強制的にリロードする方法 ブラウザの「戻る」ボタンを押したとき。通称「ブラウザバック」と呼ばれる画面遷移が行われたときに、強制的にページを再読み込みさせる方法です。 window.onpageshow = function(event) { if (event.pe... ブラウザの「戻る」ボタンで画面遷移したときに強制的にリロードする方法続きを読む →
-
-
-
-
【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］の使い方続きを読む →
-
-
【jQuery】シンプルなパララックス効果を実装できる［parlx.js］の使い方 今日ご紹介する［parlx.js］はパララックス効果を手軽に導入できるjQueryプラグインです。 サンプルは以下に用意してあります。 DEMO : https://on-ze.com/demo/jquery-parlx.js/ データファ... 【jQuery】シンプルなパララックス効果を実装できる［parlx.js］の使い方続きを読む →
-
【jQuery】リアルな波紋模様を再現する［jQuery Ripples］を使ってみる。 マウスの動きに合わせて波紋を描くjQueryプラグイン［jQuery Ripples］の使い方を紹介します。 まずは実際にウェブページに組み込んだサンプルを用意しましたのでご覧ください。 ONZE DEMO : https://on-ze.... 【jQuery】リアルな波紋模様を再現する［jQuery Ripples］を使ってみる。続きを読む →
-
【jQuery】モーダルウィンドウ実装する超秀逸［Modaal］プラグインの使い方 このjQueryプラグイン、モーダルウィンドウを手軽に実装したい方に超絶オススメです！ まずは実際の挙動を確認してみましょう。 DEMO : http://humaan.com/modaal/ 「VIEW EXAMPLE」をクリックすると、... 【jQuery】モーダルウィンドウ実装する超秀逸［Modaal］プラグインの使い方続きを読む →
-
【jQuery】シンプルなLightbox系プラグイン［Darkbox jQuery Gallery］の使い方 今日ご紹介する［Darkbox jQuery Gallery］は、有名な［Lighbox］系のミニマルなjQueryプラグインです。 サンプル : https://on-ze.com/demo/jquery-darkbox-gallery/... 【jQuery】シンプルなLightbox系プラグイン［Darkbox jQuery Gallery］の使い方続きを読む →
-
失われし「marquee」タグを再現する［hMarquee］でテキストの横スクロールを実装！ 新参のウェブデザイナーの方々には馴染みがないかもしれませんが、過去、HTMLの「marquee」タグが流行した時代がありました。 既に廃止されたこのタグは、テキストを横スクロールさせるために用いられていました。 いま、これと同じ挙動を実現す... 失われし「marquee」タグを再現する［hMarquee］でテキストの横スクロールを実装！続きを読む →
-
【jQuery】スライドと画像ズームの機能を兼ね備えた［Zoom SlideShow］の使い方 今日ご紹介する［Zoom SlideShow］は、スライドショーとズーム機能を兼ね備えた、ちょっと特殊な動きをするjQueryプラグインです。 公式のデモサイトは以下。 Zoom SlideShow : https://zoom-slide... 【jQuery】スライドと画像ズームの機能を兼ね備えた［Zoom SlideShow］の使い方続きを読む →
-
