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>
  <ul>
    <li>List item of content<li>
    <li>Another</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>
  </ul>
  <p>Here's another paragraph.</p>
</div>

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:

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

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

jquery-cookie-consent

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-Plugin-for-jQuery

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

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…

Floating-Whatsapp-Chat-Button

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

Infinite-Image-Carousel

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…

Vertical-3-Dot-Context-Menu

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…