Simple Image Parallax Scrolling Effect With jQuery

Simple Parallax Scroll Effect is a basic jQuery & CSS solution to add the familiar parallax scrolling effect to position: absolute images using the scroll function event.

parallax scrolling codepen, parallax scrolling example, pure css parallax background image, parallax effect css examples

A Lightweight JavaScript Library For Easy Momentum & Parallax Scrolling | slickscroll.js

How to make use of it:

1. Add parallax images to “.parallax-image” containers.

<div class="parallax-image">
  <img src="//" alt="kitty" />
<div class="parallax-image">
  <img src="//" alt="kitty" />
<div class="parallax-image">
  <img src="//" alt="kitty" />
<div class="parallax-image">
  <img src="//" alt="kitty" />
<div class="parallax-image">
  <img src="//" alt="kitty" />

2. Required CSS style rules for container and parallax images.

.parallax-image {
  height: 600px;
  position: relative;
.parallax-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;

3. Import the latest version of the jQuery library to the web page.

<script src="//"></script>

4. Active the parallax photo effect when scrolling.


  // Add parallax scrolling to all images in .paralax-image container
    // only put top value if the window scroll has gone beyond the top of the image
    if ($(this).offset().top < $(window).scrollTop()) {
      // Get ammount of pixels the image is above the top of the window
      var difference = $(window).scrollTop() - $(this).offset().top;
      // Top value of image is set to half the amount scrolled
      // (this gives the illusion of the image scrolling slower than the rest of the page)
      var half = (difference / 2) + 'px';

      $(this).find('img').css('top', half);
    } else {
      // if image is below the top of the window set top to 0
      $(this).find('img').css('top', '0');


Basic Image Parallax Scrolling Effect Plugin/Github

See Demo And Download

Official Website(kristyjy): Click Here

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

Related Posts


Responsive Image Gallery Lightbox jQuery Plugin | VenoBox

VenoBox is a responsive jQuery modal window plugin suitable for images, embedded content, iFrames, Google Maps, Vimeo, and YouTube videos. The big difference compared to many other…


[Animation] Bootstrap Multi-Level Responsive Dropdown Menu

Bootstrap-based multi-level dropdown navigation menu with cool animations. The dropdown on Hover is a jQuery plugin used to create Bootstrap multi-level scroll-triggered dropdown menus with CSS3 animations…


Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…


HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….


CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…


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. It will automatically start the WhatsApp…

Leave a Reply

Your email address will not be published. Required fields are marked *