Mobile-friendly Parallax Tilt Effect In jQuery - parallaxTilt

parallaxTilt is a tiny jQuery plugin to implement an interactive, mobile-friendly Parallax Tilt effect on overlapping elements that react to mouse hover and device orientation (mobile device which has a gyroscope) events.

See also:

• Parallax Hover Tilt Effect With jQuery And CSS3 - universal-tilt.js
• Interactive Parallax Tilt Effect Using jQuery - Tilt.js

How to use it:

1. Add tilt elements to the webpage.

<figure class="tilter_figure">
  <img class="tilter_image" src="demo.jpg" alt="dive" />
  <div class="tilter_deco"></div>
  <figcaption class="tilter_caption">
    <h3 class="tilter_title">Health</h3>
    <p class="tilter_tag"><span>UI</span></p>
  </figcaption>
</figure>

2. The example CSS for the tilt elements.

.tilter_figure {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.tilter_image, .tilter_deco, .tilter_caption {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: .5s ease-out;
  transform: translate3d(0, 0, 0);
}

.tilter_deco { background-color: rgba(40,150,200,0.3); }

.tilter_figure .tilter_title {
  display: inline-block;
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-size: 6em;
  position: absolute;
  left: -105px;
  bottom: 60px;
}

.tilter_figure .tilter_tag {
  display: inline-block;
  padding: 12px 12px 12px 0;
  margin: 0;
  position: absolute;
  left: -100px;
  bottom: 12px;
  text-align: left;
  border-top: 2px solid #FB0033;
}

.tilter_figure .tilter_tag span {
  font-size: 1em;
  font-weight: bold;
}

3. Place jQuery JavaScript library and the minified version of the jQuery parallaxTilt plugin at the bottom of the page.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="js/parallaxTilt.min.js"></script>

4. Apply the interactive parallax hover effect to the tilt elements.

$('.tilter_image').parallaxTilt({
  parallaxMultiple: .18
});

$('.tilter_deco').parallaxTilt({
  parallaxMultiple: .05
});

$('.tilter_caption').parallaxTilt({
  parallaxMultiple:  -(0.08)
});

5. All default configuration options.

$('.tiltElement').parallaxTilt({
  parallaxMultiple: 0.1,
  tiltMultiple: 0.05,
  duration: 500,
  easing:'easeOutExpo'
});

---

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