Flying Cards

原力甩卡

假如开两个网页，即可以来回传送卡片。

假如拿两台手机，都打开这个网站，也可以来回传送卡片。

Preview

尽管原理很简单，但是我觉得这个效果很有趣。

image

Demo

http://flyingcards.fastbreakfast.top/

在两个页面(设施)中打开这个网站。
在输入框里输入对应的号码，点击connect。也可以点random。
假如一个页面被清空了，即可以开始滑动啦。

Github

landmadename/Flying-Cards

Usage

• 项目由两个部分组成：
  • 前台react：用来显示卡片的动效 (FlyingCards/react-cards)
  • 后台Django：用Websockets来模拟传输 (FlyingCards/mysite)
• 修改react-cards/src/index.js 里的 cards 即可以修改图片
• mysite是直接通过修改Channels的教程完成的。所以连名字都没改。
• 可以通过修改mysite/chat/consumers.py完成Websockets的少量修改。

Installation

首先，你需要安装一个redis

git clone  GavBaros/react-tinder-cards.gitcd Flying-Cards/react-cardsnpm installnpm start# 再开一个终端，或者者把npm start放到后端cd Flying-Cards/mysitemkvirtualenv flyingcardspip install -r requirements.txtpython3 manage.py runserver# 修改 Flying-Cards/react-cards/src/index.js 里 150行 domin 为自己的地址# 直接打开 http://localhost:3006/# 或者者部署

Acknowledgements

• 感谢react-spring和react-use-gesture
• 本项目主要是基于 react-spring 和 react-use-gesture 的卡片demo 改造来的。
• 感谢react-tinder-cards