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. Cloud 9 Carousel

    JavaScript

    サクサク動作する3Dカルーセルを実装できる「Cloud 9 Carousel」

    Cloud 9 Carouselはサクサク動作する3Dカルーセルを実装…

  2. HCaptions

    JavaScript

    ホバー時に色々なエフェクトでキャプションをオーバーレイ表示できるjQueryプラグイン「HCapti…

    指定した要素をホバーすると色々なエフェクトでキャプションをオーバーレイ…

  3. jQuery Floating Social Share
  4. Gradientify

    JavaScript

    シンプルなCSSグラデーション変化を実装できる「Gradientify」

    GradientifyはシンプルなCSSグラデーション変化を実装するこ…

  5. Lettering.js

    JavaScript

    一文字ずつスタイルなどを調整できるようにしてくれる「Lettering.js」

    Lettering.jsは一文字ずつCSSなどでスタイルを調整できるよ…

最近の記事

  1. 久保田城
  2. ハードサイド CS80
  3. ACC-TRBX
  4. ピスタチオ クリスマス ツリー フラペチーノ

Instagram始めました

Facebookページ

PAGE TOP