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. lory

    JavaScript

    タッチ対応でカルーセルにもできるミニマルなJS(jQuery)スライダー「lory」

    loryはタッチに対応したミニマルなデザインが特徴的なスライダーを実装…

  2. Text Effects

    JavaScript

    テキストがカシャカシャ切り替わって表示するjQueryプラグイン「Text Effects」

    Text EffectsというjQueryプラグインを使えば、テキスト…

  3. Flickerplate
  4. Houdini

    JavaScript

    シンプルな折りたたみ・展開やアコーディオンを実装できる「Houdini」

    Houdiniはシンプルな折りたたみ・展開ができる機能やアコーディオン…

  5. JavaScript

    JavaScriptの配列操作をメモがてら整理してまとめてみる

    自分用のメモです。JavaScriptの配列操作に関するメソッドなんか…

  6. Zebra_Tooltips

    JavaScript

    シンプルでスマートなツールチップを実装できる「Zebra_Tooltips」

    Zebra_Tooltipsは軽量でシンプルなツールチップを実装できる…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP