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>
</section>

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

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="laxicon.js"></script>

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

$('.parallax').laxicon({
  bgImgPath: 'bg.jpg'
});

4. Full plugin options with default values.

$('.parallax').laxicon({

  // scrolling speed
  speed: 0.15,

  // path to the background image
  bgImgPath: "https://download.unsplash.com/photo-1434145175661-472d90344c15",

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

  // overlay options
  overlay: false,
  gradOverlay: 'none' // 'tint' or 'shade'
  overlayPatternPath: 'http://16secondstare.com/admin/wp-content/themes/rockit1/images/pattern/pattern5-bg.png',

  breakpoint: 769
  
});

Change log:

2015-08-27

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

2015-08-08

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