[collection] JS helpful / interesting plugin, library

[Rplus]

歡迎推薦 實用 / 趣味 的 JS plugin / library~ 記得寫簡述~

討論建議移到 gitter 唷 https://gitter.im/f2etw/developers

[Rplus]

Split.js http://nathancahill.github.io/Split.js/

Lightweight, unopinionated utility for adjustable split views GitHub: https://github.com/nathancahill/Split.js

讓元素可 resize，適用於需分割畫面的情境下 (像是 codepen 需要不同 panel 的狀況) jsfiddle-like demo

目前在極值(minSize)狀況下的計算有些問題 (拖拉至最小寬高時會出現捲軸) codepen-like layout, https://jsbin.com/fulece/edit?css,js,output

layout-helper

screenshot

[Rplus]

Jump.js http://callmecavs.github.io/jump.js/

A small, modern, dependency-free smooth scrolling library. GitHub repo: https://github.com/callmecavs/jump.js

專注 scrollTo 的操作 使用 rAF，要 polyfill 的需要自己加料

有提供 easing 的參數 可自行自訂捲動速度 其它參數可看 github 文件

[Rplus]

Velocity.js http://velocityjs.org/

Accelerated JavaScript animation. github repo: http://github.com/julianshapiro/velocity

主打是取代 jQuery.animate 功能非常的充足， 文件齊全還附 codepen 的 demo

[Shyam-Chen]

WOW.js

GitHub Repo: https://github.com/matthieua/WOW

滾動動畫 類似範例: http://codepen.io/Shyam-Chen/pen/bdXJrG

[Rplus]

Polyfill service http://cdn.polyfill.io/

Automatic polyfill service github: https://github.com/Financial-Times/polyfill-service

利用 user-agent 來判斷該瀏覽器所需要的 polyfill 並直接塞入 script 裡回來~

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

網址參數可見官網文件

[Shyam-Chen]

Jump.js似乎不太好初始化= =

ngAnchorSmoothScroll - Linear

[Rplus]

@Shyam-Chen 不會呀 應該還好吧 http://codepen.io/Rplus/pen/obxvrV?editors=101

另外，討論可以移步到 giiter channel 唷 畢竟 issue 這邊沒有巢狀結構，有時會打架 ：P

[Rplus]

ScrollMagic.js http://ScrollMagic.io

The javascript library for magical scroll interactions. github repo: https://github.com/janpaepke/ScrollMagic

針對各種捲動定位需求的套件

• animate based on scroll position
• sticky elements
• toggle CSS classes
• effortlessly add parallax effects
• infinitely scrolling with ajax load of additional content
• callbacks

[Rplus]

DeviceMock.js https://github.com/rm-labo/devicemock

This can be given Device Frames for any of the elements (div, img , iframe). github repo: https://github.com/rm-labo/devicemock

有不少預設的裝置圖 可以把東西框起來，demo 時不錯用~

[Rplus]

scrollreveal.js https://scrollrevealjs.org/

Easy scroll animations for web and mobile browsers. github repo: https://github.com/jlmakes/scrollreveal.js

可簡易地用 JS 參數調整頁面捲動效果 已內建常見動畫效果 ( 要自己調整也很 OK ~

[Rplus]

voxel.css voxel.css makes 3D rendering easy http://voxelcss.com

A lightweight 3D CSS voxel library. github repo: https://github.com/HunterLarco/voxel.css

搭配 CSS 做出的立體效果的 JS library

[Rplus]

Odometer.js http://github.hubspot.com/odometer/

Smoothly transitions numbers with ease github repo: https://github.com/HubSpot/odometer

里程表數字的轉動效果 適合拿來作隨機轉盤

[Rplus]

howler.js - Modern Web Audio Javascript Library http://howlerjs.com/

Javascript audio library for the modern web. github repo: https://github.com/goldfire/howler.js/

幫忙處理音效播放的 plgin， 跨瀏覽器支援的 audio format 有簡易的 method 幫忙處理 fadein/fadeout/sprite/repeat

可以去官網點點看聲音

實際 demo：客製化的音樂盒 http://codepen.io/woodwork/pen/rxrLqa

[Rplus]

Sticky Elements http://design.iamvdo.me/stickyElements/

Elements that will stick to your mouse github repo: https://github.com/iamvdo/stickyElements

當滑鼠靠近時，會讓網頁元件會黏住滑鼠一段距離

[Rplus]

okayNav jQuery Plugin

The world's okayest responsive navigation GitHub: https://github.com/VPenkov/okayNav

Demo: http://codepen.io/VPenkov/pen/wMZBOg demo gif: https://raw.githubusercontent.com/VPenkov/okayNav/master/demo.gif

解決了桌面、行動裝置的 navigation 換行問題

share by Shiny Chang via: https://www.facebook.com/groups/f2e.tw/permalink/930117673692265/?comment_id=950514651652567

[Rplus]

superplaceholder.js http://kushagragour.in/lab/superplaceholderjs/

Super charge your input placeholders github repo: https://github.com/chinchang/superplaceholder.js

讓 placeholder 動起來！

為 input 的 placeholder 添加打字機的效果 可調整觸發時機

demo: https://jsbin.com/gizixi/edit?html,js,output

[Rplus]

Bespoke.js http://markdalgleish.com/projects/bespoke.js/

DIY Presentation Micro-Framework github repo: https://github.com/bespokejs/bespoke

一款用 JS 做簡報的小型 library 效果有趣、 api 很足，也有多款主題可選擇 可以到它的 README 下方看很多很棒的簡報 https://github.com/bespokejs/bespoke#presentations

[Rplus]

dragula

http://bevacqua.github.io/dragula/

:ok_hand: Drag and drop so simple it hurts github repo: https://github.com/bevacqua/dragula

拖拉元件的 library 因為太好用了，所以熱門 Framework 都有 plugin ~ ( ng, ng2, react ) API 很足，拖拉平順~

[hank5678]

Skrollr

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

Stand-alone parallax scrolling library. github repo: https://github.com/Prinzhorn/skrollr

製作視差滾動效果的library. 特色是簡單易學. 視差滾動效果的邏輯可以直接寫在html元素上. 很快速的就能看到效果.

[Rplus]

interact.js http://interactjs.io/

JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE8+) github repo: https://github.com/taye/interact.js

另一款拖拉、多點觸控的互動 JS library IE8+

[Rplus]

smoothState.js http://smoothstate.com/index.html

Unobtrusive page transitions with jQuery GitHub repo: https://github.com/miguel-perez/smoothState.js

使用 ajax + history.pushState() + fullscreen transition 來讓頁面間的過渡有非常平滑的效果

[Rplus]

Popper.js https://popper.js.org/

A kickass library to manage your poppers github repo: https://github.com/FezVrasta/popper.js/

專門處理 popover/tooltip 的 ibrary 特點在於可控持 popover 的位置，即便在目標移動(捲動/拖曳)之後

[Rplus]

bricklayer.js http://bricklayer.js.org/

Lightweight and independent Pinterest-like cascading grid layout library github repo: https://github.com/ademilter/bricklayer

Masonry-like layout, 瀑布流式的 js lib 示意動畫

[Rplus]

Tribute.js http://zurb.com/playground/tribute

ES6 Native @mentions github repo: https://github.com/zurb/tribute

由 zurb(foundation) 開發的輕量級的標註 library

[Rplus]

scrollbear http://changbenny.github.io/scrollbear/

A modern tool that maintains scroll position when images loaded github repo: https://github.com/changbenny/scrollbear

在載入圖片前後，可以維持捲軸定位，避免了頁面上下跳動 可以直接去看它的 demo 站~ http://changbenny.github.io/scrollbear/demo/static_img.html

社團內的介紹： https://www.facebook.com/groups/f2e.tw/permalink/984074218296610/

[Rplus]

Push.js http://nickersoft.github.io/push.js/

A compact, cross-browser solution for Javascript desktop notifications github repo: https://github.com/Nickersoft/push.js

跨瀏覽器的桌面通知 看 source code 是有處理到 IE9 的狀況

demo: http://nickersoft.github.io/push.js/demo.html

[Rplus]

Holmes.js https://haroen.me/holmes/

Fast and easy searching inside a page GitHub repo: https://github.com/Haroenv/holmes/

Idea by Haroen Viaene & Design by Lucas Bonomi

單頁內查找字串的小套件~

[karote00]

Clusterize.js https://clusterize.js.org/

簡化大量資料顯示的資料量 總比數可能破百萬筆 但實際 render 的資料不到一百筆 對於 browser 的 loading 效能有很顯著的提升

只是要做到 smooth 的話可能要再稍微調整 如果每個資料有需要做 action 的話也得再調整 所以我是自己參考他的方式重寫了一個自己用的小東西 但是方便性就沒他這麼好了

[cheton]

Infinite Tree https://github.com/cheton/infinite-tree

A browser-ready tree library that can efficiently display a large tree with smooth scrolling.

^{Powered by FlatTree and Clusterize.js.}

示意動畫

[Rplus]

microlight.js http://asvd.github.io/microlight/

highlights code in any programming language githuv repo: https://github.com/asvd/microlight

簡易型程式碼 highlight plugin 透過調整文字 text-shadow, opacity, font-style, font-weight 來凸顯程式碼關鍵字 所以它不另外載入 CSS style 來處理樣式 僅強化原本 pre, code 的呈現效果 最後渲染的樣式也不會因為選錯 theme 而跟網站風格不搭唷~

[Rplus]

barba.js http://barbajs.org/

Create badass, fluid and smooth transition between your website's pages. github repo: https://github.com/luruke/barba.js

整合 PJAX、pushState、transition overlay 的 lib

跟上面介紹過的 smoothState.js 有點像

介紹文章： Improving User Flow Through Page Transitions by Luigi De Rosa 2016-07-05 https://www.smashingmagazine.com/2016/07/improving-user-flow-through-page-transitions/

[Rplus]

date-fns https://date-fns.org/

Modern JavaScript date utility library github repo: https://github.com/date-fns/date-fns

它給自己的定位：「date-fns is like lodash for dates.」

生態地位類似另一套更熱門的 lib: moment.js (兩萬多個星星) 不過原作者表示累累求換手~

date-fns 文件可以看 https://date-fns.org/docs/

[Rplus]

obelisk.js

JavaScript library for building pixel isometric graphics with HTML5 canvas GitHub repo: https://github.com/nosir/obelisk.js

canvas 創建 3D 多邊型很有趣的工具~

可以在 CodePen 上看到更多的例子 http://codepen.io/search/pens/?depth=everything&limit=all&order=newest&page=1&q=obelisk.js&show_forks=false

[tedshd]

[名稱] moment [網址] https://github.com/moment

Moment.js

Parse, validate, manipulate, and display dates in JavaScript. github repo: [https://github.com/moment/moment]

Moment Timezone

Parse and display dates in any timezone. github repo: [https://github.com/moment/moment-timezone]

Moment 我都用來作時間格式的轉換顯示

Moment Timezone 必須搭配 Moment.js 但他可以用多種時間格式來搭配 timezone 轉成該 timezone 的時間又可以輸出你想要的格式