###### tags: `前端設計工程師養成班`
# CED102 Web 前端設計工程師養成班
### 102 Github
https://github.com/sexfat/ced102
### Git 講義
https://bryant-huang.gitbook.io/git/
### CDN
https://cdnjs.com/
### 練習
https://scrollmagic.io/examples/advanced/section_wipes_manual.html
##### git add .
將所有檔案加入索引，準備加入版本控管。
##### git status
查看現在索引的狀態，哪些檔案未被追蹤或已經追蹤。
##### git commit -m'輸入一些備註'
將索引內容建立一個新的版本控管，未來可能會有很多個。
### 狀況一：終端機畫面好亂想清空
clear
### 狀況二：想查看過去版本的內容(HEAD)
HEAD為目前所在位置的指標。
- git checkout [版本號前四碼]
回到以前得某個指定版本狀態，查看過去的內容。
- git checkout master
還原最新版本。
> 要使用 Git 版本控管，你必須先建立「工作目錄」與「版本庫」。(mkdir, git init)
# 動畫套件GSAP
- https://github.com/sexfat/ced102
1. https://greensock.com/gsap/
2. https://greensock.com/docs/v2
- html
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="box"></div>
</body>
</html>
```
- css
```css
body{
background-color: rgb(41, 41, 41);
color: #fff;
}
.box {
width: 80px;
height: 80px;
border-radius: 10px;
margin: 20px;
padding: 10px;
box-sizing: border-box;
background-color: rgb(0, 255, 170);
}
```
```jsx=
TweenMax.to('.basic', 2, {
// x: 300,
// y: 100,
rotation: 180, //旋轉
transformOrigin: 'right bottom', //定位點
scale: 2, //放大
delay: 1, //延遲
// opacity: 0,
// autoAlpha : 0,
// display : 'none'
// ease: Elastic.easeOut.config(1, 0.3)
});
TweenMax.from('.from', 2, {
x: 150,
opacity: 0,
repeat: 2, //重複
yoyo: true, //跟repeat 搭配使用
ease: Power3.easeInOut
})
TweenMax.fromTo('.fromTo', 1, {
x: 400,
opacity: 0
}, {
x: 100,
opacity: 1,
backgroundColor: '#f20', //背景顏色
boxShadow: '10px 10px 20px #f27', //陰影
className : '+=aaaa' //動態加class
})
//
TweenMax.staggerFrom('.staggerTo' , 1 , {
x: -100,
opacity : 0,
ease: Power3.easeInOut
}, .6)
//timelinemax
var tl = new TimelineMax();
TweenMax.to('.mv01' , 1 , { x: 100});
TweenMax.to('.mv02' , 1 , { x: 200});
TweenMax.to('.mv03' , 1 , { x: 300});
//使用timelinemax
tl.to('.mv01' , 1 , { x: 100}).from('.mv02' , 1 , { x: 200}).to('.mv03' , 1 , { x: 300});
//同一個物件 不同行為
var tl0 = new TimelineMax({
onComplete: alerts //callback function
})
// alert function
function alerts() {
alert('完成動畫');
}
tl0.to('.mv0', 1, { x: 100 }).to('.mv0', 1, { y: 100 }).to('.mv0', 1, {
x: 400
}).to('.mv0', 1, {
y: 200
})
```
## control.html
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="control.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<title>control 動畫</title>
</head>
<body>
<button id="play">play</button>
<button id="pause">pause</button>
<button id="reverse">reverse</button>
<button id="fast">fast</button>
<button id="normal">normal</button>
<button id="slow">slow</button>
<div class="box mv"></div>
<div class="box mv2">mv2</div>
</body>
<script>
var playBtn = document.getElementById('play');
var pauseBtn = document.getElementById('pause');
var reverseBtn = document.getElementById('reverse');
var fastBtn =document.getElementById('fast');
var normalBtn =document.getElementById('normal');
var slowBtn =document.getElementById('slow');
var tween = TweenMax.to('.mv', 8, { x: 800 , repeat : -1 })
var tl = new TimelineMax({repeat : -1 , yoyo: true});
tl.to('.mv2' , 1 , {x: 400 }).to('.mv2' , 1 , {scale : 2});
// 播放
playBtn.addEventListener('click', function () {
tween.play();
tl.play();
})
//暫停
pauseBtn.addEventListener('click', function () {
tween.pause();
tl.pause();
})
// 反轉
reverseBtn.addEventListener('click', function () {
tween.reverse();
tl.reverse();
})
//加速
fastBtn.addEventListener('click', function () {
tween.timeScale(2);
})
//恢復正常速度
normalBtn.addEventListener('click', function () {
tween.timeScale(1);
})
slowBtn.addEventListener('click', function () {
tween.timeScale(0.5);
})
</script>
</html>
```
## menu
### html
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="ham.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<title>選單設計二</title>
</head>
<body>
<div id="nav">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</body>
</html>
```
### ham.css
```css=
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
background-color: #292929;
color: #fff;
}
.bar {
width: 40px;
height: 5px;
background-color: #fff;
position: relative;
left : 20px;
top: 20px
}
#nav {
cursor: pointer;
width: 50px;
}
.top {
margin-bottom: 6px;
}
.bottom {
margin-top: 6px;
}
```
### js
```jsx=
<script>
//動畫
var tlmenu = new TimelineMax();
// tlmenu.to('.top' , .3 , {
// width :'55px'
// }).to('.middle' , .3 ,{
// width : '65px'
// }).to('.bottom' , .3 , {
// width : '30px'
// })
var top_mv = TweenMax.to('.top' , .2 , {
y: '11px',
rotation : 45,
})
var bottom_mv = TweenMax.to('.bottom' , .2 , {
y: '-11px',
rotation : -45,
})
var middle_mv = TweenMax.to('.middle' , .2 , {
opacity : 0
})
tlmenu.stop();
tlmenu.add([top_mv,bottom_mv,middle_mv]);
//動畫stop
//事件被觸發
document.getElementById('nav').onmouseover = function(){
tlmenu.play();
}
document.getElementById('nav').onmouseleave = function(){
tlmenu.reverse();
}
</script>
```
## 範例
```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="example.css">
<title>gsap選單</title>
</head>
<body>
<div class="wrapper">
<div class="bar">
<div class="humbar"></div>
</div>
<h2>使用gsap製作選單</h2>
<!-- 隱藏選單 -->
<nav>
<div class="close_bar">
<div></div>
</div>
<ul>
<li class="item"><a href="#">首頁</a></li>
<li class="item"><a href="#">關於我們</a></li>
<li class="item"><a href="#">專案</a></li>
<li class="item"><a href="#">聯絡我們</a></li>
</ul>
</nav>
</div>
</body>
</html>
```
```css=
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: black;
box-sizing: border-box;
overflow-x: hidden;
}
.wrapper {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
letter-spacing: 3px;
}
.wrapper a {
display: block;
color: #000;
text-decoration: none;
}
.wrapper h2 {
text-align: center;
}
.wrapper nav {
position: absolute;
width: 100%;
height: 30px;
background: white;
display: flex;
justify-content: center;
align-items: center;
color: #000;
right: -200vw;
}
.wrapper nav ul {
list-style: none;
}
.wrapper nav ul li {
margin: 30px 0;
font-size: 20px;
opacity: 0;
}
.wrapper nav .close_bar {
width: 30px;
height: 30px;
position: absolute;
top: 6%;
right: 5%;
cursor: pointer;
opacity: 0;
/* pointer-events: none; */
}
.wrapper nav .close_bar div::before, .wrapper nav .close_bar div::after {
content: '';
position: absolute;
width: 30px;
height: 4px;
background-color: #000000;
cursor: pointer;
}
.wrapper nav .close_bar div::before {
transform: rotate(-45deg);
cursor: pointer;
}
.wrapper nav .close_bar div::after {
transform: rotate(45deg);
cursor: pointer;
}
.bar {
cursor: pointer;
position: absolute;
top: 5%;
right: 5%;
width: 30px;
height: 20px;
}
.humbar {
width: 30px;
height: 4px;
background: #fff;
}
.humbar::before, .humbar::after {
content: '';
position: absolute;
width: 30px;
height: 4px;
background: #fff;
}
.humbar::before {
margin-top: 9px;
}
.humbar::after {
margin-top: 18px;
}
```
# scrollmagic
```htmlmixed=
<script>
//設定全域場景
var controller = new ScrollMagic.Controller();
// var tm = TweenMax.to('.mv01' , 1 , {x: 400});
var tlm = new TimelineMax();
tlm.to('.mv01' , 1 , {x: 100}).to('.mv01' , 1, {y: 200}).to('.mv01', 1, {rotation : 360})
//第一個觸發事件
new ScrollMagic.Scene({
triggerElement : '#trigger01',
offset: 0,//觸發點位址 改綠指標(單位px)
triggerHook : 0.5, //瀏覽器指標位址 改藍色指標 0~1
duration: '100%' //單位是px or % 動畫執行的範圍
}).setTween(tlm).addIndicators().addTo(controller);
</script>
```
```css=
//斷點管理
$desktop : 1200px;
$medium : 721px;
$small : 467px;
//rwd
@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;
}
}
}
@include rwd(medium) {
//平板
h1 {
font-size: 20px;
}
}
```
### rwd each
```css=
// rwd each
$breakpoint_each :(
'x-small' : 464px,
'small' : 720px,
'medium' : 996px,
'large' : 1200px,
'x-large' : 1920px,
);
@mixin respond($rwd , $style:all) {
@each $break,$val in $breakpoint_each {
@if $rwd == $break {
@media #{$style} and (min-width: $val) {
@content;
}
}
}
}
@include respond(x-small) {
h3 {
font-size: 30px;
}
}
```
## 安裝bootstrap sass
`npm install bootstrap-sass --save`
- path
`@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap';`
- 變數
`node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss`
- 組件
`node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss`
## neat grid system
- https://neat.bourbon.io/
## 安裝
`npm install --save bourbon-neat`
```scss=
@import '../node_modules/bourbon-neat/core/neat' ;
body {
margin: 0;
padding: 0;
color: #f0f0f0;}
section {
width: 100vw;
height: 100vh;
}
.red {
background-color: #eb0047;
}
.blue {
background-color: blue;
}
.h100 {
height: 100vh;
}
.wrapper_12 {
@include grid-container;
max-width: 1200px;
width: 100%;
margin: 0 auto;
.sidebar {
@include grid-column(2);
@extend .red ;
}
.content {
@include grid-column(8);
@extend .red ;
}
.menu {
@include grid-column(2);
@extend .red ;
}
}
```
```htmlembedded=
<body>
<div class="wrapper_12">
<div class="sidebar h100"></div>
<div class="content h100"></div>
<div class="menu h100"></div>
</div>
</body>
```
### 12 col
```scss=
$setting : (
gutter : 10px,
direction : ltr, // rtl
);
$setting_medium :(
media : 'all and (max-width: 996px)'
);
$setting_small :(
media : 'all and (max-width: 721px)'
);
.wrapper_all_12 {
@include grid-container;
.col_1 {
@include grid-column(1 , $setting);
@extend .blue ;
height: 100vh;
// 平板
@include grid-media($setting_medium){
@include grid-column(3);
}
//手機
@include grid-media($setting_small){
@include grid-column(12);
}
}
}
```
```htmlmixed=
<div class="wrapper_all_12">
<div class="col_1">col</div>
<div class="col_1">col</div>
<div class="col_1">col</div>
<div class="col_1">col</div>
<div class="col_1">col</div>
<div class="col_1">col</div>
<div class="col_1">col</div>
<div class="col_1">col</div>
<div class="col_1">col</div>
<div class="col_1">col</div>
<div class="col_1">col</div>
<div class="col_1">col</div>
</div>
```
Sign in with Wallet
Connect another wallet