# 視差滾動研究

## 覺得需要的能力(想到就補)

PS 切版

Layout 切版
* SCSS
* BS?

smooth scroll

Parallax Scrolling 視差滾動
* CSS + JS
* background-attachment: fixed
* onscroll + positionY
* 純 CSS
* transform-style: preserve-3d
* translateZ

Vue 控制
* position-y

EJS
* 若多頁排版，可能會用到 EJS

Lazy Loading 惰性加載圖片
* onscroll
* Intersection Observer API

建構方案(gulp? webpack?)
* 先用 webpack 處理相依模組，再用 gulp bundle 在一起?
* 直接用 webpack 先處理相依模組，再 bundle 在一起？

## 接案前研究規劃

範例
* [Florian Monfrini — Catalogue 018°019](https://florianmonfrini.com/)
* [CarePod | The Safest Way To Fly Your Pets | Pet Air Travel Solutions](https://care-pod.com/)
* 目前官網的樣子

### 一、目前觀念

Parallax Scrolling
* `background-attachment: fixed;` 固定背景
* `background-position-y `
* 監測 scroll 事件，改變前景後景 y 位置，改變速率不同
* 或新的監控方式比較省資源(忘了)

### 二、複習六角的視差滾動影片，先做一個簡單版本，熟用原生用法

RWD課程彩蛋 jQuery
* [一變應萬變的響應式網頁設計 | Udemy](https://www.udemy.com/course/responsive/learn/lecture/6412214#overview)

gulp 處理

平滑滾動-套件 7kb
* [cferdinandi/smooth-scroll: A lightweight script to animate scrolling to anchor links.](https://github.com/cferdinandi/smooth-scroll)
平滑滾動-原生
* [Vanilla JavaScript Smooth Scroll | Perishable Press](https://perishablepress.com/vanilla-javascript-scroll-anchor/)
* [Smooth Scroll with vanilla javascript - Gurjit Singh - Medium](https://medium.com/@gurjitmehta/smooth-scroll-with-javascript-571283e9a3cd)
平滑滾動-CSS
* [Smooth Scrolling | CSS-Tricks](https://css-tricks.com/snippets/jquery/smooth-scrolling/)
* [[譯] scroll-behavior 滑順的捲動效果 | DEVLOG of andyyou](https://andyyou.github.io/2016/06/01/smooth-page-scroll/)
平滑滾動-jQuery 87kb

Vue

精神時光屋第八週
* [第八週 視差滾動 範例 - YouTube](https://www.youtube.com/watch?v=xViDpVyIBoU)
* [廖洧杰 - 【第八週 - parallax scrolling】 觀看設計稿 >> http://bit.ly/2uX1m47...](https://www.facebook.com/photo.php?fbid=2007505959269039&set=gm.210968242937648&type=3&theater&ifg=1)
* [The F2E - 前端修練精神時光屋](https://www.facebook.com/groups/173311386703334/permalink/213702722664200/)
* [The F2E - 前端修練精神時光屋](https://www.facebook.com/groups/173311386703334/permalink/213853355982470/)

### 三、再找幾個教學深化認知，做複雜版本

#### 3.1 輔以 JS 變化 positionY
`background-attachment: fixed;`
* [簡單的視差滾動](https://ithelp.ithome.com.tw/articles/10197613)
* [CSS 視差滾動 (Parallax Scrolling) 範例](https://codepen.io/lhuang23/pen/YpbQMP)

#### 3.2 純 CSS 實現方式
transform-style: preserve-3d;
transform: translate3d
* [滾動視差？CSS 不在話下 - 掘金](https://juejin.im/post/5b6d0756e51d4562b31ad23c)
* [Pure CSS Parallax Scrolling | No JavaScript | HTML & CSS - YouTube](https://www.youtube.com/watch?v=6CQ7DYni7Bg)

#### 3.- 其他
* [也來寫點程式碼 - 習作 1-1 純 CSS 視差滾動設計 (Pure CSS Parallax design)](https://neversaycoding.tumblr.com/post/95265641412/習作-1-1-純css視差滾動設計pure-css-parallax-design)
* [小 tip: 純 CSS 實現視差滾動效果 « 張鑫旭 - 鑫空間 - 鑫生活](https://www.zhangxinxu.com/wordpress/2015/03/css-only-parallax-effect/)
* [(240) parallax scrolling - YouTube](https://www.youtube.com/results?search_query=parallax+scrolling)

#### 3.- 插件
* [10 個優秀視差滾動插件_Parallax Scrolling, Plus_w3cplus](https://www.w3cplus.com/source/10-best-Parallax-Scrolling-plugin.html)

#### 3.- jQuery
* [Wedding/index.js at master · Misty1636/Wedding](https://github.com/Misty1636/Wedding/blob/master/js/index.js)
* [World-Travel/Products.vue at master · Misty1636/World-Travel](https://github.com/Misty1636/World-Travel/blob/master/src/views/Products.vue)

### 四、找 vue + 視差滾動，擬作參考範例

* [VUE 筆記：視差滾動（Parallax Scrolling）的基本實現 - 簡書](https://www.jianshu.com/p/ea8867b25fe5)

插件
* [dujuncheng/vue-parallax: 基于vue构建的视差滚动组件](https://github.com/dujuncheng/vue-parallax)
* [vue-parallax 快速 60fps 視差滾動效果組件 - JavaScript 開發社區 | CTOLib 碼庫](https://www.ctolib.com/apertureless-vue-parallax.html)

### 其他、可能需要技能
圖片延遲讀取

vue + 視差滾動

onscroll 效能
* [如何不择手段提升scroll事件的性能 - 知乎](https://zhuanlan.zhihu.com/p/30078937)
* [Day19 JS Scroll 實作學習](https://ithelp.ithome.com.tw/articles/10207679)

IntersectionObserver API
* [Intersection Observer API - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
* [IntersectionObserver API 使用教程 - 阮一峰的網絡日志](http://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html)
* [Intersection Observer vs EventListener Scroll - Cristina Llamas - Medium](https://medium.com/@cristinallamas/intersection-observer-vs-eventlistener-scroll-90aed9dc0e62)
* [Animate on Scroll with Intersection Observer - Mirosław Ciastek - Medium](https://medium.com/@mciastek/animate-on-scroll-with-intersection-observer-ea744cddb876)
* [Day17 探索 Browser API （上）- requestIdleCallback - iT 邦幫忙：：一起幫忙解決難題，拯救 IT 人的一天](https://ithelp.ithome.com.tw/articles/10217280)
* [Day26 前端中的效能優化 - iT 邦幫忙：：一起幫忙解決難題，拯救 IT 人的一天](https://ithelp.ithome.com.tw/articles/10222496)

取得元素座標
* [使用 Javascript 取得元素的座標 | DEVLOG of andyyou](https://andyyou.github.io/2015/04/07/get-an-element-s-position-by-js/)

function getPosition (element) {
  var x = 0;
  var y = 0;
  // 搭配上面的示意圖可比較輕鬆理解為何要這麼計算
  while ( element ) {
    x += element.offsetLeft - element.scrollLeft + element.clientLeft;
    y += element.offsetTop - element.scrollLeft + element.clientTop;
    // 這邊有個重點，當父元素被下了 position 屬性之後他就會變成 offsetParent，所以這邊我們用迴圈不斷往上累加。
    element = element.offsetParent;
  }

  return { x: x, y: y };
}

* [Basic offset function, replacing jQuery's offset.](https://gist.github.com/aderaaij/89547e34617b95ac29d1)
* [Jquery 中用 offset（）.top 和 offsetTop 的比較 - 防空洞 123 - 博客園](https://www.cnblogs.com/as3lib/p/6789647.html)

聊聊 getBoundingClientRect 和 getClientRects 方法
* [聊聊 getBoundingClientRect 和 getClientRects 方法 - 知乎](https://zhuanlan.zhihu.com/p/38568124)
* [你真的会用getBoundingClientRect吗 - 前端 - 掘金](https://juejin.im/entry/59c1fd23f265da06594316a9)

jQuery 替代
* [You Might Not Need jQuery](http://youmightnotneedjquery.com/)
* [chokcoco/jQuery-: jQuery 源碼解析](https://github.com/chokcoco/jQuery-)
* [What are some alternatives to jquery? : webdev](https://www.reddit.com/r/webdev/comments/a78xy5/what_are_some_alternatives_to_jquery/)

getComputedStyle
* [獲取元素 CSS 值之 getComputedStyle 方法熟悉 « 張鑫旭 - 鑫空間 - 鑫生活](https://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/)
* [前端學習筆記 style，currentStyle，getComputedStyle 的用法與區別 | 程式前沿](https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/265562/)
* [【CSS 進階】原生 JS getComputedStyle 等方法解析 - ChokCoco - 博客園](https://www.cnblogs.com/coco1s/p/5210667.html)
* [getComputedStyle 基礎語法 JavaScript 前端・404k 的前后端日志](http://blog.404mzk.com/getcomputedstyle.html)

### 其他、參考範例
* [Smooth Scrolling Image Effects | Codrops](https://tympanus.net/codrops/2019/07/23/smooth-scrolling-image-effects/)
* [指定位置縮放 navbar 使用 jQuery 打造互動性網頁動畫效果 | Udemy](https://www.udemy.com/course/jquery-learning/learn/lecture/5237652#questions/7318788)
* [滾動順暢](https://www.facebook.com/groups/f2e.tw/permalink/2214825421888144/)
* [jquery/jquery-mousewheel: A jQuery plugin that adds cross-browser mouse wheel support.](https://github.com/jquery/jquery-mousewheel)
* 全屏滾動
* [使用 jQuery 打造互動性網頁動畫效果 | Udemy](https://www.udemy.com/jquery-learning/learn/lecture/5190568#questions/7267300)
* [fullPage.js](https://codepen.io/TzuHui/pen/orvYOX?editors=0010)
* [fullPage.js | One Page Scroll sections Site Plugin](https://alvarotrigo.com/fullPage/#)
* [[十分鐘學習] fullPage.js - 全頁式導覽](https://ithelp.ithome.com.tw/articles/10197764)
* [jQuery 全屏滾動插件 fullPage.js_dowebok](http://www.dowebok.com/77.html)
* [使用 fullPage.js 設計單頁式選單滑動區塊的全屏滾動網站 | ucamc](http://www.ucamc.com/e-learning/javascript/298-fullpage-js單頁式選單滑動區塊的全屏滾動網站.html)
* [無需 JavaScript 實現的自動滾動視差效果 | InspireGate 派克空間](http://inspiregate.com/programming/html-css/185-achieved-automatically-without-the-need-javascript-parallax-scrolling-effect.html)
* [[十分鐘學習] Parallax - 某站做出視覺效果竟然是靠它 - iT 邦幫忙：：一起幫忙解決難題，拯救 IT 人的一天](https://ithelp.ithome.com.tw/articles/10196098)
* [wagerfield/parallax: Parallax Engine that reacts to the orientation of a smart device](https://github.com/wagerfield/parallax)
* [使用 Parallax.js 實現簡單視差效果 | AlloyTeam](http://www.alloyteam.com/2015/09/use-parallax-js-to-implement-simple-parallax-effect/)
* [如何使用 skrollr 做出簡易的 Parallax Scrolling 網頁 (Example)](https://coderwall.com/p/we0ymg/skrollr-parallax-scrolling)

## 起因

哈囉，這邊有個案子，有興趣嗎？

主要是畫面切版 + 視覺動態效果
工時約三週
參考範例：https://florianmonfrini.com/

費用約 4 萬上下，實際金額還在談
是國外的案子，品質會比較要求
你 ok 的話，我會以你作為執行者跟對方談喔

## 詢問

我第一次詢問
> 好
> 老師我有興趣
> 不過我視差滾動沒有很熟，這幾天要回去複習一下
>
> 其他想再問一下的
> 1. 和參考範例一樣，是單頁式的網頁嗎
> 2. 之前看 Ray 的分享，接案形式類似我當開發者，六角當 PM 這樣嗎
> 3. 在開發期間若對於自己需要的技術細節不確定，可以再請教六角嗎（例如，gulp + sass 是否能應付這個專案、…… 之類的問題）

老師回答
> 實際不確認是否為單頁，會在與對方確認
> 因為設計稿還沒出來
> 但是是以形象為主沒錯勒
> 2 是的，也會有 fable 專案人員配合
> 3 我們可以做協助，但不會插手
>
> 主要還是給你們練習
> 這案子可以用 vue
> 不確定是否接受 jquery

我再次追問
> 好的～謝謝老師回覆
>
> 不過老師提到 Vue 了，就還是問一下
> 1. 若用 Vue 的話，就是最後 build 出編譯後的 dist 資料夾，然後對方會再拿這個資料夾的檔案去上在他們的網站伺服器上？
> 2. seo 的部份，記得單純使用 Vue 的話，SEO 跟靜態網站比起來沒這麼好。在這個專案中需要特別處理這件事情嗎，還是用像六角 Vue 電商那樣的開發流程就可以了（vue-cli）

老師回答
> Vue 也可以不搭配 cli 勒
> 如果可以的話
> 這幾天可以先練習原生寫視差滾動

我總結
> 喔喔好的
>
> 1. 突然忘記可以用 cdn 的方式引入 Vue 了 orz。這樣在小型專案中就能用 cdn 引入 vue、並直接在 HTML 上使用 Vue 的語法，這樣 SEO 就不太會受影響了（因為 google 爬蟲還是能看到 HTML 的內容）
> 2. 好，這幾天我先複習先前的視差滾動課程，再練習看看原生視差滾動的寫法～