0618
===

(四)WordpressCMS內容管理(術)李偉成

---

## 套件介紹
* chrome 最近一個很大的改變
旁邊有捲軸 17 px 所以　1980 px 寬度要抓 1903 px
網頁書籤列會消失
除了新開網頁才有書籤列
[Device and Viewport Size In JavaScript](https://ryanve.com/lab/dimensions/)

只學熱門好用就好
找套件邏輯看 GitHub 的星數
[GitHub Search](https://github.com/search?l=JavaScript&q=parallax&type=Repositories)
或去 [CodePen](https://codepen.io/) 找 直接看效果
畫面會好看有兩種原因 css 與 js

* 業界裝套件的主要方法
關鍵字 npm webpack
大公司都用 npm 與 webpack 管理專案

npm [從零開始: 使用NPM套件](https://medium.com/html-test/%E5%BE%9E%E9%9B%B6%E9%96%8B%E5%A7%8B-%E4%BD%BF%E7%94%A8npm%E5%A5%97%E4%BB%B6-317beefdf182)
先安裝 node.js 的安裝包
打 npm -v 可以顯示版本號
dir 顯示目錄內的所有檔案資訊
cd 目錄名稱 進入目錄指令
cd .. 回到上一層

[Babel is a JavaScript compiler.](https://babeljs.io/)
幫你編譯成安全性的版本

輸入 npm install jquery 會有錯誤訊息
正確的方法是先輸入 npm init
會建立 package.json
再輸入 npm install jquery 錯誤就消失了
開啟 vscode 可以在 dist 看到 jQuery 的安裝檔案
npm updatec 會自動更新套件

[npm | build amazing things](https://www.npmjs.com/)

webpack
會把所有東西打包
未來只會整合成一個 JS 與 CSS 並壓縮
可以加快下載速度
檔名有加上 bundle 是壓縮過的 內容是不可讀的

[關於 Webpack，它是什麼？能夠做什麼？為什麼？怎麼做？— freeCodeCamp 的筆記](https://askiebaby.github.io/what-is-webpack/)
[[Day27] 網頁教學開源社群 --- freeCodeCamp](https://ithelp.ithome.com.tw/articles/10209204)
[freeCodeCamp 中文社区: Learn to Code and Help Nonprofits](https://www.freecodecamp.one/)
免費的闖關學習平台
[webpack 新手教學之淺談模組化與 snowpack](https://blog.techbridge.cc/2020/01/22/webpack-%E6%96%B0%E6%89%8B%E6%95%99%E5%AD%B8%E4%B9%8B%E6%B7%BA%E8%AB%87%E6%A8%A1%E7%B5%84%E5%8C%96%E8%88%87-snowpack/)

## AOS 滾動
[AOS - Animate on scroll library](https://github.com/michalsnik/aos)
[[技術分享] 什麼是 HTML 5 中的資料屬性（data-* attribute）](https://pjchender.blogspot.com/2017/01/html-5-data-attribute.html)

<div data-aos="fade-left"></div>

滾動會往右移動
解法是在父層下 overflow:hidden

參數設定通常在初始或物件上面直接新增屬性
特效原理通常是用 CSS 可以覆寫 CSS 達到我們要的功能

1. 引用 JS / CSS （引用放前面 後面放自己的東西）
2. 初始化 / INITIALIZE （初始化通常放在引用後）
3. USAGE / USING / GET START

[一款很好用的頁面滾動元素動畫外掛-AOS.JS](https://www.itread01.com/content/1541300181.html)

FADE 淡入淡出
FLIP 翻轉
SLIDE 滑動
ZOOM 縮放
錨定位
easing動畫

## sass scss less
[Live Sass Compiler](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass)


## parallax.js parallax 背景圖特效
[parallax.js - Matthew Wagerfield](https://matthew.wagerfield.com/parallax/)

Via 經由 透過

[simpleParallax.js](https://simpleparallax.com/)
手機也能用

img -> SEO 優化

* 垂直置中
display: flex;
align-items: center;

或

postion: absolute;
top: -50%;

## parallay 視差滾動
* 最常作用在兩種身上 Scroll 與 mouse position
sccrollTop
[什麼是視差滾動效果(Parallax Scrolling)？帶你看10個最佳應用的網站](https://www.brianwix.com/post/parallax-scrolling)
[Parallax.JS](https://github.com/wagerfield/parallax)

## 線上練習
[JavaScript 30 ](https://javascript30.com/)
[Codecademy](https://www.codecademy.com/)

[[筆記] JS30 系列 Day0 - 課程說明](https://pjchender.blogspot.com/2017/01/js30-day0.html)

###### tags: `跨裝置企業平台與資料庫整合設計班` `npm` `simpleParallax.js` `Parallax.JS` `AOS`