This content originally appeared on DEV Community and was authored by Kaan Kuscu
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
ksckaan1
/
dom-swipable-item
this is for my Dev.to topic
This content originally appeared on DEV Community and was authored by Kaan Kuscu
Kaan Kuscu | Sciencx (2022-04-23T22:41:12+00:00) Creating Swipable Item using Vanilla JS/HTML/CSS. Retrieved from https://www.scien.cx/2022/04/23/creating-swipable-item-using-vanilla-js-html-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.