# 各種很厲害的前端元件

## 搜尋前端元件是否有資安風險
https://snyk.io/vuln/
可以將前端元件的名字輸入後查詢是否有資安風險，不少元件可能久未更新，建議定時(有在維護至少一年一次)檢查是否需更新

## SessionStorage的應用 (IE7+)
**每次進站只顯示一次的彈跳視窗**
https://codepen.io/not0000/pen/WMvoNQ
**教學 [HTML5]localStorage與sessionStorage使用**
https://dotblogs.com.tw/blackie1019/2013/07/07/107952

---

## 可以左右拉檢視圖片前後差異的 twentytwenty (IE9+)
https://zurb.com/playground/twentytwenty

---

## 物理運動效果的Dynamics.js (IE10+)
http://dynamicsjs.com/
Dynamics.jsで重力感のあるドロップダウンメニュー
http://www.webopixel.net/javascript/1102.html
可以當作簡易物理引擎

---

## 捲軸類

---

### 進度條 PROGRESS BAR.JS (IE10+)
https://kimmobrunfeldt.github.io/progressbar.js/

---

### 自訂各種樣式的捲軸 scroll bar (IE8+)
支援滑鼠滾輪 鍵盤 觸控
http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.
https://github.com/malihu/malihu-custom-scrollbar-plugin

---

## 表單元件類

---

### jQRangeSlider
可以用拖曳的方式選擇一段範圍 (日期、最大最小值)

- http://ghusse.github.io/jQRangeSlider/
- **Demo**
- https://codepen.io/not0000/pen/yjKmzm?editors=1010

---

## 背景類

---

### 粒子效果背景 canvas-particle.js (IE10+)
https://vincentgarreau.com/particles.js/


- 中國開發者hustcc改的瘦身版，有簡中教學
- https://github.com/hustcc/canvas-nest.js/blob/master/README-zh.md
- 微改造，調成隨機顏色(效能下降一點)
- https://codepen.io/not0000/pen/gzvJJM

[+一些用css做的像是圖片的背景](https://paper.dropbox.com/doc/css-aWjLdhyDnRLZZrnaownEL)
[+背景視差滾動](https://paper.dropbox.com/doc/rv7ibyEoI6iZ4HU3rrgiX)

---

## 視差滾動類

---

### parallax.js
https://github.com/wagerfield/parallax
滑鼠移動的多層視差滾動效果 parallax (IE9+)

---

### skrollr
http://prinzhorn.github.io/skrollr

實際使用的說明請見這篇：背景視差滾動 skrollr
https://hackmd.io/@Not/HJ6De1jRw

---

## Simple iOS Parallax Effect (IE10+)
仿iPhone桌布背景立體效果
滑鼠移動時背景圖會有視差滾動
https://github.com/noobcola/ios-parallax-effect

---

## Animate.css (IE10+) (授權MIT)

用css3整理好的一些動畫
https://daneden.github.io/animate.css/
https://animate.style/

可以搭配js，例如這個範例
https://codepen.io/not0000/pen/BxbYxj

---

## 滾動顯示類的

---

### WOW.js (IE10+)
原本是免費的，後來 matthieua 把授權改成付費，於是 graingert 把付費前的版本fork出來並且用免費的MIT授權，兩個版本可能稍有不塗，但至少有一個免費的選項可以用

免費的
https://wowjs.uk/ by graingert

付費的
http://mynameismatthieu.com/WOW/ by matthieua
以前是 https://www.delac.io/wow/
(一個專案29鎂、無限專案99鎂)


想看授權討論可以看這一串 License wow.js?
https://helperbyte.com/questions/104382/license-wowjs

---

### scrollReveal.js (IE11不支援) (授權MIT)
https://scrollrevealjs.org/
可以寫在html標籤上，決定這個html元素顯示的方式，用法如下

<div data-scroll-reveal="enter left and move 50px over 1.33s"> Foo </div>

---

## 輪播類的

---

### swiper (IE10+)
http://idangero.us/swiper/demos/
有非常多的輪播切換樣式，首選，支援手機的滑動事件

---

### Multi-Style jQuery Image Carousel Plugin - Oka Slider
https://www.jqueryscript.net/slider/Multi-Style-jQuery-Image-Carousel-Plugin-Oka-Slider.html
有輪播的預覽圖，適合展示圖片

---

### 支援IE11的3d輪播套件
https://github.com/lovetingyuan/Carousel

---

### jQuery百葉窗輪播插件Shutter
http://www.jq22.com/jquery-info15127

---

## Lightbox 光箱類

---

### lightbox2
https://lokeshdhakar.com/projects/lightbox2/
lokeshdhakar 做的 lightbox2，有和 jQuery 整合，老牌資深的元件

---

### photoswipe
https://photoswipe.com/
點擊圖片放大到滿版螢幕，特色是支援多種雙指觸控手勢，對手機友善

---

## Markdown Editor
### Markdown語法教學
https://markdown.tw/

---

### SimpleMDE (IE10+)
強大又美觀的markdown編輯器，適合用在後台
https://github.com/sparksuite/simplemde-markdown-editor
程式碼範例
https://codepen.io/not0000/pen/ppMbNJ

---

### showdown.js (IE5+)
比較小的markdown的編譯器，適合用在前台或是單純只要顯示文字的地方
https://github.com/showdownjs/showdown
範例Demo
https://codepen.io/not0000/pen/odEryL

---

## multiselect.js
有左右兩個區塊的多選元件
http://loudev.com/

---

## jQuery quickSearch
快速搜尋表格的內容
https://github.com/DeuxHuitHuit/quicksearch

demo page
https://deuxhuithuit.github.io/quicksearch/r/examples/

---

## 基於Canvas的手繪風格圖形庫 Rough.js (edge+)
https://roughjs.com/

### Examples
https://github.com/rough-stuff/rough/wiki/Examples
因為使用path2d，ie11不支援 https://caniuse.com/#feat=path2d

---

## CssIcon
http://cssicon.space
利用html元素搭配css偽元素做的icon，跟fontawsome相比，多了元素轉換的動畫，能夠塑造更流暢的動畫效果

更多範例請看這個影片
https://www.youtube.com/watch?v=mNKz3devFAw&t=12m46s
<iframe width="560" height="315" src="https://www.youtube.com/embed/mNKz3devFAw?start=766" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

---

## image-zoom

滑鼠游標移上去會有放大鏡效果，顯示的圖可以放較小的解析度增加速度，游標移上去放大的圖可以放較大的圖讓顯示更清楚
http://www.elevateweb.co.uk/image-zoom

https://github.com/elevateweb/elevatezoom


---

## OpenSeadragon
讓圖片可以放大縮小或是全螢幕的套件
支援滑鼠滾輪縮放、拖曳移動顯示位置、 + - 放大縮小、回預設縮放尺寸、全螢幕、縮圖、旋轉圖片、多國語系、

---

## pageguide

用來做網頁內操作說明的套件，可以下一步下一步進行操作
https://tracelytics.github.io/pageguide/

---

## html-docx-js

可以把html轉成docx的工具
範例頁 http://evidenceprime.github.io/html-docx-js/test/sample.html

https://github.com/evidenceprime/html-docx-js

## sheetjs
有分頁籤、可單欄排序、可拖曳調整欄位順序或欄寬，可從excel直接複製資料貼過來
https://oss.sheetjs.com/

---

## Nestable
類Wordpress的樹狀結構選單，可拖曳排序與調整父層子層
http://dbushell.github.io/Nestable

## 火車站翻卡片式數字或文字顯示元件
https://pqina.nl/flip/

###### tags: `前端` `js` `canvas` `css`