Parallax effect on hover with Tilt.js

This jQuery plugin adds parallax effect on the element that responds according to mouse movement.

You have only need to include jQuery script and no external CSS.

Download and include
Initialize
Options
Detect change
Destroy
Conclusion

1. Download and include

The plugin is available on GitHub from where you can download it.
Add tilt.jquery.min.js script with the jQuery library at the bottom of <body>.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="tilt.js-master/dest/tilt.jquery.min.js" type="text/javascript"></script>

2. Initialize

Add data-tilt on the container where you want parallax effect or call tilt() method on a selector from the script.

Example

Here, I created a <div class='el-tilt' data-tilt> container and put image element in it.

<div style=' width: 180px; height: 180px;margin-left: 20px;'>
 <div class='el-tilt' data-tilt><img src='image.jpg' width='180px' height='180px'></div>
</div>

I called tilt() method on class='el-tilt'.

$(document).ready(function(){
 $('.el-tilt').tilt();
});

Output

Move the mouse over the image.

3. Options

You can either set option value using data-tilt attribute or from the script in tilt() method.

With Attribute

Syntax –

data-tilt-[option-name]

Example

<div data-tilt data-tilt-axis='x'></div>

With Script

Syntax –

$(selector).tilt({
 [option-name]: value
});

Example

$('.js-tilt').tilt({
 axis: 'x'
});

There are various options for customization.

Glare effect – Set glare: true to enable the glare effect and change its value with maxGlare option.

$('.el-tilt').tilt({
 glare: true,
 maxGlare: .5
});

Scale – Scale of tilt on hover.

$('.js-tilt').tilt({
 scale: 1.2
});

Disable X axis – Set axis option value to ‘y’.

$('.js-tilt').tilt({
 axis: 'y'
});

Disable Y axis – Set axis option value to ‘x’.

$('.js-tilt').tilt({
axis: 'x'
});

Keep floating – Set reset to false to stop the tilting element from reset when the mouse leave the element.

<div style='width: 180px; height: 180px;margin-left: 40px;'>
 <div class='el-tilt' data-tilt-reset='false' data-tilt>
   <img src='image.jpg' width='180px' height='180px'>
 </div>
</div>

Example

<div style='width: 180px; height: 180px;margin-left: 40px;'>
 <div class='el-tilt' data-tilt-reset='false' data-tilt><img src='image.jpg' width='180px' height='180px'></div>
</div>

<!-- Script -->
<script src="jquery-3.0.0.js" type="text/javascript"></script>
<script src="tilt.js-master/dest/tilt.jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$( document ).ready(function() {
 
 $('.el-tilt').tilt({
  glare: true,
  maxGlare: .5,
  scale: 1.2
 });

});
</script>

Output

Move the mouse over the image.

4. Detect Change

The change event gives X, Y, percentage, and angle of tilting.

For this attach change event on the selector.

Syntax –

$(selector).tilt().on('change', function(e, transforms){
 // code
});

Example

In the script, I call tilt() method on a selector and set change event handler.

<div style='width: 180px; height: 180px;margin-left: 100px;'>
 <div class='el-tilt' data-tilt><img src='image.jpg' width='180px' height='180px'></div>
</div>

<!-- Script -->
<script src="jquery-3.0.0.js" type="text/javascript"></script>
<script src="tilt.js-master/dest/tilt.jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$( document ).ready(function() {
 
 $('.el-tilt').tilt().on('change', function(e, transforms){
  var tiltX = transforms.tiltX;
  var tiltY = transforms.tiltY;
  var percentageX = transforms.percentageX;
  var percentageY = transforms.percentageY;
  var angle = transforms.angle;
  console.log('tiltX : ' + tiltX +', tiltY : ' + tiltY + ', percentageX : '+ percentageX + ', percentageY : '+percentageY);
 });
});
</script>

5. Destroy

Call tilt.destroy.call() on the selector and pass tilt element in call().

Example

<div style='width: 180px; height: 180px;margin-left: 40px;'>
 <div class='el-tilt' data-tilt><img src='image.jpg' width='180px' height='180px'></div>
</div>
<br/>
<input type='button' id='destroy' value='Destroy'>&nbsp; <input type='button' id='reset' value='Reset'>

<!-- Script -->
<script src="jquery-3.0.0.js" type="text/javascript"></script>
<script src="tilt.js-master/dest/tilt.jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$( document ).ready(function() {

 // Destroy tilt
 $('#destroy').click(function(){
  var element = $('.el-tilt');
  element.tilt.destroy.call(element);
 });

 // Reset tilt
 $('#reset').click(function(){
  $('.el-tilt').tilt();
 });

});
</script>

Output

Click the Destroy button to remove the tilting effect and Reset button for re-initialize.

6. Conclusion

With the use of this plugin, you can increase the engagement of the users with content.

You can either set options value using JavaScript or with a data-tilt attribute.

If you found this tutorial helpful then don't forget to share.

Parallax effect on hover with Tilt.js

Contents

1. Download and include

2. Initialize

3. Options

With Attribute

With Script

4. Detect Change

5. Destroy

6. Conclusion

Leave a Comment Cancel reply