Tocca.js
How do I make an tocca.js?
Super lightweight script (1kb) to detect via Javascript events like 'tap' 'dbltap' 'swipeup' 'swipedown' 'swipeleft' 'swiperight' on any kind of device.. What is a tocca.js? How do you make a tocca.js? This script and codes were developed by Gianluca Guarini on 04 November 2022, Friday.
Tocca.js - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tocca.js</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Sansita+One);
body, html { font-family: 'Sansita One', cursive; color: #aaa; background: radial-gradient(#002d59, #1b2836); background-size: cover; background-repeat: no-repeat; height: 100%; overflow: hidden;
}
a { color: yellow; text-decoration: none;
}
::selection { background: transparent;
}
dl dd { color: green;
}
b { color: yellow; margin-left: 3px;
}
#wrapper { position: absolute; left: 50%; top: 50%; margin-top: -200px; margin-left: -200px; width: 400px; height: 400px; color: white; cursor: pointer;
}
#test { pointer-events: none; position: absolute; text-align: center; font-size: 30px; line-height: 400px; width: 400px; height: 400px; background: rgba(0, 0, 0, 0.5); border-radius: 30px;
}
.swipedown { animation: movedown 0.3s ease-in-out infinite alternate;
}
.swipeup { animation: moveup 0.3s ease-in-out infinite alternate;
}
.swipeleft { animation: moveleft 0.3s ease-in-out infinite alternate;
}
.swiperight { animation: moveright 0.3s ease-in-out infinite alternate;
}
.tap { animation: pulse 0.3s ease-in-out infinite alternate;
}
.dbltap { animation: pulse 0.15s ease-in-out infinite alternate;
}
@keyframes movedown { 0% { transform: translateY(0px); } 100% { transform: translateY(20px); }
}
@keyframes moveup { 0% { transform: translateY(0px); } 100% { transform: translateY(-20px); }
}
@keyframes moveleft { 0% { transform: translateX(0px); } 100% { transform: translateX(-20px); }
}
@keyframes moveright { 0% { transform: translateX(0px); } 100% { transform: translateX(20px); }
}
@keyframes pulse { 0% { transform: scale(1); } 100% { transform: scale(0.8); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1><a href="https://github.com/GianlucaGuarini/Tocca.js" target="_blank">Tocca.js</a></h1>
<p>Try the following events: <b>tap</b>, <b>dbltap</b>, <b>swipeup</b>, <b>swipedown</b>, <b>swipeleft</b>, <b>swiperight</b></p>
<dl id="data"> <dt><strong>Event Name</strong></dt> <dd id="eventName"></dd> <dt>Event x</dt> <dd id="currX"></dd> <dt>Event y</dt> <dd id="currY"></dd> <dt>Swipe Event distance x</dt> <dd id="distanceX"></dd> <dt>Swipe Event distance y</dt> <dd id="distanceY"></dd>
</dl>
<div id="wrapper"><div id="test">Touch me please!</div></div>
<small>@gianlucaguarini https://github.com/GianlucaGuarini/Tocca.js</small> <script src='https://gianlucaguarini.github.io/Tocca.js/Tocca.js'></script> <script src="js/index.js"></script>
</body>
</html>
Tocca.js - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Sansita+One);
body, html { font-family: 'Sansita One', cursive; color: #aaa; background: radial-gradient(#002d59, #1b2836); background-size: cover; background-repeat: no-repeat; height: 100%; overflow: hidden;
}
a { color: yellow; text-decoration: none;
}
::selection { background: transparent;
}
dl dd { color: green;
}
b { color: yellow; margin-left: 3px;
}
#wrapper { position: absolute; left: 50%; top: 50%; margin-top: -200px; margin-left: -200px; width: 400px; height: 400px; color: white; cursor: pointer;
}
#test { pointer-events: none; position: absolute; text-align: center; font-size: 30px; line-height: 400px; width: 400px; height: 400px; background: rgba(0, 0, 0, 0.5); border-radius: 30px;
}
.swipedown { animation: movedown 0.3s ease-in-out infinite alternate;
}
.swipeup { animation: moveup 0.3s ease-in-out infinite alternate;
}
.swipeleft { animation: moveleft 0.3s ease-in-out infinite alternate;
}
.swiperight { animation: moveright 0.3s ease-in-out infinite alternate;
}
.tap { animation: pulse 0.3s ease-in-out infinite alternate;
}
.dbltap { animation: pulse 0.15s ease-in-out infinite alternate;
}
@keyframes movedown { 0% { transform: translateY(0px); } 100% { transform: translateY(20px); }
}
@keyframes moveup { 0% { transform: translateY(0px); } 100% { transform: translateY(-20px); }
}
@keyframes moveleft { 0% { transform: translateX(0px); } 100% { transform: translateX(-20px); }
}
@keyframes moveright { 0% { transform: translateX(0px); } 100% { transform: translateX(20px); }
}
@keyframes pulse { 0% { transform: scale(1); } 100% { transform: scale(0.8); }
}
Tocca.js - Script Codes JS Codes
var $ = document.querySelector.bind(document), eventName = $('#eventName'), currX = $('#currX'), currY = $('#currY'), distanceX = $('#distanceX'), distanceY = $('#distanceY'), test = $('#test'), wrapper = $('#wrapper'), nookie = [ 'Oh yes!', 'One more time!', 'Give me more!', 'Rock and roll baby!', 'Yeah right there!', 'Turn me on..', '♥ ♥ ♥', 'OMG you are so good!' // shall I keep going?! ];
wrapper.addEventListener('tap',updateHtml)
wrapper.addEventListener('dbltap',updateHtml)
wrapper.addEventListener('swipeup',updateHtml)
wrapper.addEventListener('swipedown',updateHtml)
wrapper.addEventListener('swipeleft',updateHtml)
wrapper.addEventListener('swiperight',updateHtml)
wrapper.addEventListener('touchmove',function(e){e.preventDefault()})
wrapper.addEventListener('touchstart',function(e){e.preventDefault()})
wrapper.addEventListener('touchend',function(e){e.preventDefault()})
wrapper.addEventListener('mousedown',function(e){e.preventDefault()})
wrapper.addEventListener('mouseleave',function(e){e.preventDefault()})
wrapper.addEventListener('mousemove',function(e){e.preventDefault()})
function updateHtml (e){ currX.innerHTML = e.x; currY.innerHTML = e.y; test.innerHTML = nookie[~~(Math.random() * nookie.length)] distanceX.innerHTML = e.distance ? e.distance.x : 'undefined'; distanceY.innerHTML = e.distance ? e.distance.y : 'undefined'; if (/swipedown|swipeup/.test(e.type)) test.classList.add(e.type); else wrapper.classList.add(e.type); setTimeout(function(){ test.className = ''; wrapper.className = ''; },600);
}
Developer | Gianluca Guarini |
Username | GianlucaGuarini |
Uploaded | November 04, 2022 |
Rating | 3 |
Size | 4,270 Kb |
Views | 26,312 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
CSS3 Breathing Particles | 2,756 Kb |
The Fly | 3,405 Kb |
Drunk on Google Maps | 2,241 Kb |
Site under construction | 9,039 Kb |
Mario Bros | 4,332 Kb |
Blurred Scrollable Overlay | 3,413 Kb |
Css3D Wall | 2,441 Kb |
The Dark Loop | 4,130 Kb |
Appletv | 6,368 Kb |
Full screen menu | 3,702 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
A Pen by Gregory Potdevin | GregoryPotdevin | 1,713 Kb |
The Fly | GianlucaGuarini | 3,405 Kb |
AOR site logo | Thatbram | 2,527 Kb |
Rrremark.com Overlay Highlighter | Derickruiz | 4,438 Kb |
Scifi-style Radio-based Tab | Aaronchuo | 4,427 Kb |
Fullscreen audio play button | 72 | 2,148 Kb |
Realistic Buttons | Stoypenny | 2,248 Kb |
Infractions - Attitude | Kylie_Joseph | 7,672 Kb |
Product item | Mymahesh11 | 2,256 Kb |
Flex layout example | Mofny | 1,663 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!