jQuery Plugin For Adding Parallax Effects To Elements - Helium Parallax

Helium Parallax is a small jQuery plugin that adds parallax animations to any Html elements as you scroll down / up the webpage.

Features:

• Animate any numerical CSS property with scrollbar movement
• Scroll movement relationships (linear, reverse, swing, reverse swing)
• Customize lead in and lead out distance for your scroll effect

Basic usage:

1. Include jQuery JavaScript library and the jQuery Helium Parallax plugin on the html page.

<script src="jquery.min.js"></script>
<script src="js/helium.parallax.js"></script>

2. The Html. All that is required in your html is an element that can be referenced by a jquery selector. In this example we are using ID. Remember to wrap your parallax element in div with position and height if to intend to use parallax for positioning. This will hold its place in the document flow. helium-parallax simply animates the specified css properties. you are responsible for layout and positioning requirements etc.

<div id="your-parallax-id" class="helium-parallax">
  <img src="1.jpg" alt="" class="parallax">
</div>

3. The required CSS styles to position parallax.

.helium-parallax{
  position: relative;
}

.helium-parallax .parallax{
  position: absolute;
}

4. Initialize the plugin with optional settings.

$('#your-parallax-id').heliumParallax({   

  // distance from the origin that parallax scroll effect will start     
  paraStart: 200,      

  // distance from the origin that parallax scroll effect will end
  paraEnd: 200,        

  // css property (or properties) to animate
  property: ['top'],   

  // minimum value for css property
  minVal: ['-150px'],  

  // maximum value for css property
  maxVal: ['150px'],   

  // template for complex css values. 
  // The *value* should be placed where the number should be placed.  
  // ie "rotate(*value*deg)"
  valTemplate: [false],

  // relationship to scroll movement : linear, reverse, swing, reverseSwing
  relate: ['linear']   
  
});

---

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