Basic Background Parallax Effect with jQuery - laxicon

File Size: 4.66 KB
Views Total: 2823
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Basic Background Parallax Effect with jQuery - laxicon

laxicon is a dead simple jQuery plugin which allows you to add a parallax scrolling effect to your background images with one JS call.

How to use it:

1. Create a container where you want to apply the background parallax effect to.

<section class="parallax">
  <h1 class="awesome-title">jQuery laxicon Plugin</h1>

2. Include the jQuery laxicon plugin after jQuery library, but before the closing body tag.

<script src="//"></script>
<script src="laxicon.js"></script>

3. Call the plugin and add the parallax background image to the container.

  bgImgPath: 'bg.jpg'

4. Full plugin options with default values.


  // scrolling speed
  speed: 0.15,

  // path to the background image
  bgImgPath: "",

  // background properties
  bgXPos: "center",
  bgSize: "cover",
  bgRepeat: "no-repeat",

  // overlay options
  overlay: false,
  gradOverlay: 'none' // 'tint' or 'shade'
  overlayPatternPath: '',

  breakpoint: 769

Change log:


  • add pattern overlay and breakpoint options
  • fix pattern repeat on mobile


  • fixed for mobile devices.

This awesome jQuery plugin is developed by JSDesign. For more Advanced Usages, please check the demo page or visit the official website.