JavaScript Library For Fast & Custom Touch Feedback On HTML Elements – touchFeedback.js

Category: Javascript , Others | September 13, 2016
Author: backToNature
Views Total: 410
Official Page: Go to website
Last Update: September 13, 2016
License: MIT

Preview:

JavaScript Library For Fast & Custom Touch Feedback On HTML Elements – touchFeedback.js

Description:

touchFeedback.js is a super tiny JavaScript library that applies fast touch feedback on any html elements without 300ms tap delay. The goal of the library is to help you create fast, custom touch feedback by add / removing CSS classes on a specific element.

 

How to use it:

Place the touchFeedback.js library at the end of the document.

<script src="touchFeedback.js"></script>

Add the ‘data-touchFeedback=”true”‘ attribute to any element you want to apply the custom touch feedback.

<div class="wrapper">
  <div class="touch" data-touchFeedback="true">touch me</div>
</div>

Initialize the touchFeedback.

new TouchFeedback('.wrapper');

Apply your custom effect to the element when tapped on.

.touch {
  height: 100px;
  background: #699f00;
  text-align: center;
  line-height: 100px;
  font-size: 30px;
  color: #fff;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.touch.feedback {
  background: #38f;
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}