These processes are valid for only mobile. So, touchscreen..
First of all, Let' see the final version.
In this topic we are going to only inspect JS side.
This is our final style.css
file. First we can create this file.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #ddd;
color: #0d0d0d;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.swipable {
width: 50%;
padding: 20px 15px;
border-radius: 10px;
background-color: coral;
color: white;
box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.8);
user-select: none;
margin-top: 20px;
overflow: hidden;
}
.container {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: height .5s;
overflow: hidden;
padding-bottom: 20px;
}
And it's our index.html
file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Swipable Demo</title>
</head>
<body>
<div class="container">
<div class="swipable">This is a swipable item.</div>
<div class="swipable">This is a swipable item.</div>
<div class="swipable">This is a swipable item.</div>
<div class="swipable">This is a swipable item.</div>
<div class="swipable">This is a swipable item.</div>
<div class="swipable">This is a swipable item.</div>
<div class="swipable">This is a swipable item.</div>
</div>
<script src="app.js"></script>
</body>
</html>
These are our Vanilla JS processes.
Before, we can select our .swipable
classes on js.
let treshold = window.innerWidth / 4
document.querySelectorAll(".swipable").forEach((swipableItem, index) => {
//TODO :)
});
In top of our code, we have define treshold variable to setting up swipe treshold.
In this example, our swipable items going to be swipable on only X axis.
We have 3 basis variables for this.
document.querySelectorAll(".swipable").forEach((swipableItem, index) => {
let touchstartX = 0
let touchendX = 0
let diff = 0;
});
diff
variable is gonna be result of our drag distance.
Other variables are basically start point and end point of our touches.
swipableItem.addEventListener('touchstart', e => {
touchstartX = e.changedTouches[0].screenX
swipableItem.style.transition = "all 0s"
})
We are listened touchstart
event to handling touch event. In this event, we can catch first touch to setting uptouchstartX
variable. After then, we are setted up transition duration to 0 second to tracking our touch.
This is our touchend
event.
swipableItem.addEventListener('touchmove', e => {
diff = e.touches[0].screenX - touchstartX;
swipableItem.style.transform = `translateX(${diff}px)`;
})
In above, we have listened touchmove
event. In this event, we have metered distance of between our touchstart and current touch move. And we have assign up this result to diff
variable. Thus, so we can adjust the position of our item on the screen by dragging it, only x axis.
This is final of our touch event in bellow.
swipableItem.addEventListener('touchend', e => {
touchendX = e.changedTouches[0].screenX
swipableItem.style.transition = "all .5s"
handleGesture(index)
})
In above, we have set up last position of our finger to touchendX
variable.
And set up animation duration to moving to old position slowly, if it's not swiped enough.
handleGesture
function is our final function. This function will decide the swipe operation.
And ...
function handleGesture(index) {
let swipePath = "";
if (touchendX < touchstartX) swipePath = "left";
if (touchendX > touchstartX) swipePath = "right";
if ((diff > treshold) || (diff < -treshold)) {
console.log(`Item ${index}: Swiped ${swipePath}`)
swipableItem.style.transition = "all .3s"
if (swipePath == "left") {
swipableItem.style.transform = `translateX(-${window.innerWidth}px)`
} else {
swipableItem.style.transform = `translateX(${window.innerWidth}px)`
}
setInterval(() => {
swipableItem.style.height = "0px";
swipableItem.style.padding = "0px";
swipableItem.style.margin = "0px";
setInterval(() => {
swipableItem.remove();
}, 500);
}, 500)
} else {
swipableItem.style.transform = `translateX(0px)`
}
}
This is final version.
And GitHub Repo
Top comments (1)