Swipe detection

Developer
Tobias Reich
Size
3,241 Kb
Views
40,480
  1. Swipe detection Previews
  2. Swipe detection HTML Codes
  3. Swipe detection CSS Codes
  4. Swipe detection JS Codes

How do I make an swipe detection?

What is a swipe detection? How do you make a swipe detection? This script and codes were developed by Tobias Reich on 24 August 2022, Wednesday.

Swipe detection Previews
IQ Test

Swipe detection - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Swipe detection</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="box">	<span>Swipe</span>
</div> <script src="js/index.js"></script>
</body>
</html>

Swipe detection - Script Codes CSS Codes

body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 100vh;
}
.box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 500px; height: 500px; background: rgba(0, 0, 0, 0.1);
}

Swipe detection - Script Codes JS Codes

'use strict';
var position = function position(e) {	return {	x: e.pageX,	y: e.pageY	};
};
var onSwipe = function onSwipe(elem, callback) {	var minDistance = 150;	var maxTime = 400;	var startTime = null;	var startPos = {};	var start = function start(e) {	startTime = new Date().getTime();	startPos = position(e.changedTouches == null ? e : e.changedTouches[0]);	// Prevent scrolling	e.preventDefault();	};	var move = function move(e) {	// Prevent scrolling	e.preventDefault();	};	var end = function end(e) {	var currentTime = new Date().getTime();	var elapsedTime = currentTime - startTime;	var newPos = position(e.changedTouches == null ? e : e.changedTouches[0]);	var offsetPos = {	x: newPos.x - startPos.x,	y: newPos.y - startPos.y	};	var directions = {	left: offsetPos.x <= 0 ? Math.abs(offsetPos.x) : 0,	right: offsetPos.x >= 0 ? Math.abs(offsetPos.x) : 0,	up: offsetPos.y <= 0 ? Math.abs(offsetPos.y) : 0,	down: offsetPos.y >= 0 ? Math.abs(offsetPos.y) : 0	};	var direction = Object.keys(directions).sort(function (a, b) {	return directions[b] - directions[a];	})[0];	var distance = directions[direction];	var inDistance = distance >= minDistance;	var inTime = elapsedTime <= maxTime;	if (inTime === true && inDistance === true) callback(direction);	// Prevent scrolling	e.preventDefault();	};	elem.addEventListener('touchstart', start);	elem.addEventListener('mousedown', start);	elem.addEventListener('touchmove', move);	elem.addEventListener('mousemove', move);	elem.addEventListener('touchend', end);	elem.addEventListener('mouseup', end);
};
onSwipe(document.querySelector('.box'), function (direction) {	document.querySelector('span').innerHTML = 'Swiped ' + direction;
});
Swipe detection - Script Codes
Swipe detection - Script Codes
Home Page Home
Developer Tobias Reich
Username electerious
Uploaded August 24, 2022
Rating 3.5
Size 3,241 Kb
Views 40,480
Do you need developer help for Swipe detection?

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!

Tobias Reich (electerious) Script Codes
Name
BasicContext Custom Close Fn Example
BasicContext Basic Example
Parallax 3D Button with JS controlled CSS variables
JS controlled CSS variables
BasicScroll Default Demo
Fancy border button
BasicPlaceholder
BasicContext Scroll Example
BasicLightbox Default Demo
Color Fan Deck
Create amazing captions with AI!

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!