---
# System prepended metadata

title: ED103 Web/APP前端設計工程師養成班
tags: [前端設計工程師養成班]

---

###### tags: `前端設計工程師養成班`
# ED103 Web/APP前端設計工程師養成班


# 上課程式碼
https://github.com/sexfat/ed103

# sass 安裝
https://sass-lang.com/install

# Git 講義
https://bryant-huang.gitbook.io/git/

- git 官網
https://git-scm.com/


- ### node 安裝
https://nodejs.org/en/
查詢 `node -v`


<br>

- ### sass 安裝
https://sass-lang.com/install
1. 安裝 `npm install -g sass`
2. 查詢 `sass --version`


<br>

- ### vscode 套件安裝

1. live sass compiler 安裝 
2. sass 安裝
![](https://i.imgur.com/gOlGhtd.png)



```json=
"liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/css/"
        }
    ],
```




<br>

## 搜尋node切換版本

n node   -mac
nvm node -win



https://preview.keenthemes.com/metronic/demo1/features/custom/iconbox.html

# 動畫 gsap
https://greensock.com/
https://www.tweenmax.com.cn/

# 函式庫
https://cdnjs.com/libraries/
https://cdnjs.com/libraries/gsap/2.1.3

# 主程式
https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js


# scrollmagic
https://cdnjs.com/libraries/ScrollMagic







# 補間動畫
https://greensock.com/docs/v2/Easing

# 上課程式碼
https://github.com/sexfat/ed103


# UI UX 上課講義
https://docs.google.com/presentation/d/1xHnNL2wjuZue82-0I-uKNtYPrDghMUeHcONN6CcpCqc/edit?usp=sharing


# 參考網站
1. https://themeforest.net/
2. https://www.cssdesignawards.com/
3. https://www.webdesignclip.com/
4. https://flatsome3.uxthemes.com/shop/
5. http://preview.themeforest.net/item/hervin-creative-ajax-portfolio-showcase-slider-theme/full_screen_preview/23817476?_ga=2.8862197.113215896.1588782797-220591041.1581305097
6. https://www.flaticon.com/
7. https://themeforest.net/?auto_signin=true
8. http://4db.cc/
9. https://muuuuu.org/


# 產品故事




1. **選定主題** 
   （假設）資訊分享平台



   (* 當選定主題後，開始分析研究)
2. **產品介紹** 
   - 我們的產品主要是做什麼服務的，能夠你們有效的完成哪些事
   - 我們整理許多主題讓分享更輕鬆，因此您可以專注於真正重要的事情，讓客戶過上更好的生活。我們正在與您一起努力，體驗的未來。

3. **產品目標**

   - 關於這個產品提供哪些服務，主要是解決哪類的問題

4. **使用主族群** 

   - 應用產業 ：科技業
   - 目標用戶 ：工程師

5. **案例研究**
   - 電商研究

6. **需求列表**

   - list log更動列表
   - 注意事項

7. **開始專案**
   
   - sitemap
     ![](https://i.imgur.com/njWAHHm.png)

   - wireframe
    ![](https://i.imgur.com/8E4jtRh.jpg)


   - ui flow
     ![](https://i.imgur.com/cZvn7Fn.jpg)
   - prototype
   - mockup




# 動畫套件 GSAP


- html
```htmlmixed=
  <div class="box box_00"></div>
    <div class="box box_01"></div>
    <div class="box box_02"></div>
```

 
- css

```css
body {
   background-color: rgb(36, 36, 36);
}

section {
   width: 100vw;
   height: 100vh;
}


.box {
  width: 100px;
  height: 50px;
  margin-bottom: 4px;
  background-color: rgb(248, 66, 66);
}

.box_02 {
    background-color: rgb(76, 255, 5);
}
```

- js

```jsx=
//單一物件
TweenMax.to('.box_00', 1, {
    x: 400,
    y: 300, 
});

//多物件
TweenMax.to(['.box_01', '.box_02'], 1, {
    x: 400
});
```


# scrollmagic

```jsx=
 <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.js"></script>
    
```

- html
```htmlmixed=
 <div id="trigger01"></div>
    <section class="lightblue">
        <h3>第一個場景</h3>
          <div class="box scoll01"></div>
    </section>
```




- css



```css
.scoll01 {
   position: relative;
   top: 40px;
   left: 100px
}
```



```jsx=
// scroll magic 基本設定
// 1 step
var controller = new ScrollMagic.Controller();

// 2step
var scroll01 =  TweenMax.to('.scoll01' , 1 , {x :300})

// 3step
var scense01 =  new ScrollMagic.Scene({
    triggerElement : '#trigger01'
}).setTween(scroll01).addIndicators().addTo(controller);
```
