Basic Background Parallax Effect With jQuery And CSS3 - parallax.js

Just another jQuery plugin which makes use of JavaScript and CSS3 transitions to apply a smooth parallax scrolling effect to background images.

How to use it:

1. Add the background images to your containers using data-img attribute as this:

<div class="parallax" data-img="1.jpg">
  <h1>Hello Parallax</h1>
</div>

<div class="parallax" data-img="2.jpg">
  <h1>New parallax</h1>
</div>

2. Add the background images to your containers using data-img attribute as this:

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="js/parallax.js"></script>

3. Create the parallax scrolling effect using CSS3 transitions.

.parallax {
  background: none;
  min-height: 600px;
  background-size: cover;
  background-attachment: fixed;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

Change log:

2017-01-13

• Bugfix

---

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