###### 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 安裝

"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

- wireframe

- ui flow
- prototype
- mockup

# 動畫套件 GSAP

- html

  <div class="box box_00"></div>
    <div class="box box_01"></div>
    <div class="box box_02"></div>

- 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

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

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

# scrollmagic

 <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

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

- css

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

// 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);