Flying Cards
原力甩卡
如果開兩個網(wǎng)頁，就可以來回傳送卡片。
如果拿兩臺手機(jī)，都打開這個網(wǎng)站，也可以來回傳送卡片。
Preview
雖然原理很簡單，但是我覺得這個效果很有趣。
image
Demo
http://flyingcards.fastbreakfast.top/
在兩個頁面(設(shè)備)中打開這個網(wǎng)站。
在輸入框里輸入對應(yīng)的號碼，點(diǎn)擊connect。也可以點(diǎn)random。
如果一個頁面被清空了，就可以開始滑動啦。
Github
https://github.com/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 https://github.com/GavBaros/react-tinder-cards.git
cd Flying-Cards/react-cards
npm install
npm start
# 再開一個終端，或者把npm start放到后臺
cd Flying-Cards/mysite
mkvirtualenv flyingcards
pip install -r requirements.txt
python3 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
