---
# System prepended metadata

title: 0618
tags: [npm, simpleParallax.js, AOS, Parallax.JS, 跨裝置企業平台與資料庫整合設計班]

---

0618
===

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


---

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

只學熱門好用就好
找套件邏輯看 GitHub 的星數
![GitHub 查詢看星數](https://i.imgur.com/mpGim2V.png =500x)
[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 Icon](https://d33wubrfki0l68.cloudfront.net/7a197cfe44548cc1a3f581152af70a3051e11671/78df8/img/babel.svg =100x)
[Babel is a JavaScript compiler.](https://babeljs.io/)
幫你編譯成安全性的版本

輸入 npm install jquery 會有錯誤訊息
![](https://i.imgur.com/qmVCD1o.png=500x)
正確的方法是先輸入 npm init
![](https://i.imgur.com/8elwChX.png =500x)
會建立 package.json
再輸入  npm install jquery 錯誤就消失了
![](https://i.imgur.com/9ylQzpP.png)
開啟 vscode 可以在 dist 看到 jQuery 的安裝檔案
![](https://i.imgur.com/IqqU1qE.png =300x)
![](https://i.imgur.com/qI8xOBZ.png)
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)
```htmlmixed=
<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)

![SASS Vs. SCSS Vs. CSS](https://cdn-images-1.medium.com/max/1600/1*r7m8ZNvhIboyfsmlIdv9bw.png)
![SCSS Vs. CSS](https://i.morioh.com/2019/12/07/dfe65c53c830.jpg)

## 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`