DD103 Web/APP前端設計工程師養成班

###### tags: `前端設計工程師養成班` # DD103 Web/APP前端設計工程師養成班 # html 測驗 https://docs.google.com/forms/d/e/1FAIpQLSelZV549JOKFjKIhv8LumENb3kAzSKi-ZDX2Ourr_lJqpnTRA/viewform # caniuse https://caniuse.com/ # 上課檔案 https://github.com/sexfat/dd103 # 講義 https://cookies.gitbook.io/dev-something/ # Git 講義 https://bryant-huang.gitbook.io/git/ # 網站分享 - https://www.cssawards.net/ - https://dribbble.com/ - https://www.awwwards.com/ - http://nipponcolors.com/#tonoko - https://www.behance.net/ - http://4db.cc/ # 網頁溝通流程 - 網路連線：讓你可以在網路傳送與接收資料。 - TCP/IP：傳輸控制協定和網際網路協定（Transmission Control Protocol and Internet Protocol）是定義資料如何在網路通行的通訊協定。這就像是方便你去商店買東西的交通工具。 - DNS：網域名稱系統（Domain Name Servers）就像是網站的電話簿。當你在瀏覽器輸入網址時，瀏覽器會在取得網站前，先去看 DNS 以查到網站的真實地址。瀏覽器需要找到哪個伺服器在託管指定的網站、這樣才能把 HTTP 訊息傳送到對的地方。 - HTTP超文本傳輸協定（Hypertext Transfer Protocol）是定義用戶端語言，和伺服器如何對話的應用協議。可以想成你買東西時會用來溝通的語言。 - Component files：網站由許多不同的文件組成程式檔：網站主要是由 HTML、CSS、JavaScript 建立其他檔案：這是構成網站其他內容的集體名稱，裡面可能包含圖像、音樂、影片、Word、PDF …… ![](https://i.imgur.com/WlAk9A3.png) # chrome plugin - 網站技術分析 https://www.wappalyzer.com/ - grid 尺規 https://chrome.google.com/webstore/detail/grid-ruler/joadogiaiabhmggdifljlpkclnpfncmj - colorpick https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg - 同文堂 https://chrome.google.com/webstore/detail/new-tong-wen-tang/ldmgbgaoglmaiblpnphffibpbfchjaeg?hl=zh-TW - 尺規 https://chrome.google.com/webstore/detail/page-ruler/emliamioobfffbgcfdchabfibonehkme/related # 編輯器安裝 1. https://code.visualstudio.com/ 2. https://www.sublimetext.com/ # 編輯器安裝 Vscode ![](https://i.imgur.com/sVtSrfd.png) # html 結構 ```htmlmixed=    <!DOCTYPE html> <html>  <head lang="en">  <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content="">  <title>HackWork官方網站</title>  <link href="style.css" rel="stylesheet">  <script src="js/index.js"></script>  <style></style> </head>  <body>  要寫Hello，World麼？會不會太簡單。 </body> </html> ``` - style.css ```css= h1 { color: #1271db; font-size: 155px; } ``` - ### 什麼是html >HTML (Hypertext Markup Language) 並不是一種程式語言，而是一種用來告訴瀏覽網頁的人該如何組織該網頁的標記式語言(markup language) - 是一個人骨架 + css是外觀 + javascripts 是動作行為最後構成網頁所以先寫好骨架，才開始裝飾我們的網頁外觀，最後才給他行為 **來動手創造你們的第一個html元素** - ### 巢狀元素 ![巢狀元素](https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png) 1. 起始標籤（The opening tag） 2. 結束標籤（The closing tag） 3. 內容（The content） 4. 元素（The element） - ### 元素還可以有「屬性（Attribute）」 ![屬性](https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png) ```htmlmixed= <div class="wrapper"> <h1>標題</h1> <div> 內容 </div> </div> ``` ```htmlmixed= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>index</title> <style> .title { color: #f20; font-size: 80px; } </style> </head> <body> <div class="wrapper"> <div class="header"> <h1 class="title">標題</h1> <h2>標題2</h2> <h3>標中3</h3> <h4>標題4</h4> <h5>標題5</h5> </div> <div>段落元素1</div> <div>段落元素2</div> <span>段落元素1</span><span>段落元素2</span> <p>段落元素1</p> <p>段落元素2</p> </div> <h1>底層</h1> </body> </html> ``` ## 何謂塊元素，內聯元素 - 何謂塊元素通常會佔據一整行的，我們叫做塊元素。例如 `<div>` - 何謂內聯元素通常只會佔據內容區的元素。例如 `<span>` 打開你們的編輯器 ```htmlmixed= <div>塊元素</div> <div>塊元素</div> <span>內聯元素</span><span>內聯元素</span> ``` # 標題元素 ```htmlmixed= <h1><h2>......<h6> <title></title> ``` # 段落元素 ```htmlmixed= <div></div> <span></span> <p></p> <ul> <li></li> </ul> <h1>段落文字</h1> <div>區塊內容</div> <p>文章內容</p> <span></span> <em>強調</em> <br> 斷行 <hr> 水平線 <strong>加粗文字</strong> <dfn>定義項目</dfn> <code>程式編碼</code> <samp>計算機樣本</samp> <kbd>鍵盤輸入</kbd> <var>變數</var> <i>斜體字</i> <del>刪除字體</del> <mark>記得標籤我</mark> <small>小而美</small> <meter value="8" min="0" max="10">度量衡</meter> <meter value="0.6">60%</meter> <sub>下標</sub> <sup>上標</sup> ``` # 連結元素 ```htmlmixed= <a href="" target=""></a> target="_blank" 另開新頁 ``` # 結構元素 ```htmlmixed= <body> <section> <article> <aside> <header> <section> <main> <footer> ``` # 圖像元素 `src` 主要是連結路徑 `alt` 是圖片說明 ```htmlmixed= <img src="images/.." alt="圖片說明"> ``` # 結構 ![](https://i.imgur.com/TtXCk0W.gif) - 圖庫 https://www.flaticon.com/ https://www.pinterest.com/ ```htmlmixed= <body> <header> <h1>logo</h1>  <nav> <ul> <li> <a href="https://www.free-css.com/free-css-templates/page241/neat" target="_blank">選單一 </a> <a href="#">子選單</a> </li> <li> <a href="page/about.html">about Us </a> </li> <li>選單二 </li> <li> 選單三 </li> </ul> <ol> <li>選單一</li> <li>選單二</li> </ol> </nav> </header> <div class="wrapper"> <div> <img src="images/youtube.png" alt="youtube"> <img src="https://i.pinimg.com/564x/39/87/02/398702a898b89bcac79fb82576e0de35.jpg" alt=""> </div> <div class="prod"> 產品 </div> <div class="intro">  <article> <h3>工廠一</h3> <p>工廠介紹</p> </article> <article> <h3>工廠二</h3> <p>工廠介紹</p> </article> </div> </div> <footer> <div class="logo">logo</div> <nav>選單</nav> <div class="info">公司資訊</div> </footer> </body> ``` # 表格 ```htmlmixed= <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> ``` - css ```css= table, th, td { border: 1px solid black; } th, td { padding: 0 15px; text-align: center; } ``` - 合併儲存格 ```htmlmixed= <table> <tr> <td colspan="2">1</td> <td rowspan="2">3</td> </tr> <tr> <td>4</td> <td>5</td> </tr> </table> ``` ![](https://i.imgur.com/pJk05vJ.png) # form 表單 ```htmlmixed= <form action="backend.php"> 帳號<input type="text" name="" id=""> 密碼<input type="password" name="" id=""> </form> ``` ```htmlmixed= <form action="backend.php" method="GET"> <fieldset> <legend> 帳號登入 </legend> <p> 帳號*<input type="text" name="" id="" placeholder="帳號ID" required> </p> <p> 密碼<input type="password" name="" id=""> </p> <p> 身分證字號<input type="text" name="" id="" minlength="9" maxlength="10" size="20"> </p> <p>性別男<input type="radio" name="sex" id="" value="male" > 女<input type="radio" name="sex" value="female" checked> 其他<input type="radio" name="sex" value="other"> </p> <p>我喜歡的運動游泳<input type="checkbox" name="exce" id="" value="swim"> 籃球<input type="checkbox" name="exce" id="" value="basketball" checked> </p> <p> <h3>我要留言</h3> <textarea name="message" id="" cols="40" rows="20"></textarea> </p> <p>我居住的台灣地址 <select name="location" id="" size="3" multiple> <option value="taipei" selected>台北市</option> <option value="new taipei">新北市</option> <option value="tau">桃園縣</option> <option value="tachi">台中市</option> </select> </p> <input type="submit" value="send"> <input type="reset" value="重置"> </fieldset> ``` ## 網站分享 - 網站大全 https://hao.uisdc.com/ - uiflow https://medium.com/monospace-tw/%E6%9B%B4%E9%81%A9%E5%90%88-ui-%E8%A8%AD%E8%A8%88%E5%B8%AB%E8%A3%BD%E4%BD%9C%E7%9A%84%E9%A0%81%E9%9D%A2%E6%B5%81%E7%A8%8B%E5%9C%96-wireflow-d51b785d85c2 - design system https://designsystemsrepo.com/design-systems/ - #### UI flow ![](https://i.imgur.com/cZvn7Fn.jpg) 1. #### 相似性 (Similarity) — 我們的大腦會把相似的事物看成一體如果數個元素具有類似的尺寸、體積、顏色，使用者會自動為它們建立起關聯。這是因為我們的眼睛和大腦較容易將相似的事物組織在一起。如下圖所示，當一連串方塊和一連串的圓形並排時，我們會看成(a)一列方塊和兩列圓形 (b)一排圓形和兩排三角形。 ![](https://cdn-images-1.medium.com/max/1200/1*OfNY7DM9SegLhdK6qS4-nw.jpeg) 2. #### 接近性 (Proximity) — 我們的大腦會把把靠近的事物看成一體讓我們先來觀察(a)，它是由6條直線均等分布，也因此我們的大腦很容易將六條直線視為一組。但很神奇地，若我們將(1)(2)靠近，(3)(4)靠近，(5)(6)靠近，是不是覺得直線們從一組變為三組呢? ![](https://cdn-images-1.medium.com/max/1200/1*Lsmo38cuK7SxAt4-YakrtQ.jpeg) 範例可以用來規劃組元件 ![](https://i.imgur.com/lLTq4La.png) 3. #### 連續性 (Continuity)-我們的大腦會把事物看成連續的形體 - 瀑流網站 http://wp-royal.com/hyper-x/ares/ ![](https://i.imgur.com/rmuP42t.png)![](https://i.imgur.com/GEfqJo0.png) - UI 參考 http://collectui.com/designs https://html5up.net/ https://the12principles.tumblr.com/ https://www.invisionapp.com/inside-design/ # 網站 - Grid 套件 https://chrome.google.com/webstore/detail/design-grid-overlay/kmaadknbpdklpcommafmcboghdlopmbi?hl=zh-TW 樣板 https://colorlib.com/wp/templates/ 選單主要功能引導標示所在位址選單的位址 1. 正常選單 https://prtimes.co.jp/ http://outdoor.kwst.net/site/index.html 2. 左側選單 http://www.themezaa.com/html/pofo/home-creative-simple-portfolio.html http://nakamurakenzai.jp/ 3. hamburger 選單 https://bsc-int.co.jp/ http://www.themezaa.com/html/pofo/home-portfolio-minimal.html https://www.hayama-honten.com/ https://demo2.madrasthemes.com/electro-wide/ https://www.glossom.co.jp/ https://www.globalmaritimeforum.org/ 4. 特殊選單 https://www.unitrust.co.jp/ https://slowmuffin.jp/ https://whereispoland.com/intro https://1964tokyo-vr.org/ https://nanameinc.jp/ 5. 購物網站選單 https://flatsome3.uxthemes.com/ https://flatsome3.uxthemes.com/demos/shop-demos/classic-shop/ https://xstore.8theme.com/ https://demo2.madrasthemes.com/electro-wide/ https://preview.themeforest.net/item/woodmart-woocommerce-wordpress-theme/full_screen_preview/20264492?_ga=2.124851338.1479057777.1563464568-552096446.1562772068 6. 背景融合選單 https://www.66nord.com/ https://www.tombow.com/sp/abt/ 7. 島嶼式選單 https://beartail.jp/ https://shiroki-clinic.com/index.html 8. 設計不良的選單 https://labandevideo.com/fr/ https://trippin.world/ # 網站參考 http://bm.s5-style.com/ https://uimovement.com/ http://collectui.com/designs ## Grid system psd https://1440px.com/ http://gridcalculator.dk/ https://cssauthor.com/bootstrap-grid-system-psd-templates/ https://colorlib.com/wp/free-html-website-templates/ https://coreui.io/#live-preview ## 程式設計重點 ## RWD響應式網站 vs AWD自適應式網站 ![](https://i.imgur.com/3wjqPcs.gif) ## 流動性 ![](https://i.imgur.com/sdPk69g.gif) ## 相對單位 ![](https://i.imgur.com/AptHF1C.gif) ## 斷點設計 ![](https://i.imgur.com/NwPaDhN.gif) ## 最大最小值設定 ![](https://i.imgur.com/ht4vVgC.gif) ## 組件寫法 ![](https://i.imgur.com/S5kpPzw.gif) ## 系統字型vs 網頁字體 ![](https://i.imgur.com/8g1pu1k.gif) ## 點陣圖vs 向量圖 ![](https://i.imgur.com/idz0p2s.gif) # 版本控制 ### git 下載 https://git-scm.com/ 1. 選擇好版本後，安裝一路按 “下一步” 按到底 2. 檢查是否有安裝成功指令 ``` git --version ``` ## 版本控制介紹透過文件控制（documentation control），能記錄任何工程專案內各個模組的改動歷程，並為每次改動編上序號。 ## 版本控制主要功能 1. 每個專案完整長期的歷史修改紀錄（人，時間，內容） 2. 程式分支建立和合併 3. 多人協作開發同步和遠端備份 4. 開發流程建立 ![](https://i.imgur.com/ov7m2UG.png) ## github 註冊 https://github.com/ ## 查詢識別資料 ``` git config --list ``` ## 設定識別資料 ``` git config --global user.name "sexfat" git config --global user.email "bryant6831@gmail.com" ``` ## 專案版本控制 ``` 進入目錄\ git init ``` ## git 原理 ![](https://i.imgur.com/M6l5FCD.png) ## git add 檔案名稱加入暫存區 `git add index.html` ## git commit -m "註記" 加入本機數據庫 `git commit -m "第一次"` ## 查詢提交狀態提交狀態 `git status` # 以上完成第一次版本紀錄 ## 常用linux 指令 |Mac | Windows | 說明 | | -------- | -------- | -------- | | cd | cd | 進入資料夾 | | ls | dir | 查詢資料夾內容 | | pwd | cd | 列出資料夾位址 | | whoami | whoami | 查詢使用者是誰 | | touch | *** | 建立檔案 | | rm | del | 刪除檔案 | | clear | cls | 清除終端機畫面 | | mkdir | mkdir | 建立目錄 | # sass ## 安裝node.js https://nodejs.org/en/ `node -v` `npm -v` ## 安裝sass https://sass-lang.com/install 安裝指令`npm i -g sass` `sass --version` ## vscode sass plugin https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass ```jsonld= "liveSassCompile.settings.formats":[ // This is Default. { "format": "expanded", "extensionName": ".css", "savePath": null }, // You can add more { "format": "compressed", "extensionName": ".min.css", "savePath": "/dist/css" }, // More Complex { "format": "compressed", "extensionName": ".min.css", "savePath": "~/../css/" } ] ``` ## 變數 ```css= $fontsize : 20px; $color : #333; body { font-size: $fontsize; margin: 0; padding: 20px; color: $color; font-family: $fontfamily; .container { width: 1200px; margin: 0 auto; header { background-color: #333; height: 300px; .logo { width: 300px; height: 20px; } } .content { background-color: #fff; } footer { height: 300px; background-color: rgb(14, 190, 235); } } } ``` ### html ```htmlmixed= <div class="wrapper"> <header> <div class="logo">logo</div> </header> <div class="content"> </div> <footer> </footer> </div> ``` # @mixin 函式 ### 沒帶值 ```css @mixin margincenter { margin: 0 auto; width: 80%; background-color: rgb(235, 10, 10); } .box01 { @include margincenter(); } .box2 { @include margincenter(); } .box3 { @include margincenter(); } ``` ### 傳多值 ```css mixin rect($width , $bgc) { width: $width; height: $width; background-color: $bgc ; } .rect { @include rect(180px , #00ffdd); } .rect300 { @include rect(300px , #00ff2a); } .rect400 { @include rect(120px , rgb(255, 0, 0)) } ``` ### 跳脫字串#{} ```css @mixin btn($classname , $width, $bgc) { #{$classname} { width: $width; height: $width; background-color: $bgc; } } @include btn(".btns" , 300px , #333); ``` ### 預設值跟 null值用法 ```css @mixin rect_01($width:400px , $height:300px) { .rect01 { width: $width; height: $height; } } @include rect_01(500px , 300px); @mixin rect_01($width:400px , $height:null) { .rect01 { width: $width; height: $height; } } @include rect_01(500px); ``` ```css @mixin btn_module($btn_name,$width, $height, $bgc, $color, $border:null) { .#{$btn_name} { text-align: center; width: $width; height: $height; line-height: $height; background-color: $bgc; color: $color; cursor: pointer; border: $border; &:hover { background-color: darken($bgc, 40%); } } } @include btn_module("btn_wide" ,300px, 40px , #f20 ,#333 ) @include btn_module("btn_big" ,500px, 50px , #00a2ff ,rgb(26, 26, 26) , 2px solid #333 ) ``` ### @mixin and @extend 差異 ```css= @mixin rect_01($width:400px, $height:300px) { width: $width; height: $height; } .green { background-color: green; } .yellow { background-color: yellow; } @mixin green(){ background-color: green; } .box-green { @include rect_01(); // @extend .green; @include green(); } .box-yellow { @include rect_01(); @extend .yellow; } ``` ### 占位符號 ``` %green { background-color: green; } .box-green { @include rect_01(); @extend %green; // @include green(); } ``` ### 運算 ```css= $fontBasesize : 20px; @mixin fontsize($fontBasesize) { h1 { font-size: $fontBasesize * 5 } h2 { font-size: $fontBasesize * 4.3 } h3 { font-size: $fontBasesize * 3.4 } h4 { font-size: $fontBasesize * 2.1 } h5 { font-size: $fontBasesize * 1.4 } } @include fontsize($fontBasesize); ``` ### 判斷式 ```css= .box_area { $margintop : 50px; @if ($margintop <=20px) { margin-top: $margintop }@else { margin-top: ($margintop/2) } } ``` ### border-radius ```css= @mixin btn_module($btn_name, $width, $height, $bgc, $color, $border:null ,$radius: 'false') { .#{$btn_name} { text-align: center; width: $width; height: $height; line-height: $height; background-color: $bgc; @if ($radius == 'true') { border-radius: 10px } color: $color; cursor: pointer; border: $border; &:hover { background-color: darken($bgc, 40%); } } } ``` ### @content ```css= @mixin section($i, $bgc) { .section_#{$i} { width: 100vw; height: 100vh; background-color: $bgc; @content } }; @include section('01' , #333){ h2 { color: #00ff2a; } } @include section('02' , rgb(252, 0, 0)){ h2 { color: #00b7ff; } } ``` ### @for 迴圈 ```css= @for $i from 1 through 10 { .for_#{$i} { margin-top: $i * 1px; } } ``` ### grid ```css= @mixin grid($num) { @for $i from 1 through $num { .col-#{$i} { width: ($i / $num) * 100% } } } @media screen and (min-width: 768px) { @include grid(12); } ``` ### RWD ```css= //rwd 斷點 $large : 1024px; $medium : 950px; $small : 768px; @mixin respond($breakpoint) { @if $breakpoint=='desktop' { @media all and (min-width: $large) { @content; } } @else if $breakpoint=='medium' { @media all and (min-width: $medium) { @content; } } @else if $breakpoint=='small' { @media all and (max-width: $small) { @content; } } } ``` ### 呼叫 ```css @include respond(small) { body { font-size: 40px; } } ``` ### @each ```css= $list: a1, a2 ,a3 ,a4; @each $var in $list { .img_#{$var} { background-image: url('img/#{$var}.jpg'); width: 100px; height: 30px; } } ``` ### 使用函式如果變數是多值... ```css= //$list 多值 ... @mixin eachlist($list...) { @each $var in $list { .img_#{$var} { background-image: url('img/#{$var}.jpg'); width: 100px; height: 30px; } } } @include eachlist(a1,a2, sss); ``` ### @content ```css= @mixin eachlist($list...) { @each $var in $list { .img_#{$var} { background-image: url('img/#{$var}.jpg'); width: 70px; height: 30px; cursor: pointer; @content; //@include margincenter(); } } } @include eachlist(a1, a2) { &:hover { opacity: 80%; } } ``` ```css= $maps : ( h1 : 30px, h2 : 26px, h3 : 20px); h1 { font-size:map-get($maps ,h1); } h2 { font-size:map-get($maps ,h2); } h3 { font-size:map-get($maps ,h3); } ``` ### @each + map ```css= $maps : (h1 : 30px, h2 : 26px, h3 : 20px, h4 : 18px, h5 : 16px ); @each $title, $num in $maps { #{$title} { font-size: $num; } } ``` ```css= $color_theme : ( main_page : #fff, aboutus_page : #333, contact_page : #999, product_page : #666 ); @each $themeName, $color in $color_theme { .#{$themeName}_wrapper { background-color:$color; } } ``` # theme https://coreui.io/demo/#buttons/buttons.html ```css= $btncolor : (primary : rgb(100, 195, 255), secondary : rgb(227, 227, 227), success : rgb(147, 249, 127), ); @each $title, $bgcolor in $btncolor { .btn_#{$title} { background-color: $bgcolor; padding: 30px; text-align: center; color: #fff; &:hover { background-color:darken($bgcolor ,40); } } } ``` # +@mixin ```css= @mixin btn_theme($btncolor){ @each $title,$bgcolor in $btncolor { .btn_#{$title} { background-color: $bgcolor; padding: 10px; width: 120px; font-size: 16px; line-height: 30px; border-radius: 5px; text-align: center; color: #fff; cursor: pointer; transition: .4s all; &:hover { background-color: darken($bgcolor, 40); } } } } @include btn_theme ( (primary : rgb(255, 217, 2), secondary : rgb(198, 198, 198), success : rgb(147, 249, 127), ) ) ``` # gulp 講義 https://bryant-huang.gitbook.io/-1/ ## gulp-cli npm install gulp-cli -g ## 安裝gulp npm install gulp --save-dev ## 安裝 gulp mini css https://www.npmjs.com/package/gulp-clean-css ## 第一步安裝 `npm install gulp-clean-css --save-dev` ### gulpfile.js ```jsx= var cleanCSS = require('gulp-clean-css'); gulp.task('minicss', function () { gulp.src('dev/css/*.css') .pipe(cleanCSS({compatibility: 'ie8'})) .pipe(gulp.dest('dest/css/')); }) ``` 執行`gulp minicss` ```htmlmixed= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> @@include('./template/metacss.html') @@include('./template/title.html', { "title": "關於我們" }) </head> <body> @@include('./template/header.html') </body> </html> ``` # Tweenmax 網站：https://greensock.com/ ### ease https://greensock.com/docs/Easing https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js ```jsx= TweenMax.to('.a1' ,1,{ x:100 }) ``` ## option ```jsx= opacity:1,//透明度 scale:2,放大 x: 100,//x軸位移 y: 100,//y軸位移 width: 0,//寬度屬性 delay: .6, //延遲秒數 repeat: -1, //重複 rotation: 360,//旋轉 transformOrigin : 'left top',//旋轉中心點位址 repeatDelay: 2,//重複延遲時間 yoyo: true,//動畫順序1-2-2-1 //增加一組class className: "+=box10", //覆蓋掉本來的class className: "box10" ``` ![](https://i.imgur.com/AFKiAAp.gif) # scrollmagic https://scrollmagic.io/docs/index.html#usage ### CDN https://cdnjs.com/libraries/ScrollMagic ```htmlmixed= <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script> ``` https://github.com/sexfat/dd103/invitations

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.