株式会社オンズのブログ記事一覧
タグ "jQuery" を含む投稿を表示中：98件
-
【jQuery】テキストをシャッフルさせるエフェクトを加えるプラグイン［chaffle］を紹介します。 今日紹介する［chaffle］は超簡単に実装できるjQueryプラグインで、テキストにマウスカーソルを当てると、文字をランダムにシャッフルして表示させることができます。 言葉の説明では難しいので、まずはサンプルをご覧ください。 ［chaff... 【jQuery】テキストをシャッフルさせるエフェクトを加えるプラグイン［chaffle］を紹介します。続きを読む →
-
【jQuery】様々な動作「.load」「.scroll」「.resize」を行ったときの処理をまとめて書く方法。 ウェブサイトを閲覧しているとき、jQuery側で様々な動作を感知・取得して、その動作に合わせた処理を行うことが多々あります。 例えば、「ページの読み込みが完了したとき」なら.load を使い、「スクロール操作したとき」なら.scrollを、... 【jQuery】様々な動作「.load」「.scroll」「.resize」を行ったときの処理をまとめて書く方法。続きを読む →
-
【jQuery】今こそマスターしたい高機能スライダー［Slider Pro］の使い方 数あるjQueryスライダーの中から目的の用途に合ったものを探すのはちょっとした手間ですが、今日紹介する［Slider Pro］は完成度も高く機能も豊富なので、一度試してみることをオススメします。 名前に「Pro」と付きますがMITライセン... 【jQuery】今こそマスターしたい高機能スライダー［Slider Pro］の使い方続きを読む →
-
【jQuery】スクロール機能とナヴィゲーション機能が一体となった［ScrollMenu.js］は実用性バツグンです。 縦長のウェブデザインを構築する際に真っ先に導入を検討すべきjQueryプラグイン。それが［ScrollMenu.js］です。 まずはサンプルをご覧ください。 ［ScrollMenu.js］：実装サンプル ページのスクロール量に合わせてナヴィ... 【jQuery】スクロール機能とナヴィゲーション機能が一体となった［ScrollMenu.js］は実用性バツグンです。続きを読む →
-
【jQuery】ウィンドウ内に要素が表示されたときに処理を行う［jquery.inview］プラグイン。 特定の要素がブラウザの表示領域に現れたときに処理を実行するjQueryプラグイン。それが［jquery.inview］です。 このプラグインを利用すると、ウィンドウに指定した要素が現れたタイミングで様々なイベントを施すことができます。 今回... 【jQuery】ウィンドウ内に要素が表示されたときに処理を行う［jquery.inview］プラグイン。続きを読む →
-
【jQuery】要素が「横幅」と「縦幅」を持って表示されているかどうかを確認する方法。 HTMLコード内に記述してある要素が、横幅と縦幅を持って、ウィンドウ内に表示されているかどうかを判定する方法を紹介します。 例えばある特定の要素に、スタイルシート側でwidth:0; height:0;を指定すると、当然その要素は表示されま... 【jQuery】要素が「横幅」と「縦幅」を持って表示されているかどうかを確認する方法。続きを読む →
-
【jQuery】画像や動画をズームして表示できる［Magnific Popup］を紹介します。 レスポンシヴ対応で、画像や動画をズームして表示できるjQueryプラグイン［Magnific Popup］を紹介します。 基本的な動作は所謂「Lightbox」と同じですが、オプションの設定により、画像がスムーズにズームして表示されるように... 【jQuery】画像や動画をズームして表示できる［Magnific Popup］を紹介します。続きを読む →
-
【jQuery】ウェブページの背景全面で動画を再生する［Vide］の使い方 ここで紹介する［Vide］は、ウェブページの背景全面で動画を再生するjQueryプラグインです。 まずはサンプルをご覧ください。 ［Vide］：サンプル・サイト 使用するプラグインのダウンロードは以下、公式サイトからどうぞ。 ［Vide］：... 【jQuery】ウェブページの背景全面で動画を再生する［Vide］の使い方続きを読む →
-
【jQuery】画像のドミナントカラーを抽出する［Adaptive Backgrounds］の使い方 今日紹介する［Adaptive Backgrounds］は、画像のドミナントカラーを抽出して、親要素のボックスの背景色として再設定できるjQueryプラグインです。 言葉の説明だけでは難しいので、まずはサンプルをご覧ください。 ［Adapt... 【jQuery】画像のドミナントカラーを抽出する［Adaptive Backgrounds］の使い方続きを読む →
-
-
【jQuery】画像、動画、ボックス要素をポップアップで表示させる［Lity］の使い方。 画像や動画をポップアップで表示させるJavaScriptのプラグインで、特に有名なものでは［LightBox］が挙げられます。 ここで紹介する［Lity］は［LightBox］と同じように使えるjQueryプラグインで、レスポンシブにも対応... 【jQuery】画像、動画、ボックス要素をポップアップで表示させる［Lity］の使い方。続きを読む →
-
-
-
【jQuery】日付と時間を直感的に選択できる［DateTimePicker］が便利です。 ユーザーに日付や時間を指定してもらう際に、直感的な操作で簡単に日時を指定できる［DateTimePicker］を紹介します。 まずはサンプルをご覧ください。 ［DateTimePicker］：サンプル お試しいただいたように、大変優れたユー... 【jQuery】日付と時間を直感的に選択できる［DateTimePicker］が便利です。続きを読む →
-
-
【JavaScript】超高機能なグリッドレイアウトを実装する［Packery］はドラッグによる並べ替えにも対応！ グリッドレイアウト採用時に、ぜひ導入したいJavaScriptのライブラリ［Packery］を紹介します。 百聞は一見に如かず。まずは動作サンプルをご覧ください。 Packery：動作サンプル ご覧いただいたように、任意のボタンをクリックす... 【JavaScript】超高機能なグリッドレイアウトを実装する［Packery］はドラッグによる並べ替えにも対応！続きを読む →
-
【jQuery】レスポンシヴ対応のスライダー［flickity］は今後の定番になるでしょう。 高機能なスライドショーを実装するためのjQueryベースのプラグインと言えば、「FlexSlider」「CarouFredSel」「bxSlider」などが有名ですが、今後これらのプラグインに代わって定番になるであろう、秀逸なスクリプトが公... 【jQuery】レスポンシヴ対応のスライダー［flickity］は今後の定番になるでしょう。続きを読む →
-
【jQuery】ホワイトスペースを有効活用して遊び場に変える［Cube.js］が素敵です。 ウェブサイトのホワイトスペースを有効活用して、ちょっと楽しい雰囲気にしてしまう jQuery プラグイン「Cube.js」を紹介します。 製作者は日本国内のクリエイター「nejimaki act」様。プラグインのライセンスはフリーだそうで「... 【jQuery】ホワイトスペースを有効活用して遊び場に変える［Cube.js］が素敵です。続きを読む →
-
【jQuery】要素をタイル状に並べるプラグイン［Freetile.js］の使い方。 グリッドに沿って要素をタイル状に並べる jQueryプラグインとして、これまでにも［Masonry］や［Isotope］を紹介してきました。 今日紹介する［Freetile.js］も、前者２つと同じような機能を備えたプラグインです。 まずは... 【jQuery】要素をタイル状に並べるプラグイン［Freetile.js］の使い方。続きを読む →
-
【jQuery】スマートフォンやタブレット端末でのスクロールを無効にする方法。 各種スマートフォンやタブレット端末でのウェブ観覧時に、スワイプやフリック等のタッチコントロールによるウィンドウのスクロールを禁止する方法を紹介します。 パソコンの場合、CSSで「overflow:hidden;」を効かせれば、スクロールさせ... 【jQuery】スマートフォンやタブレット端末でのスクロールを無効にする方法。続きを読む →
-
【jQuery】縦長のサイトを読み込んだときの表示位置をページトップにする 特にスマートフォン対応サイトなどで、縦スクロールが発生する縦長のサイトを読み込むと、初期表示の位置がページトップではなくページの途中から表示されてしまうケースがあります。 これはブラウザの仕様で、ウェブページをリロードした際に以前読み込んだ... 【jQuery】縦長のサイトを読み込んだときの表示位置をページトップにする続きを読む →
-
【jQuery】フィルターやソート機能にも対応したMasonry風jQueryプラグイン［Isotope］の使い方。 グリッドに沿って各要素をタイル状にレイアウトするプラグインで、有名なものでは［jQuery Masonry］が挙げられます。 この分野のjQueryプラグインでは最も知名度が高く、初心者の方でも比較的簡単に導入できるので、使っている方も多い... 【jQuery】フィルターやソート機能にも対応したMasonry風jQueryプラグイン［Isotope］の使い方。続きを読む →
-
【jQuery】「$(document).ready()」と「$(window).load()」の違いを極める！［jQuery3.0以降対応］ jQuery を扱うとき、多くは下記のようなコードで実装していると思います。 $(function() { // ここに処理内容を書く }); ここで使われる「$(function(){〜});」は略式で、展開すると $(document)... 【jQuery】「$(document).ready()」と「$(window).load()」の違いを極める！［jQuery3.0以降対応］続きを読む →
-
【jQuery】間違えやすい「$(this)」と「this」の使い方とは？ jQuery でプログラムを書いている際に「$(this)」と「this」の使い方で一瞬戸惑うことがありませんか？ 基本的に「this」のほうは［DOMエレメント］で、イベントハンドラの「this」はそのイベントが発生した要素になり、「ea... 【jQuery】間違えやすい「$(this)」と「this」の使い方とは？続きを読む →
