株式会社オンズのブログ記事一覧
タグ "jQuery" を含む投稿を表示中：98件
-
-
【jQuery】ページのスクロール量をプログレスバーで視覚的に表示する［Scrolline.js］の使い方 ウェブサイトの上部にプログレスバーを設置して、スクロール量を視覚的に表示してくれるプラグイン［Scrolline.js］を紹介します。 まずはサンプルをどうぞ。 Scrolline.js : https://on-ze.com/demo/j... 【jQuery】ページのスクロール量をプログレスバーで視覚的に表示する［Scrolline.js］の使い方続きを読む →
-
【jQuery】背景色を複数のグラデーションで彩るプラグイン「Shards」の実装方法。 複数のパターンのグラデーションがレイヤー状に重なる背景を描画できる jQuery スクリプト「Shards」の使い方です。 まずはGitHubで公開されているプラグイン本体をダウンロードしてきましょう。 https://github.com... 【jQuery】背景色を複数のグラデーションで彩るプラグイン「Shards」の実装方法。続きを読む →
-
【jQuery】スクロール量に連動したアニメーションを追加する［ScrollMe］の使い方 ウェブサイトに「スクロール・エフェクト」を導入したい。 そんな要望を叶えるためのオススメのjQueryプラグイン［ScrollMe］を紹介します。 このプラグインをオススメする最大の理由は、わずか1行のJavaScriptのコードも必要なく... 【jQuery】スクロール量に連動したアニメーションを追加する［ScrollMe］の使い方続きを読む →
-
【jQuery】メニューが横からスライドして表示される［Drawer］の使い方。 ボタンをクリックすると横からスライドして現れるドロワーメニュー。特に最近のレスポンシブ対応ウェブサイトで多用されてきているので、もうお馴染みですね。 今日は、そんなドロワーメニューを実装する jQuery プラグイン［Drawer］の使い方... 【jQuery】メニューが横からスライドして表示される［Drawer］の使い方。続きを読む →
-
-
【jQuery】プログラムの実行のタイミングを遅らせる［setTimeout］の使い方 なんらかのJavaScriptの関数をタイミングを遅らせて実行したいとき。 そんなときに使えるjQueryメソッド［setTimeout］を紹介します。 ［setTimeout］メソッドで処理を遅延実行 基本的な使い方は以下のとおり。 $(... 【jQuery】プログラムの実行のタイミングを遅らせる［setTimeout］の使い方続きを読む →
-
-
【jQuery】レスポンシブ画像でクリッカブルマップに対応する［jQuery RWD Image Maps］の使い方 レスポンシブ対応のウェブサイトでは、各デバイス毎のウィンドウの大きさに合わせて画像の横幅が変わるため、クリッカブルマップの座標がズレるという不具合が発生してしまします。 このとき、各クリッカブルマップの座標を再計算してレスポンシブに対応させ... 【jQuery】レスポンシブ画像でクリッカブルマップに対応する［jQuery RWD Image Maps］の使い方続きを読む →
-
【jQuery + PHP】クロスドメイン対応版：Google Feed API の代替案を紹介します。 昨日 Google Feed API が停止した事件があり、ウェブ制作者の方々はその対応に追われ、各地で阿鼻叫喚と大混乱が起きていました。 一夜明けて、現時点で Google Feed API が復旧しているようですね。 しかしまたいつ廃止... 【jQuery + PHP】クロスドメイン対応版：Google Feed API の代替案を紹介します。続きを読む →
-
【jQuery】緊急案件：Google Feed API が廃止になっているので代替案を紹介します。 昨日、2015年12月2日未明より Google Feed API が403エラーを返すようになり、特にニュースサイトを中心とした各方面で混乱が発生しています。けっこう大変な事態のようですね。 未だ公式サイトでもアナウンスが無く、廃止になっ... 【jQuery】緊急案件：Google Feed API が廃止になっているので代替案を紹介します。続きを読む →
-
-
【jQuery】ページのスクロール量に連動してプログレスバーを実装する［Scrollgress］の使い方 ウェブページをスクロールさせると、その動きにシンクロしてプログレスバーが表示される［Scrollgress］の使い方を紹介します。 実際に導入してみましたので、まずはサンプルをご覧ください。 ［Scrollgress］：実装サンプル ウィン... 【jQuery】ページのスクロール量に連動してプログレスバーを実装する［Scrollgress］の使い方続きを読む →
-
-
【jQuery】壮大な宇宙をウェブページの背景に描く［Starfield］の使い方。 以前CSSベースのオリジナル・デザインで［DarkForce.css］というテクニックを紹介しました。 宇宙空間をワープするようなダイナミックな動きで、完全にスタイルシートのみで実装できる点がウケて多くの方にダウンロードいただけました。 今... 【jQuery】壮大な宇宙をウェブページの背景に描く［Starfield］の使い方。続きを読む →
-
-
【jQuery】超簡単にカウントダウン・タイマーを設置できる［Simple.Timer］の使い方 必要なファイルを読み込んでおいて、簡単なjQueryとHTMLを記述するだけで、ウェブページにカウントダウン・タイマーを設置できるスクリプトを紹介します。 実装したサンプルは以下URLからご覧になれます。 実装サンプル：https://on... 【jQuery】超簡単にカウントダウン・タイマーを設置できる［Simple.Timer］の使い方続きを読む →
-
-
【jQuery】レティナ・ディスプレイ（Retina Display）に対応するための解決策［Retina-Srcset.js］を開発しました。 Retina Display - レティナ・ディスプレイ もう聞き馴れた名称かと思います。 もともとは Apple が開発した高精細ディスプレイで、初めて採用されたのは iPhone 4 のときでした。 レティナ（Retina）とは英語で「... 【jQuery】レティナ・ディスプレイ（Retina Display）に対応するための解決策［Retina-Srcset.js］を開発しました。続きを読む →
-
【jQuery】縦スクロールができる［Multirole Slider］の使い方 数あるスライダー系のjQueryプラグインの中で、縦方向のスクロールに対応しているものは珍しく、探そうとしてもなかなか見つかりません。 今日はその悩みを解決する［jQuery Multirole Slider］の使い方を紹介します。 まずは... 【jQuery】縦スクロールができる［Multirole Slider］の使い方続きを読む →
-
-
【jQuery】画像がスムーズに拡大縮小する動きが気持ちイイ［zoom.js］の使い方 画像をクリックすると、スムーズな動きで拡大表示され、ウィンドウをスクロールすると再び気持ちのイイ動きで縮小される、ライトボックス風のjQueryプラグインを紹介します。 ［zoom.js］と名付けられたこのjQueryプラグインですが、シン... 【jQuery】画像がスムーズに拡大縮小する動きが気持ちイイ［zoom.js］の使い方続きを読む →
-
【jQuery】水面に滴る雨を再現した［Raindrops.js］でウェブページに癒しと冷涼感を。 夏ですね！ 例年以上の猛暑が続いている今日この頃。皆様いかがお過ごしでしょうか。 さて。今日は、こんな暑い夏に相応しい「冷涼感」を演出してくれるjQueryプラグインを紹介します。 ［Raindrops.js］と名付けられたこのプラグインは... 【jQuery】水面に滴る雨を再現した［Raindrops.js］でウェブページに癒しと冷涼感を。続きを読む →
-
【jQuery】ウィンドウの解像度を取得してRetinaディスプレイを判別する。 Retinaディスプレイに対応させる最適な方法を模索しているのですが、その過程で、jQueryを使ってRetinaディスプレイか否かを判別させようと閃きました。 調べてみると、ディスプレイの解像度を取得してくれる便利なメソッドが既に存在して... 【jQuery】ウィンドウの解像度を取得してRetinaディスプレイを判別する。続きを読む →
