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,
    });
}); 

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

WordPressで投稿IDを指定した記事をランダム表示WordPressで複数の投稿ID(記事ID)を指定した記事をランダムで表示させるやり方前のページ

LINEで送るボタンの設置方法について次のページLINEで送るボタンの設置方法

関連記事

  1. Diagonal Slider

    JavaScript

    斜めにデザインされたスタイリッシュなjQueryイメージスライダー「Diagonal Slider」…

    Diagonal Sliderは斜めにデザインされたクールでスタイリッ…

  2. CollagePlus

    JavaScript

    画像を綺麗に整列させるjQueryプラグイン「CollagePlus」

    画像を綺麗に整列させる便利なjQueryプラグイン「CollagePl…

  3. JavaScript

    レスポンシブ対応で画像やテキストも自由にスライドできるjQueryスライダー「Responsly.j…

    スマホにも対応したレスポンシブのjQueryスライダー「Respons…

  4. gliojs

    JavaScript

    viewportから離れた時にイベントをトリガーしてくれる「gliojs」

    gliojsは、ページを閲覧している時にマウスがviewport(表示…

  5. PhotoSwipe

    JavaScript

    タッチジェスチャーにも対応したイメージギャラリー・PhotoSwipe

    PhotoSwipeはスマホやタブレットのタッチジェスチャーにも対応し…

  6. Tosrus

    JavaScript

    スマホやタブレットにも対応するLightbox風のjQueryプラグイン「Tosrus」

    TosrusというjQueryプラグインを使えば、スワイプやスクロール…

最近の記事

  1. ダミアン・ハースト 桜
  2. パッキングエリア
  3. あらびきソーセージパイ
  4. REACH フロス
PAGE TOP