Responsive Any Content Parallax Plugin With jQuery - Parallux

Parallux is a jQuery plugin which makes use of CSS3 3D transforms (translate3d) to create smooth hardware accelerated parallax scrolling effect on any content (videos, images, background, sliders, text) with fallbacks to old browsers and specific mobile devices.

How to use it:

1. First you need to include jQuery library and then link the jQuery Parallux plugin's CSS JavaScript files.

<link rel="stylesheet" href="dist/jquery.parallux.min.css">
<script src="//code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="src/jquery.parallux.js"></script>

2. Add parallax background and foreground layers to your webpage as follows:

<div class="parallux">

  <!-- Background layer -->
  <div class="parallux-bg fixed">
    <!-- Div for using translate3d -->
    <div class="parallux-inner dark bg-header" >
      <!-- Here you can insert any HTML you want -->
      <div class="text">
        <h2>Lorem ipsum dolor</h2>
      </div>
    </div>
  </div>

  <!-- Parallax foreground with the same size and transparent -->

</div>

3. Initialize the plugin and done.

$(".parallux").parallux();

4. Plugin's default settings.

$(".parallux").parallux({

  // full height mode
  fullHeight: true,

  // can be 'scroll' or 'parallax'
  onMobile: 'fixed', 

  // animation type on image load
  onImageLoad: 'fadeIn'
  
});

Change log:

2016-05-26

• JS update
• add gulp support

---

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