# 第七週小組任務
###### tags: `每週小組任務`!

## 挑戰一：專題的延伸技法、套件
最終專題中的可以自己想像許多技巧加入，以下是課程中會介紹的技巧以及範例：

關於/品牌/產品介紹…：https://hoongyuu.github.io/Cheeto-s-Wine/#/intro
部落格/文章：https://bear-luo.github.io/OpenseasonWeb/#/openseason_home#newslist
分類：https://vvvvvvii.github.io/tasteof/dist/#/product_list?search=城市導覽
延伸產品：https://char849.github.io/vue3-week8a-main/#/course
搜尋：https://kevinhes.github.io/finalworkvue2022/#/
優惠券發放活動：https://nighthree.github.io/ChocolateShop/#/coupon
我的最愛：https://jordan-ttc-design.github.io/fine-job/#/
一堆動態效果：https://huan5678.github.io/chill-bar/#/

### 以下轉載自第七組，分享予組員
### 套件分享

| 套件工具 | 說明 |
| --- | --- |
| [Fullpage](https://alvarotrigo.com/fullPage/#page1) | 滿版滾動 |
| [Vue-Scrollto](https://vue-scrollto.netlify.app/docs/#options) | 視窗滾動 |
| [Vuetify](https://github.com/vuetifyjs/vuetify) | Framework |
| [Primevue](https://primevue.org/) | UI Components |
| [Rellax](https://dixonandmoe.com/rellax/) | 視差滾動 |
| [Curtainsjs](https://www.curtainsjs.com/) | 圖片視覺動畫 |
| [Matthew](https://matthew.wagerfield.com/parallax/) | 滑鼠滾動視覺 |
| [Clippy](https://bennettfeely.com/clippy/) | CSS圖片遮罩 |
| [Owl Carousel2](https://owlcarousel2.github.io/OwlCarousel2/index.html) | 輪播 |
| [Tobiasahlin](https://tobiasahlin.com/spinkit/) | Loading |
| [Vcalendar](https://vcalendar.io/) | 月曆UI |
| [Tweenmax](https://www.tweenmax.com.cn/index.html) | 動畫 |

### 設計分享

| 設計工具 | 說明 |
| --- | --- |
| [Heroicons](https://heroicons.com/ ) | icon |
| [Google Fonts](https://fonts.google.com/icons ) | 字型 |
| [Material](https://material.io/ ) | 設計準則 |
| [Copypalette](https://copypalette.app/?ref=producthunt) | 顏色挑選 |
| [Pigment](https://pigment.shapefactory.co/) | 顏色挑選 |
| [Grabient](https://www.grabient.com/) | 漸層顏色 |
| [Adobe Color](https://color.adobe.com/zh/create/color-wheel) | 顏色挑選 |
| [Undraw](https://undraw.co/illustrations) | 插畫 |
| [Linustock](https://www.linustock.com/vectors) | 插畫 |
| [中文文案排版](https://github.com/sparanoid/chinese-copywriting-guidelines) | 中文文案排版指北 |
| [Awwwards](https://www.awwwards.com/) | 搜集好設計的網站 |
| [Bookma](https://bookma.org/) | 蒐集好設計網站（日文) |
| [S5-style](https://bm.s5-style.com/) | 蒐集好設計網站（日文) |
| [Designnokoto](https://designnokoto.com/) | 蒐集好設計網站（日文) |

### 文章分享
- [用Vue + CSS寫一個吃角子老虎機(拉霸)](https://guahsu.io/2018/11/vue-slot-machine/)
- [滾動視差(parallax)簡單教學與Lab](https://blog.build-school.com/2022/05/06/%E6%BB%BE%E5%8B%95%E8%A6%96%E5%B7%AEparallax%E7%B0%A1%E5%96%AE%E6%95%99%E5%AD%B8%E8%88%87lab/)
- [14 Best Vue UI Component Libraries 2023](https://athemes.com/collections/vue-ui-component-libraries/)
- [群家學長筆記清單](https://hackmd.io/qLY82w1WTN2VdT-d7-1PBg?view#TypeScript)
- [好用插件、外掛、套件、工具](https://hackmd.io/loTJ18kfS8Gk4_xJrpYvHw?view)
- [Creativecruise](https://www.creativecruise.nl/)

### 以下轉載自第三組，分享予組員
:::warning
* 行事曆套件: https://flatpickr.js.org/themes/
* Swiper套件: https://swiperjs.com/swiper-api
* GSAP套件: https://greensock.com/gsap/
* Loading套件: https://lottiefiles.com/
* 3D動畫套件: https://animejs.com/
* A-frame套件: https://aframe.io/
* 翻書效果套件: https://dearflip.com/
* 紙屑動畫背景: https://agezao.github.io/confetti-js/
* 多種3D特效: https://threejs.org/
* 立體波浪效果: https://www.vantajs.com/?effect=waves
* Animate.css套件: https://animate.style/
:::

## 挑戰二：

完成團隊挑戰：https://bejewled-air-4cb.notion.site/3fe5fb56634541c1bda25e58db317b01

填寫表單：https://docs.google.com/spreadsheets/d/1JzlSExkKlN3-be11TqMb3RoTZ6y8zCkL70UUW7HWdl8/edit?usp=sharing

|題號|答案回答|解答 & 備註|
|-|---|---|
|1|3|||
|2|1|||
|3|3|||
|4|2|1>2>4>3||
|5|2|Promise.all 可以同時執行多個 promise 方法，並且完成後統一回傳結果||
|6|2|||
|7|1||keyup|
|8|2|使用 keep-alive 包覆元件|
|9|4||
|10|3|||