タグ "jQuery" を含む投稿を表示中:98件
-
映画『マトリックス』の背景エフェクトを canvas で実装してみた。 映画『マトリックス』のオープニングで使われている、コンピューターの画面上を緑の文字が流れる映像。通称「マトリックス・コード」を、ウェブページの背景エフェクトとして canvas で実装したサンプルを紹介します。 もとはネットサーフィン中に見… 映画『マトリックス』の背景エフェクトを canvas で実装してみた。続きを読む →
-
【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]の使い方続きを読む →
-
【CSS3】アニメーション曲線を定義する transition-timing-function の「cubic-bezier()」の値をまとめてみた。 ご存知のとおり、CSS3の「transition-timing-function」では時間毎のアニメーションの変化を指定することができます。 標準では次の値が用意されています。 ease … 初期値 linear … 一定 ease-in … 【CSS3】アニメーション曲線を定義する transition-timing-function の「cubic-bezier()」の値をまとめてみた。続きを読む →
-
【jQuery】自動でQRコードを生成する[jquery.qrcode.js]が便利だった! 本日ご紹介するのは自動でQRコードを出力するjQueryライブラリ[jquery.qrcode.js]です。 同じようにQRコードを出力する方法として、だいぶ以前に「Google Chart API を使用するテクニック」を紹介しましたが、… 【jQuery】自動でQRコードを生成する[jquery.qrcode.js]が便利だった!続きを読む →
-
【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】背景色をスムーズにグラデーション変化させる[Spectrum]の使い方 指定した複数の背景色をスムーズにグラデーション変化させるjQueryスクリプト[Spectrum]を紹介します。 SPECTRUM : http://www.andreacrofts.codes/spectrum/ 背景色がどのように切り替… 【jQuery】背景色をスムーズにグラデーション変化させる[Spectrum]の使い方続きを読む →
-
【jQuery】プログラムの実行のタイミングを遅らせる[setTimeout]の使い方 なんらかのJavaScriptの関数をタイミングを遅らせて実行したいとき。 そんなときに使えるjQueryメソッド[setTimeout]を紹介します。 [setTimeout]メソッドで処理を遅延実行 基本的な使い方は以下のとおり。 $(… 【jQuery】プログラムの実行のタイミングを遅らせる[setTimeout]の使い方続きを読む →
-
レスポンシブ対応のjQueryスライダー系ライブラリ × 11選 レスポンシブ・デザインに対応したスライダーやスライドショー系のライブラリをまとめました。ほとんどがjQueryプラグインになりますが、中には単体で動くものもあります。オプション設定で多数のエフェクトの中から好みの動作のものを選択できたり、自… レスポンシブ対応のjQueryスライダー系ライブラリ × 11選続きを読む →