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

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「equalize.js」

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「e…

  2. Jquery Tab Plugin

    JavaScript

    シンプルで見やすいタブパネルを実装できる「Jquery Tab Plugin」

    Jquery Tab Pluginはシンプルで見やすく、そして操作しや…

  3. jQuery Panelize Plugin
  4. iziToast

    JavaScript

    エレガントでレスポンシブに対応したトーストを実装できる「iziToast」

    iziToastは、エレガントでレスポンシブに対応した軽量のトーストを…

  5. Hover Carousel

    JavaScript

    超軽量なホバーカルーセルを実装できる「Hover Carousel」

    Hover Carouselは超軽量なホバーで動作するカルーセルを実装…

  6. Vide

    JavaScript

    背景にvideoを表示できるjQueryプラグイン「Vide」

    VideというjQueryプラグインを使えば、Webサイトの背景にvi…

最近の記事

  1. スタバ ドリップコーヒー
  2. エチオピア
  3. 紗々 飴色和栗
  4. DCG-CA21
  5. Apple WatchでのMacロック解除を無効

アーカイブ

PAGE TOP