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

Preview:

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);
}