Add A Skew Effect To Elements On Scroll - jQuery mdSkew.js

mdSkew.js is a really simple jQuery plugin that applies a configurable, CSS3 based skew effect to any DOM elements when scrolling down/up the webpage.

Powered by CSS3 transitions and transforms.

How to use it:

1. Put both jQuery library (slim build) and the mdSkew.js script at the end of the webpage.

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

2. Call the function on the target elements and the plugin will do the rest.

<h1 data-md-skew>jQuery</h1>
  ...
<h1 data-md-skew>Script</h1>
  ...
<h1 data-md-skew>.Net</h1>
  ...

$(function(){

  $('[data-md-skew]').mdSkew();

});

3. Specify the min/max degrees for the skew effect. To config the skew effect by overriding the following options and then pass them to the mdSkew() function.

$('[data-md-skew]').mdSkew({
  min: 0,
  max: 5
});

4. Specify the animation speed.

$('[data-md-skew]').mdSkew({
  speed: 1 // 0 - 1
});

5. Decide whether to reset the position of the DOM elements when you stop scrolling.

$('[data-md-skew]').mdSkew({
  reset: true
});

6. Decide whether to set default CSS properties for the DOM elements.

$('[data-md-skew]').mdSkew({
  setCSS: true
});

7. Customize the skew animation.

$('[data-md-skew]').mdSkew({
  transition: 'transform .6s cubic-bezier(.215,.61,.355,1)',
  transformOrigin: '50% 50%'
});

---

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