文章目錄
網頁設計師切版套用網站JS互動特效
網頁設計師前置作業可分成三個樓層平面視覺能力、切版能力、前端資料串接能力，當然越往後面越偏向工程師！平面視覺就像傳統的名片、海報設計編排實力，只是一般平面設計師不懂網頁RWD格式，而網頁設計師在設計時就清楚明白網站架構，按照網站RWD架構原理設計。
切版能力，時常提及的的DIV+CSS切版能力，不同於一般網頁設計師，需要具備有初級程式結構思維，CSS就是將圖片轉化為層級資訊的編排，除了可以讓SEO機器易讀易懂，也是銜接程式串接的必備工作，許多平面設計師的切版能力是有限的，更專業的切版者會套用JS互動外掛。完美的互動展示，就是切版能力的提升。這個頁面的「捲軸動畫」外掛就是展示互動的基礎！
前端資料串接能力，偏向前端工程師，但必須先切版，才能套用！
從尋找互動JS外掛到創造外掛 – 改造視覺動態JS
親自實踐改造onScroll的JS外掛 – 實踐需求、完全客製
改造JS外掛的源起
很久之前就買過一款onScroll外掛，但對方已經停止更新非常久，這外掛是依附Jquery設計，只有進場、沒有退場，也沒有中間停頓過程的特效…我將這款外掛包重新升級，並且從依附Jquery運作改成原生即可使用。我刻意結合animate.style設計一款原生型的JS onScroll外掛。
此篇文章只是鼓勵你自己可以動手製作專屬於你需求的外掛。有了AI很多事情變得很方便。
以前上過網頁動畫課程，但上完還是腦袋一片空白，還是在尋找外掛直接套用，現在可以我們可以自己創造外掛使用，你可以完全根據需求打造專屬外掛，就像animate.style，沒有懸浮功能，我就增加了懸浮功能，事後如果有不足的也能隨時擴充。
在頁面中放置各類動畫特效以後再也不困難，靠自己寫不如跟AI共同合作，打造出更多好用的外掛包。
改造外掛解決的問題
- 不存在的外掛你可以自創
- 多種外掛整合成一個外掛
- 根據個人使用習慣創造專屬於自己的外掛
自創onScroll動態外掛操作影片展示
整合自製網頁編輯器
自製外掛以後，我們可以在製作一個已經設計完成的網頁工具，協助我們套用onScroll動畫，透過「所見即所得」的編輯器能力，做出你要的網頁工具。
以下也是Raina生成出來的網頁應用程式工具，當然這只是結合onScroll外掛的即時編輯器。Raina開發非常多編輯器應用工具，針對不同需求領域而開發。
AI應用程式工具開發要點
- AI的應用程式一次只做一件事
- 目的清楚，知道要產生什麼結果
- 加速原本的工作效率
