###### tags: `前端設計工程師養成班`
# DD105 Web/APP前端設計工程師養成班
[](https://)
https://github.com/sexfat/git_b/invitations
Git 基本設置
https://app.gitbook.com/@bryant-huang/s/git/git-she-zhi
# html 測驗
https://docs.google.com/forms/d/e/1FAIpQLSelZV549JOKFjKIhv8LumENb3kAzSKi-ZDX2Ourr_lJqpnTRA/viewform
# 上課檔案
https://github.com/sexfat/dd105
# 上課講義
https://cookies.gitbook.io/dev-something/
# gulp 自動話流程講義
https://bryant-huang.gitbook.io/-1/
# 網頁溝通流程
- 網路連線：讓你可以在網路傳送與接收資料。
- 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 ……
# 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
- 容器隔線
https://chrome.google.com/webstore/detail/pesticide-for-chrome/bblbgcheenepgnnajgfpiicnbbdmmooh
- 字體檢查
https://chrome.google.com/webstore/detail/fontface-ninja/eljapbgkmlngdpckoiiibecpemleclhh
# 編輯器安裝
1. https://code.visualstudio.com/
2. https://www.sublimetext.com/
# vscode3
# 網站分享
日系
- https://www.webdesignclip.com
- http://4db.cc/
- http://nipponcolors.com/#tonoko
美系
- https://www.cssawards.net/
- https://dribbble.com/
- https://www.awwwards.com/
- https://www.behance.net/
# 規劃內容
> 在開始為自己的網站寫程式碼之前，你應該先規劃要呈現哪些資訊？要採用哪種字體與顏色？你可依照以下所提供的簡易方法，照著來規劃網站的內容與設計。
- 網站主題
- 建立網站目的 ______________（購物網站 / 官方網站 / 部落格 / 活動
網站）
- 網站需要哪些單元 ______________ （ 關於我們 / 聯絡我們 / 產品資訊 ）
- 網站的主要功能 ___________ （購物車 / 內容管理系統 / 發信系統 ）
- 網站技術解決方案 _____________ (html / css / javascripts / php / mysql )
# 你的網站在哪裡
當你正在你自己的電腦上編輯你的網站時，你應該將所有相關的檔案放在同一個資料夾中，這反映到未來在伺服器上的檔案架構。這個資料夾可以放在任何地方，但你應該會放在一個容易找到的地方，對吧！像是你的桌面，你的家目錄，或是你硬碟的根目錄。
首先，建立一個新資料夾並命名為 web-projects(或類似名稱)。 這裡將存放你的各種網站專案.
在上述資料夾底下，建立另一個資料夾來存放你的第一個網站，請將這個資料夾命名為 test-site (或其他有創意的名稱).
# 命名規則
>#### 1. 留意大小寫與空格，假設你放了圖片在你的網站上而路徑是 test-site/MyImage.jpg，然後另一個檔案你想放在 test-site/myimage.jpg，這可能是無法運作的。
>#### 2. 避免檔案中文化
>圖片/mypic.jpg 無法運作
images/mypic.jpg 無法運作
# 什麼是html
HTML (Hypertext Markup Language) 並不是一種程式語言，而是一種用來告訴瀏覽網頁的人該如何組織該網頁的標記式語言(markup language)
## html5跟4的差異
#### 在於標頭的宣告
https://www.w3schools.com/tags/tag_doctype.asp
# 元素屬性
**來動手創造你們的第一個html元素**
- ### 容器元素
1. 起始標籤 （The opening tag）
2. 結束標籤 （The closing tag）
3. 內容（The content）
4. 元素（The element）
- ### 元素還可以有「屬性（Attribute）」
## 塊元素 與內聯元素
塊元素內聯元素一覽表
https://www.w3schools.com/html/html_blocks.asp
## 何謂塊元素
通常會佔據一整行的，我們叫做塊元素。例如 `<div> <p>`
## 何謂內聯元素
通常只會佔據內容區的元素。例如 `<span>`
## 結構元素
### 結構元素
跟文件架構有關係的元素
```htmlmixed=
<body>
<section>
<article>
<aside>
<header>
<section>
<main>
<footer>
```
結構
## 標題元素
```htmlmixed=
<h1><h2>......<h6>
<title></title>
```
## 段落元素
```htmlmixed=
<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>
<pre>還原文件本身特性</pre>
```
## 連結元素
```htmlmixed=
<a href="https://www.oneday.com.tw/no-090/" target="_blank"></a>
```
### 另開新頁
`target="_blank"`
- 要注意何時要另開新頁
- a 標籤要注意是在容器外，還是容器內
## 圖像元素
`src` 主要是連結路徑 `alt` 是圖片說明
- 聯結路徑 ./ ../ 的差異
```htmlmixed=
<img src="images/.." alt="圖片說明">
```
- css
```css=
table, th, td {
border: 1px solid black;
}
th, td {
padding: 0 15px;
text-align: center;
}
```
# form
會員登入
```htmlmixed=
<form action="function.php">
<p>
<label for="account">帳號：</label>
<input type="text">
</p>
<p>
<label for="psw">密碼:</label>
<input type="password" name="" id="">
</p>
<input type="submit" value="送出">
<input type="reset">
</form>
```
會員註冊
```htmlmixed=
<form action="" method="GET">
<fieldset>
<legend>會員註冊</legend>
<p>
<label for="account">*姓名</label>
<input type="text" name="name" required>
</p>
<p>
<label for="">*信箱</label>
<input type="email" name="email" id="" required>
</p>
<p>
<input type="radio" name="gender" id="" value="male">
<label for="">男</label>
<input type="radio" name="gender" id="" value="female">
<label for="">女</label>
<input type="radio" name="gender" id="" value="other">
<label for="">其他</label>
</p>
<p>
<h2>你喜歡的運動</h2>
<input type="checkbox" name="sw" id="" value="sw">
<label for="">游泳</label>
<input type="checkbox" name="bas" id="" value="bas">
<label for="">籃球</label>
<input type="checkbox" name="cl" id="" value="cl">
<label for="">爬山</label>
</p>
<input type="submit" value="送出">
<input type="reset" value="重置">
</fieldset>
</form>
```
# 完形心理學
群化原則
群化原則中的六大法則(相似性、對稱性、連續性、封閉性、共同命運及接近性)
1. #### 相似性 (Similarity) — 我們的大腦會把相似的事物看成一體
如果數個元素具有類似的尺寸、體積、顏色，使用者會自動為它們建立起關聯。這是因為我們 的眼睛和大腦較容易將相似的事物組織在一起。如下圖所示，當一連串方塊和一連串的圓形並排時，我們會看成(a)一列方塊和兩列圓形 (b)一排圓形和兩排三角形。
範例 選單列 同一個層級
可以用來規劃同一層級的元素
或是反向操作，在同一層級元素裡，有突然一個不一樣，就會顯得突兀
2. #### 接近性 (Proximity) — 我們的大腦會把把靠近的事物看成一體
讓我們先來觀察(a)，它是由6條直線均等分布，也因此我們的大腦很容易將六條直線視為一組。但很神奇地，若我們將(1)(2)靠近，(3)(4)靠近，(5)(6)靠近，是不是覺得直線們從一組變為三組呢?
範例 可以用來規劃 組元件
3. #### 連續性 (Continuity)-我們的大腦會把事物看成連續的形體
常用在手機版上的設計
- https://preview.themeforest.net/item/electro-electronics-store-woocommerce-theme/full_screen_preview/15720624?_ga=2.76815382.2011309943.1562772068-552096446.1562772068
4. #### 封閉性 (Closure) — 我們的大腦在觀察事物的時候，會將許多個獨立的元素視認為一個完整封閉的圖形。
我們在觀察事物的時候，傾向將許多個獨立的元素，視為一個封閉的圖案。我們的大腦會自動填補元素和元素間的空白部分，形成一段不存在的線段。如上圖所示，我們可以將一連串的圓點看成一個較大的圓環，也可以將一個不連串的線段看成一個完整的圓，這種視覺特性稱為封閉性。
# 手機版 平板設計重點
手機
平板
# 元件設計
- 使用放大鏡 icon
- 使用輸入框
- 使用動畫
- 提供按鈕
- 在每頁都有搜尋列
- 操作行為簡單
## 程式設計重點
1. ### RWD響應式網站 vs AWD自適應式網站
響應式網站設計和自適應網站設計可能看起來相同，但它們之間存在很大差異。自適應站點設計需要時間來加載，並且它不像響應式網站設計那樣平穩加載。
https://www.agoda.com/
2. ### 流動性
隨著屏幕尺寸變小，內容開始佔用更多的垂直空間，下面的任何內容都會被推下，它被稱為流程。如果您習慣使用像素和點進行設計，那麼掌握這些可能會很棘手，但是當您習慣它時，這一點很有意義。
3. ### 相對單位
知道 % and PX 的使用時機
畫布可以是桌面，移動屏幕或介於兩者之間的任何東西。像素密度也可能不同，因此我們需要靈活且適用於各處的單元。這就是像百分數這樣的相對單位派上用場的地方。所以製作50％寬的東西意味著它總是佔用屏幕的一半（或視口，這是打開的瀏覽器窗口的大小）。
4. ### 斷點設計
- http://gs.statcounter.com/screen-resolution-stats
- http://devfacts.com/media-queries-breakpoints-2019/
5. ### 最大最小值設定
內容佔據螢幕的整個寬度非常棒，就像在移動設備上一樣，但是將相同的內容延伸到電視屏幕的整個寬度往往不那麼有意義。這就是Min / Max值有用的原因。例如，寬度為100％，最大寬度為1000px意味著內容將填滿螢幕，但不會超過1000px。
6. ### 組件寫法
還記得相對位置嗎？很多元素依賴於彼此很難控制，因此容器中的包裝元素使其更容易理解，乾淨整潔。這就像像素這樣的靜態單位可以提供幫助。它們對於您不想擴展的內容非常有用，例如徽標和按鈕。
7. ### 系統字型vs 網頁字體
系統字體僅限PC用戶。 因此，不要將它們用於響應式網站設計，因為在操作系統支持該字體之前，它們不能在不同的設備上運行。 使用Web字體，因為它們是通用的，可以與所有設備完美配合。不過要考慮到行動網站的速度問題
8. ### 點陣圖vs 向量圖
# 動畫的 12 道 UX 原理
## 第一道原理：Easing（緩和效果）
暫時事件發生時，物體行為符合使用者的預期動作
## 以下兩種動畫哪種比較好
### linear 固定速度
### elastic motion
## 第二道原理：Offset & Delay（位移和延遲）
在新的元素和場景出現時，定義物體之間的關聯和階層
## 第三道原理：Parenting（從屬關係）
與多個物體互動時，創造空間和時間上的階層關係
>Parenting 是物體與其他物體屬性的連結，以會增加易用性的方式產生物體關聯和結構。
## 第四道原理：Transformation（變形）
當物體的用途改變時，產生敘事流程的連續狀態
## 第五道原理：Value Change（數值變化）
當數值所屬的項目變化時，創造動態且連續的敘事關係
## 第六道原理：遮罩 (Masking)
讓某一個或一組介面物體的部分隱藏/顯示，藉以創造連續感。
## 第七道原理：Overlay（重疊）
因為位置而形成的多層 (layered) 物體，在視覺平面空間創造敘事效果。
## 第八道原理：Cloning（複製）
在新物體分離或回到原處時，創造連續性、關聯性與敘事效果。
## 第九道原理：Obscuration（朦朧化）
讓使用者可以自行在空間裡，依靠非主要視覺階層的物體或場景找到方向。
## 第十道原理：Parallax（視差）
當使用者捲動畫面時，在視覺平面上創造空間階層
Parallax（視差）在動畫的 UX 時，是指介面上的物體以不同速度移動。
## 第十一道原理：Dimensionality（空間維度）
新物體進入和離開時，提供空間上的敘事架構
## 第十二道原理：Dolly & Zoom（移動鏡頭和縮放）
移動介面物體和空間時，保持連續感和空間敘事
# 網站分享
https://uimovement.com/
# tweenmax
https://greensock.com/docs/
https://greensock.com/docs/v2/Easing
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
```
- Tweenmax
```jsx=
TweenMax.to('.box1', 3, {
x: 300,
y: 300
});
```
```jsx=
TweenMax.to('.box1', 2, {
x: 800,
ease: Quad.easeOut,
// ease: SlowMo.ease.config(0.7, 0.7, false)
// ease: Bounce.easeOut,
// ease: Elastic.easeOut
// ease: Power4.easeOut
});
TweenMax.fromTo('.box2', 3, {
x: 300
}, {
x: 700,
ease: Elastic.easeOut
});
```
## 參數集 option
```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,//透明度
ease: Power3.easeInOut//動畫效果
//旋轉要件
rotationY: 360, //旋轉
rotationX: 360 , //旋轉
transformOrigin : 'right top' //定位點
//透明度
autoAlpha: 0 //自動消失
//修改classname
//增加一組class
className: "+=box10"
//覆蓋掉本來的class
className: "box10"
//路徑 可以走bezier 貝茲曲線 (BezierPlugin)
```
```jsx=
TweenMax.staggerTo('.box3' , 1 , {x:50}, 0.3);
```
## TimelineMax
```jsx=
var tl = new TimelineMax({
repeat: 1,
yoyo: true
});
tl.to('.box4', 1, {
x: 100
}).to('.box4', 1, {
y: 100
}).to('.box4', 1, {
x: 200
});
```
# node 安裝
### 安裝12.4.1 LTS
https://nodejs.org/en/
### 其他版本的安裝
https://nodejs.org/download/release/v12.0.0/
- 版本查詢指令
`node -v`
# sass 結構
https://github.com/sexfat/sass_structure
# sass 安裝
https://sass-lang.com/install
`npm install sass -g`
- setting.json
```
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css/"
}
]
```
## 1 變數
```css
$fontSize : 12px;
$color : #333 ;
$bgc : rgb(190, 0, 0);
body {
padding: 0;
margin: 0;
background-color: $bgc;
color: $color;
font-size: $fontSize;
}
h1 {
padding: 0;
margin: 0;
font-size: $fontSize * 3;
}
```
## 2 巢狀
```css
body {
padding: 0;
font-family: $fontFamily;
margin: 0;
background-color: $bgc;
color: $color;
font-size: $fontSize;
.wrapper {
h1 {
padding: 0;
margin: 0;
font-size: $fontSize * 3;
span {
color: rgb(85, 252, 1)
}
}
}
}
```
## 連結檔案 import + partials
在base資料夾裡新增 _var.scss <--- 把變數都放在這裡
```
@import 'base/var';
```
## @mixin
- 不帶值
```css
@mixin margin() {
margin: 20px;
}
@include margin();
```
- 帶值
```css
@mixin rect($width , $height , $bgc) {
width: $width ;
height: $height ;
background-color: $bgc;
@include rect( 300px , 100px , rgb(0, 145, 255));
}
```
- 帶預設值
- null值
## 前綴跨瀏覽器
```css
@mixin animation_module($value) {
-webkit-animation: $value;
/* Safari 4+ */
-moz-animation: $value;
/* Fx 5+ */
-o-animation: $value;
/* Opera 12+ */
animation: $value;
}
```
## 按鈕組件設計
```css
@mixin btn($width, $padding, $color, $bgc, $border:null, $border-r:null) {
width: $width;
padding: $padding;
text-align: center;
color: $color;
background-color: $bgc;
cursor: pointer;
border: $border;
border-radius: $border-r;
&:hover{
background-color: darken($bgc ,10);
}
}
// .btn_wide:hover{
// }
.btn_wide {
@include btn(200px, 8px, #fff, rgb(0, 238, 255), 0px, 10px);
margin: 10px 0;
}
```
## 跳脫字串 #{}
```css
@mixin btn_class($class, $width) {
.#{$class} {
width: $width;
padding: 10px;
text-align: center;
background-color: #333;
color: #fff
}
}
@mixin bg_image($url_files) {
background-image: url('./images/#{$url_files}.jpg');
}
.bgimages {
@include bg_image(pic_02);
}
```
## 偽元素 &
```css
.link {
color: rgb(0, 242, 16);
&:hover {
color: #fff;
}
&::before {
content: 'before ';
}
&::after {
content: 'after';
}
}
```
## prefix module
```css
@mixin prefix($attr, $value) {
-moz-#{$attr}: $value;
-o-#{$attr}: $value;
-webkit-#{$attr}: $value;
#{$attr}: $value;
}
.boxs {
@include prefix(transition, all .5s);
}
```
#### 1. 文字置中
```css
@mixin textAlign($value){
text-align: $value;
}
```
#### 2. 引用到其他模組
```css
@mixin box-center($align) {
margin: 0 auto;
@include textAlign($align);
}
```
#### 3.應用
```css
.box-center {
@include box-center(center);
}
```
## 運算子
```css
$num : 10;
$num-1 : 20;
.box-plus {
width: $num + $num-1 + px;
height : $num - $num-1 + px ;
margin: $num * $num-1 + px ;
font: round($num / $num-1 ) + px; //四捨五入
font-size: ceil($num / $num-1 ) + px; // 無條件進位
padding: floor($num / $num-1 ) + px; // 無條件捨去
}
```
## 字體
```css
@mixin titleSize($fontSize) {
h1 {
font-size: ceil($fontSize * 4.8);
}
h2 {
font-size: floor($fontSize * 3.2);
}
h3 {
font-size: round($fontSize * 2.8);
}
h4 {
font-size: ceil($fontSize * 2.1);
}
h5 {
font-size: ceil($fontSize * 1.2);
}
//使用
@include titleSize($fontSize);
}
```
## 判斷式
注意沒有 === 的判斷
```css
@mixin boxArea($marginTop) {
.box-area {
@if $marginTop <=20px {
margin-top: $marginTop;
}
@else {
margin-top: ($marginTop / 2)
}
}
}
@include boxArea(20px);
```
## theme 使用判斷式
#### @content 的使用
擴增屬性
```css
@mixin theme($theme) {
@if $theme==green {
body {
background-color: green;
@content
}
}
@else if $theme==yellow {
body {
background-color: yellow;
@content
}
}
@else if $theme==blue {
body {
background-color: blue;
@content
}
}
@else {
body {
background-color: #fff;
@content
}
}
}
@include theme(yellow){
color: #fff;
}
```
## 迴圈
```css
@for $i from 1 through 100 {
.for-#{$i}{
font-size: $i * 1px;
}
}
```
## Grid
```css=
@for $i from 1 through 12 {
.col-md-#{$i}{
width : ($i / 12) * 100%;
}
}
```
### grid + mixin
```css
@mixin grid($num) {
@for $i from 1 through $num {
.col-md-#{$i} {
width: ($i / $num) * 100%;
}
}
}
@include grid(12);
```
## each
```css
@each $var in a1, a2, a3{
.img_#{$var} {
background-image: url('img/#{$var}.jpg');
width: 100px;
height: 30px;
}
}
```
```css
@mixin img_bg($file , $list) {
@if $file==jpg {
@each $var in $list {
.img_#{$var} {
background-image: url('images/#{$var}.jpg');
}
}
}
@else if $file==png {
@each $var in $list {
.img_#{$var} {
background-image: url('images/#{$var}.png');
}
}
}
}
@include img_bg(png , a1 a2 a3 a4 box);
@include img_bg(jpg , b1 b2 b3 b4 jpgbox);
```
## @while 迴圈
```css
$a : 12;
$b : 2;
@while $a > $b {
.item-#{$a} {
width: 1px * $a
}
$a : $a - 2;
}
```
用 mixin
```css
@mixin items($a , $b){
@while $a > $b {
.item-#{$a} {
width: 1px * $a
}
$a : $a - 2;
}
}
@include items(20 , 2);
```
```css
// rwd 斷點
$desktop :1366px;
$medium : 995px;
$small: 768px;
@mixin rwd($breakpoint) {
@if $breakpoint==desktop {
@media all and (min-width :$desktop) {
@content;
}
}
@else if $breakpoint==medium {
@media all and (min-width :$medium) {
@content;
}
}
@else if $breakpoint==small {
@media all and (max-width :$small) {
@content;
}
}
}
```
RWD 使用
```css
@include rwd(desktop) {
.wraper {
width: 1200px;
}
}
```
## map
```css
$a-map:(key1 : 10px,
key2 : 20px,
key3: 30px);
h1 {
font-size: map-get($a-map, key3);
width: map-get($a-map, key1 );
}
```
## map + @each
```css
$vars :(num1 : 10px,
num2 : 20px,
num3: 30px,
num4: 40px
);
@each $name , $num in $vars {
.items-#{$name} {
width : $num;
}
}
```
## h1
```css
$titleSize : (
h1 : 48px,
h2 : 36px,
h3 : 26px,
h4 : 18px,
h5 : 14px);
@each $title , $value in $titleSize {
#{$title} {
font-size: $value;
};
}
```
# Gulp Task
## node 版本
https://nodejs.org/dist/latest-v10.x/
### gulpfile.js
```jsx=
gulp.task('concatJs' ,function () {
gulp.src('js/*.js').pipe(gulp.dest('dest/js'));
});
```
## 引用套件
```jsx
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var sass = require('gulp-sass');
```
## 壓縮css
https://www.npmjs.com/package/gulp-clean-css
```jsx=
gulp.task('concatcss' ,function () {
gulp.src('css/*.css')
.pipe(cleanCSS({compatibility: 'ie9'}))
.pipe(gulp.dest('dest/css'));
});
```
## sass 轉譯
https://www.npmjs.com/package/gulp-sass
```jsx=
gulp.task('sass' , function() {
gulp.src('sass/*.scss')
.pipe(sass().on('error', sass.logError))
// .pipe(cleanCSS({compatibility: 'ie9'}))
.pipe(gulp.dest('css/'));
})
```
## watch
```jsx=
gulp.task('watch' , function(){
gulp.watch('sass/*.scss', ['sass']);// callback sass function
gulp.watch('js/*.js', ['concatjs']);
gulp.watch('*.html', ['concatjs']);
})
```
## gulp-file-include
https://www.npmjs.com/package/gulp-file-include
安裝
`npm install --save-dev gulp-file-include`
引用
```jsx=
var fileinclude = require('gulp-file-include');
```
- gulpfile.js
```jsx=
gulp.task('fileinclude', function() {
gulp.src(['product.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('./dest'));
});
```
- index.html
```htmlmixed=
@@include('./header.html')
<div class="main_wrapper">
<div class="primary_btn">按鈕</div>
<div class="secondary_btn">按鈕</div>
<div class="success_btn">按鈕</div>
<div class="fail_btn">失敗按鈕</div>
</div>
@@include('./footer.html')
```
- header.html
```htmlmixed=
<header>
<h1 class="logo">logo</h1>
<nav><ul>
<li>選單</li>
<li>選單</li>
<li>選單</li>
</ul> </nav>
</header>
```
- footer.html
```htmlmixed=
<footer>
<h2 class="logo">logo</h2>
</footer>
```
- 變數
@@title 變數
```htmlmixed=
<title>@@title</title>
<link rel="stylesheet" href="css/main.css">
```
```htmlmixed=
@@include('./layout/head.html',{
"title": "產品頁面"
})
```
# browser-sync 瀏覽器同步
npm install browser-sync --save-dev
```jsx=
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./dest",
index: "main.html"
}
});
gulp.watch(['*.html' , '**/*.html'], ['fileinclude']).on('change',reload);
gulp.watch(['sass/*.scss' , 'sass/**/*.scss'], ['sass']).on('change',reload);
});
```
# 壓縮圖片
https://www.npmjs.com/package/gulp-imagemin
```jsx=
var imagemin = require('gulp-imagemin');
gulp.task('mini_img', function () {
gulp.src('dev/img/*.*')
.pipe(imagemin())
.pipe(gulp.dest('dest/mini_img/'))
});
```
# gulp-sourcemaps
- https://www.npmjs.com/package/gulp-sourcemaps
TweenMax
```jsx=
TweenMax.to('.box-wide' ,2 , {
rotationY : 360,
transformOrigin : 'left 50% -700' ,//定位點
transformPerspective: 100
})
```
TweenMax bezier
```jsx=
TweenMax.to('.bezier', 2, {
bezier: {
values: [{
x: 0, //節點1
y: 0
},
{
x: 600,
y: 600
},
{
x: 300,
y: 400
},{
x: 200,
y: 100
}
],
autoRotate : false // 方向
},
ease : Elastic.easeOut
})
```
# 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>
```
- html
```htmlmixed=
<div id="trigger01"></div>
<section class="section_02">
<div class="box bezier">bezier</div>
<div class="box scroll01">scroll</div>
</section>
```
- js
```jsx=
//加入controller
var controller = new ScrollMagic.Controller();
//第一個場景
var scroll01 = TweenMax.to('.scroll01' , 1 , {
x: 200,
y: 200
});
new ScrollMagic.Scene({
triggerElement : '#trigger01',
offset : 0, //start1
triggerHook: 0, // trigger01
reverse: false, //動畫返回
duration :500 //scroll 移動距離
}).setTween(scroll01)
.addIndicators() // 觸發點指標
.addTo(controller);
```
- html
```htmlmixed=
<div id="trigger02"></div>
<section class="section_03">
<div class="box scrollcss">css</div>
</section>
```
- scss
```css=
.section_03 {
transition: all 1s ease-in-out;
&.on{
background-color: rgb(205, 104, 255);
}
```
- js
```jsx=
var cssbox = TweenMax.to('.scrollcss' , 1 , {
y: 300,
x: 300
})
new ScrollMagic.Scene({
triggerElement: '#trigger02',
triggerHook: 0
}).setClassToggle('.section_03', 'on').setTween(cssbox).addIndicators().addTo(controller);
```
- html
```htmlmixed=
<div id="trigger03"></div>
<section class="section_04">
<div class="box stick01">stick01</div>
<div class="box stick02">stick02</div>
<div class="box stick03">stick03</div>
</section>
new ScrollMagic.Scene({
triggerElement: '#trigger03',
triggerHook: 0,
duration: '300%'
}).setPin('.section_04').setTween(timelinemaxMv).addIndicators().addTo(controller);
```
- js
```jsx=
var timelinemaxMv = new TimelineMax();
timelinemaxMv.to('.stick01' , 1 , {x: 300}).to('.stick02' , 1 , {x: 300}).to('.stick03' , 1 , {x: 300});
new ScrollMagic.Scene({
triggerElement: '#trigger03',
triggerHook: 0,
duration: '300%'
}).setPin('.section_04').setTween(timelinemaxMv).addIndicators().addTo(controller);
```
- waypoint
http://imakewebthings.com/waypoints/
- velocity
http://velocityjs.org/
Sign in with Wallet
Connect another wallet