Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

April 23, 2022 10:41 pm GMT

Creating Swipable Item using Vanilla JS/HTML/CSS

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 / 4document.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

Original Link: https://dev.to/ksckaan1/creating-swipable-item-using-vanilla-jshtmlcss-2mfj

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To