Responsive Parallax Scroll Background Image with jQuery Plugin

Parallax Scroll jQuery Plugin that allows you to implement a familiar Parallax effect with your background image in vertical scrolling of the page.

Must Read: Simple CSS and jQuery for Parallax Scrolling | Paralex

How to make use of it:

1. Create a block-level container with an id and fill it with your content.

<div id="p-scroll-1">
  <h1>Content Title</h1>
  <p>Content paragraph one.</p>
    <li>List item of content<li>
    <li>And another</li>
    <li>So many list items</li>
    <li>So many list items</li>
    <li>So many list items</li>
    <li>So many list items</li>
    <li>So many list items</li>
  <p>Here's another paragraph.</p>

2. Include the parallaxScroll.js file in the <head> of your HTML file after the jQuery <script> tag.

<script src="jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="parallaxScroll.js" type="text/javascript"></script>

3. At the end of the <body> section, include the following:

  $(function () {
    new jQPS({
      containerId: "your-id-here",
      backgroundImgUrl: "path/to/your-background-image.jpg"

See Also –

Smooth Parallax Scrolling Background Image In Pure CSS Library
Parallax Scroll Directive for Angular | ng2-parallaxscroll
A Lightweight JavaScript Library For Easy Momentum & Parallax Scrolling | slickscroll.js

See Demo And Download

Official Website(scottyschup): Click Here

This superior jQuery/javascript plugin is developed by scottyschup. For extra advanced usage, please go to the official website.

Related Posts


Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…


Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…


Nepali Date Picker jQuery Plugin | nepaliDatePicker

Nepali Date Picker is a customizable, easy-to-use, and input-based date picker plugin mostly based on the Nepali calendar. Users can choose a Nepali date in the navigable…


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API….


A Simple Infinite Image Carousel Using Pure Javascript

simple infinite carousel, an extremely small, easy-to-use, and infinitely repetitive circular image slider created with regular JavaScript and CSS. Must Read: Flip Sliding Carousel Gallery Made Of…


Simple and Lightweight Vertical 3-Dot Context Menu

The 3-dot Context Menu allows for a simple and lightweight implementation to show 3 vertical dots allowing the user to click and show a menu. Below is…