###### tags: `前端設計工程師養成班`
# CED101 Web 前端設計工程師養成班
# Sass
## Vscode 設定css 輸出
設定css 輸出的資料夾，在檔案<喜好設定<設定
---
-> 搜尋找到seeting.json檔案，放入底下這段，
可以改編譯過後的路徑。
#### setting.json
```json=
//css產出設定
"liveSassCompile.settings.formats": [
{
"format": "expanded", //壓縮成一行"compressed", //壓縮成一行css，正式版本
"extensionName": ".css",
"savePath": "/css/" //此為輸出的路徑，可以自行更改
}
],
```
# uiux 講義
https://drive.google.com/file/d/186uCb_ksLa1NOIkAzM367tKykwxl-0hm/view?usp=sharing
# uiux 資源
- design system
https://designsystemsrepo.com/design-systems/
- uiux 介面
http://collectui.com/designs
https://www.cssawards.net/
https://dribbble.com/
https://www.awwwards.com/
http://nipponcolors.com/#tonoko
https://www.behance.net/
http://4db.cc/
https://codemyui.com/
https://preview.themeforest.net/item/cork-responsive-admin-dashboard-template/full_screen_preview/25582188?_ga=2.211702293.145436789.1599030155-220591041.1581305097
<br>
## moqups / mockup工具
https://moqups.com/
<br>
# 分析網站結構
https://www.apple.com/tw/
https://www.tesla.com/
# 功能流程規劃
畫出 yahoo 購物中心的購物流程圖
https://tw.buy.yahoo.com/
# 專案文件
- sitemap
- wireframe
- ui flow
# 產品組成
- 產品的組成大約可以拆分成 頁面 > 元件 > 元素 > 圖（影片）、文字、icon、表單、互動 等。
- 各元素都可能需要制定 色彩、透明度、尺寸、間距、檔案格式、品質、風格 等。互動包含 手勢操作、過場動畫、特效、音效、震動 等。
<br><br><br>
- 範例
https://preview.themeforest.net/item/cork-responsive-admin-dashboard-template/full_screen_preview/25582188?_ga=2.211702293.145436789.1599030155-220591041.1581305097
## 首頁介面組成
### 選單元件
<br>
<br>
範例網址：http://demo.smartaddons.com/templates/html/market/intro-new/
#### Header要注意的
- [ ] logo不能置頂 貼邊
- [ ] 選單要標示所在位址
- [ ] 是否有 會員登入/註冊 的標示
- [ ] 購物網站是否有購物車 的標示
- [ ] 功能列，主選單，次選單層級 是否清楚
- [ ] 選單是否有對齊
- [ ] 選單跟圖片的關係是否清楚
### - 選單壓在圖上，保持選單清楚，圖片內容避免干擾選單
*選單不適合壓在圖上（圖片干擾選單）*
*適合壓在圖上*
<br>
#### - 選單要固定在上方
# gsap
https://greensock.com/
https://greensock.com/docs/v2
https://greensock.com/docs/v2/Easing
## github 連結：
https://github.com/sexfat/ced101
```jsx=
scaleX:1.5,
x: 140,
y: 0,
boxShadow: "0px 0px 20px red",//陰影
scale:2, //放大
delay: 2,//延遲幾秒
repeat: 3,//重複幾次
repeatDelay: 2,//重複延遲時間
yoyo: true,//動畫順序1-2-2-1
alpha:0,//透明度
autoAlpha: 0 //透明度
ease: Power3.easeInOut//動畫效果
//旋轉要件
rotationY: 360, //旋轉
rotationX: 360 , //旋轉
transformOrigin : 'right top' //定位點
//透明度
autoAlpha: 0 //自動消失
//修改classname
//增加一組class
className: "+=box10"
//覆蓋掉本來的class
className: "box10"
```
- ## html
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>gsap2.1.3</title>
</head>
<body>
<div class="box box01">01</div>
<div class="box box02">02</div>
<div class="box box03">03</div>
<div class="box box04">04</div>
<div class="box box04">04</div>
<div class="box box04">04</div>
</body>
<script src="./gsap.js"></script>
</html>
```
- ## css
```css
body {
margin: 0;
padding: 0;
background-color: #000;
}
.box {
width: 80px;
height: 80px;
background-color: #00ffaa;
border-radius: 6px;
}
.box01 {
position: relative;
top: 100px;
left: 300px
}
.box03 {
position: relative;
border-radius: 20px;
top: 300px;
left: 300px;
/* width: 300px; */
}
.box04 {
opacity: 0;
}
```
- ## gsap.js
```jsx=
TweenMax.to('.box' , 3 , {
y: 200,
x: 100
})
```
```jsx=
TweenMax.to('.box01' , 2 , {
y: 200,//位移
x: 100,//位移
// ease: Power2.easeOut
// ease : Elastic.easeOut
ease: Bounce.easeOut,// 補間動畫
rotation : 360,//旋轉
width : '80%',//寬度
})
```
```jsx=
TweenMax.from('.box02' , 2 , {
x: 400,
repeat : 7,
yoyo : true
});
TweenMax.to('.box03' , 1 , {
rotation : 360,
repeat : -1,
ease: Power0.easeNone
});
TweenMax.staggerTo('.box04',1,{
x: 100,
opacity: 1
},0.6)
TweenMax.staggerFromTo('.box04', 1, {
x:0,
opacity:0
}, {
x: 200,
opacity: 1
} , 0.6)
```
```jsx=
//TimelineMax
var tl01 = new TimelineMax({
repeat : 2
});
// TweenMax.to('.box05' ,1, {
// x: 100
// });
// TweenMax.to('.box06' ,1, {
// y: 100
// });
// TweenMax.to('.box07' ,1, {
// y: 100,
// x: 100
// });
tl01.to('.box05' ,1, {
x: 100,
rotation: 360
}).to('.box06' ,1, {
y: 100,
scale: 2
}).to('.box07' ,1, {
y: 100,
x: 100
});
```
Sign in with Wallet
Connect another wallet