qpScroll

JavaScript

背景に複数の画像を設定してパララックスのスクロールを実装できるjQueryプラグイン「qpScroll」

qpScrollというjQueryプラグインを使えば、背景に設定した複数の画像を使ってパララックスのスクロールを実装することができます。実際のデモではスクロールする度に色んな画像が出てきておもしろいです。オプションでスピードなんかも設定することができます。

[ads_center]

qpScrollの使い方

qpScroll

qpScroll

imagesFolderに画像が入っているフォルダのパスを、imagesArrayには画像を指定していきます。

$(document).ready(function(){
    $('body').qpScroll({
        imagesFolder: 'images/parallax’,
        imagesArray: [ '1.jpg','2.jpg', '3.jpg', '4.jpg', '5.jpg' ],
        firstSpeed: 5,
        neighbourRatio: 1.1,
        offset: 0,
    });
}); 

パララックスを使ったサイトを作る際に活用したいですね。

関連記事

  1. no-image

    JavaScript

    背景にSVGによるライン(線)をランダムで生成する「ckLine.js」

    ckLine.jsは背景にSVGによるライン(線)をランダムで生成する…

  2. Timeliny

    JavaScript

    レスポンシブ対応の年ベースによるjQueryタイムライン「Timeliny」

    Timelinyはレスポンシブに対応した年ベースによるタイムラインを実…

  3. JavaScript

    レスポンシブにも対応している人気のjQueryプラグインのスライダー「Nivo Slider」の使い…

    レスポンシブにも対応している人気のjQueryプラグイン「Nivo S…

  4. Radial SVG Slider

    JavaScript

    放射状に切り替わるスライダーを実装できる「Radial SVG Slider」

    Radial SVG Sliderは、放射状に広がりながら切り替わるス…

  5. jQuery ui material design datepicker
  6. BigText

    JavaScript

    テキストを指定した幅にフィットさせるjQueryプラグイン「BigText」

    BigTextは、テキストの行を、指定した幅にフィットさせるために必要…

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP