https://github.com/pradipchaudhary/tinder-web-effect

Tinder Web Effect ❤️
https://github.com/pradipchaudhary/tinder-web-effect

Last synced: 2 days ago
JSON representation

Tinder Web Effect ❤️

• Host: GitHub
• URL: https://github.com/pradipchaudhary/tinder-web-effect
• Owner: pradipchaudhary
• Created: 2024-03-30T17:31:27.000Z (8 months ago)
• Default Branch: master
• Last Pushed: 2024-03-30T18:30:32.000Z (8 months ago)
• Last Synced: 2024-03-31T18:47:31.108Z (8 months ago)
• Language: HTML
• Size: 2.29 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Tinder Web Effect

![Tinder Web Effect](./preview.gif)

## Overview

This repository contains the source code for implementing the Tinder web effect using HTML, CSS, and JavaScript. The Tinder web effect mimics the swiping interaction seen in the popular Tinder dating app, allowing users to swipe left or right on items/cards.

## Demo

You can view a live demo of the Tinder web effect [here](https://your-demo-url.com).

## Features

-  Swipe left/right functionality.

-  Customizable card design.

-  Smooth animations.

-  Responsive design for various screen sizes.

## Usage

To use the Tinder web effect in your project:

1. Clone this repository:

```bash

git clone https://github.com/your-username/tinder-web-effect.git

```

2. Include the necessary files in your HTML:

```html

```

3. Create the HTML structure for your cards:

```html



   


      

   

   



```


4. Initialize the Tinder web effect:

```javascript

const tinder = new TinderWebEffect(".tinder-wrapper", {

   /* Options */

});

```

## Options

-  `threshold`: The minimum distance (in pixels) a user must swipe to trigger a swipe action. Default is `100`.

-  `onSwipeLeft(cardIndex)`: Callback function triggered when a card is swiped left.

-  `onSwipeRight(cardIndex)`: Callback function triggered when a card is swiped right.

## Contributing

Contributions are welcome! If you find any bugs or have suggestions for improvements, please open an issue or submit a pull request.

## License

This project is licensed under the [MIT License](LICENSE).