---
title: 參考工具&教學
tags: tools
description: Tools & Tutorials for Project
version: 20210531
---
# 專題用工具與教學

### HTML模組化：
* [The Simplest Ways to Handle HTML Includes](https://css-tricks.com/the-simplest-ways-to-handle-html-includes/) ---> [Gulp](https://www.npmjs.com/package/gulp-file-include)

### CSS
background-attachment
* https://developer.mozilla.org/zh-TW/docs/Web/CSS/background-attachment
* https://ithelp.ithome.com.tw/articles/10249759
* https://www.casleyconsulting.co.jp/blog/engineer/283/

### 動畫參考：
**官方產品**
* 單一頁面
https://dribbble.com/shots/7538415-Mone-Natural-Skincare-Brand-Website

**客製化**
* 登錄頁面
https://dribbble.com/shots/6930577-Liquid-animation-first-screen
* 介紹滑動動畫
https://buttersand.com/chocolate-collection/
* 製作中動畫（加入燒杯）
https://dribbble.com/shots/14831550-Paint-Mobile-App-Animation-Design
* drap
https://medium.com/%E6%89%8B%E5%AF%AB%E7%AD%86%E8%A8%98/react-dnd-implement-task-board-16ce7f67289c

**所有頁面都可以用的東西**
* button/checkbox/radio
https://dribbble.com/shots/14656980-Liquid-UI-Elements
* navbar
https://dribbble.com/shots/7164420-Liquid-tab-bar-animation
* loader
https://dribbble.com/shots/14387739-Liquid-geometry-Loaders

### 多語系
navigator Object 存取使用者的瀏覽器資訊
https://www.fooish.com/javascript/navigator.html

jQuery i18n
https://smlpoints.com/guide-light-javascript-i18n-core-plugin.html

Vue i18n
https://clhuang224.github.io/TechBlog/2020/03/15/20200315-vue-i18n/

React
https://logmodule.timelog.to/a165066147

Nodejs Express i18n
https://perrywu0606.pixnet.net/blog/post/17993368

設計原則
https://designtongue.me/ux-design-for-internationalization/

-----

## 動畫：

### 有那些不錯的 JavaScript 動畫套件？
- JS 動畫套件繁多，不想要一一研究
- 直接找最多人用、最多人討論的
- [anime.js](https://animejs.com/)
- [GSAP](https://greensock.com/gsap/)
### 比較
**anime.js** 的優點
- 容易安裝、
- Reddit：使用直覺、簡單（比 GSAP 容易使用）
- Reddit：容量比較小
- 許多好的範例

**anime.js** 的缺點
- 文件有些地方不足
- The information on CSS properties is not super easy to understand
- Easing is cool, but the custom patterns took a second to read
- Using selectors was good, but required a coordinated effort between styling and animation definitions

**GSAP** 的優點
- API 非常穩定、非常多的動畫選擇
- 非常好的文件和範例
- Reddit：有非常好的論壇及社群支持
- Reddit：GSAP 是動畫界的標準
- Reddit：許多的討論都是推薦 GSAP
- Reddit：適合處理複雜動畫

**GSAP** 的缺點
- Specific applications might have special cases. I didn’t really cover this, but GSAP also includes instructions around Angular, React, etc.
- Large amount of API options can be daunting to beginners 這裡應該是說功能太多對新手來說不好選擇
- 檔案容量比較大

### 其他參考
GSAP 算是最常使用的 JS 套件之一 [連結](https://w3techs.com/technologies/overview/javascript_library)

[GSAP GitHub repo](https://github.com/search?q=GSAP&type=repositories) VS [anime.js GitHub repo](https://github.com/search?q=anime.js&type=repositories)

### Comment
晁榮：我是比較想要使用 GSAP，因為比較多人用，感覺有機會去抄別人的 Code（而且文件齊全的話，應該會比較好學）by 嘉義憤怒火雞