Smooth Interactive Hover Effect - Twitch.js

Smooth Interactive Hover Effect - Twitch.js

Twitch.js is a fancy responsive jQuery plugin which applies a smooth, interactive hover effect to any element based on the mouse position on mouseover and mouseout.

The smooth hover effect is based on CSS3 transitions.

1. Import the jquery.twitch.js into the document, after the latest jQuery library.

<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.twitch.js"></script>

2. Call the function on the target element.

<img class="demo" src="1.jpg" alt="">
$('.demo').twitch();

3. The element must have a position property.

.demo{
  position: relative;
}

4. The plugin also works with overlapping elements. You can specify the number of layers in the JavaScript. (Default: 0. Up to 4).

$('.demo').twitch({
  layers: 2
});

5. Set the distance the element should move on mouse hover.

$('.demo').twitch({
  distance: 20 // 1-1000
});

6. Set the transition speed.

$('.demo').twitch({
  transition: 0.2
});

7. Specify the position type of the element.

$('.demo').twitch({
  // fixed, abosolute, relative 
  positionType: "absolute"
  
});

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

  • Publication date: 18.11.2018
  • Source