0620
===

WordpressCMS內容管理(術)李偉成

---

## 遊戲引擎
3D 引擎 [three.js](https://threejs.org/)

## 介紹套件
[lax.js](https://github.com/alexfoxy/lax.js)

[GreenSock - Tween](https://greensock.com/docs/v3/GSAP/Tween)
[TweenMax中文手册/TweenLite中文手册](https://www.tweenmax.com.cn/api/tweenmax/)
[TweenMax 基础案例](https://www.tweenmax.com.cn/demo/)

[anime.js • JavaScript animation engine](https://animejs.com/)

[Tryit Editor v3.6 - W3Schools](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic)
線上 Html css 編輯頁面

利用 css 做動畫
[CSS Animations](https://www.w3schools.com/css/css3_animations.asp)

[cubic-bezier](https://cubic-bezier.com/#.17,.67,.83,.67)
可以按「copy」貼到 css 上使用

cheat sheet(作弊小抄-其實就是整理好的功能綱要)
[CSS CheatSheet](https://htmlcheatsheet.com/css/)

[JS CheatSheet](https://htmlcheatsheet.com/js/)

[GSAP 3 Cheat Sheet](https://greensock.com/cheatsheet/)

[TweenMax使用方法](https://www.tweenmax.com.cn/start/init/)

[TweenMax Demo](https://www.tweenmax.com.cn/demo/)

## 分組
:::info
分組 F -> 26 29 10 17 28
:::

1.
navbar
footer

2.
首頁
版型 -> 內容頁 列表頁

## TweenMax
[要无限期重复，请使用-1](https://www.tweenmax.com.cn/api/tweenmax/repeat)

Q：你要怎麼知道動畫播完了？
A：[動畫事件 onComplete](https://www.tweenmax.com.cn/api/tweenmax/onComplete)
呼叫的函示不需要括弧

* TweenMax 的 svg 不提供 [CSS + SVG stroke 動態描繪 ](https://wcc723.github.io/svg/2014/06/15/svg-css-stroke-animation/)

[Ironman SVG Line Animation | CSSDeck](http://cssdeck.com/labs/ironman-svg-line-animation)

[SVG 研究之路 (1) - 初探 SVG](https://www.oxxostudio.tw/articles/201406/svg-01-intro.html)

[ SVG D3.js - 淺談 D3.js 的資料處理](https://www.oxxostudio.tw/articles/201411/svg-d3-01-data.html)

[CSS濾鏡效果](http://blog.shihshih.com/css-filter/)

* [運用 clip-path 的純 CSS 形狀變換](https://www.oxxostudio.tw/articles/201503/css-clip-path.html)
* [Clippy — CSS clip-path maker](https://bennettfeely.com/clippy/)

[HTML 5 Canvas vs. SVG](https://www.w3school.com.cn/html/html5_canvas_vs_svg.asp)

## anime.js
[anime.js GitHub](https://github.com/juliangarnier/anime)
[anime.js Documentation](https://animejs.com/documentation/)

## 老師推薦進階課程
[JavaScript 全攻略：克服 JS 的奇怪部分](https://www.udemy.com/course/javascriptjs/)

[播放動畫](https://www.tweenmax.com.cn/api/tweenmax/play())

## 效果展示網頁
[iPhone 11 Pro 網頁捲動停止只更新畫面圖片
](https://www.apple.com/tw/iphone-11-pro/)

## 前端自學途徑
### 面試重點：
* 作品
* 自學能力
* 白板題
* logic
* 程式

### 切版方式 display:flex
[56.图解 Flexbox 2 - 深入理解](https://github.com/ccforward/cc/issues/60)
切版方式　display: grid 特別的有「電腦版表格」

CSS 框架
要先學 SASS
Bootstrap 一定要學
套件的使用

[Alex 宅幹嘛](https://www.youtube.com/channel/UCEL8871qFEakpqYpwBSjHNA)

[Vue 出一個電商網站 ](https://www.udemy.com/course/vue-hexschool/)

[你所不知道的JS：ES6與未來發展](https://www.books.com.tw/products/0010743987)
有六本

[The PHP Framework for Web Artisans](https://laravel.com/)

[ Laravel Skill ](https://laracasts.com/skills/laravel)

[JS30](https://javascript30.com/)

[別猶豫了，來修 CS50 吧！](https://blog.techbridge.cc/2017/11/11/cs50/)
建議考證書

[Google 學習數位行銷新技能](https://learndigital.withgoogle.com/digitalgarage-tw?gclid=EAIaIQobChMIpqn1k4SQ6gIVyFVgCh2tbAj5EAAYASAAEgLqRvD_BwE)

###### tags: `跨裝置企業平台與資料庫整合設計班` `TweenMax`