標籤: javascript 頁1
網路資源

Masonry- 瀑布流版面配置的套件

相信對於網站開發有一定經驗的朋友一定對瀑布流 UI 不陌生，其中最有名的以瀑布流 UI 為版面配置的就屬 pintreset，那如果我們要在自己的網站上使用瀑布流 UI 的配置的話，一般我們都是使用 Masonry 這一個 js 的套件。
教學

[fabric.js] 透過 drag and drop API 將圖片拖曳至 fabric.js 的 canvas 後編輯

使用 drag and drop API 將圖片拖曳到 fabric.js 的方法。
教學

[AMP] 圖片輪播功能- amp-carousel

說明在 AMP 內使用圖片輪播功能 amp-carousel 的方法。
教學

[AMP] 使用 amp-bind 來製作切換 class name 的功能

在 AMP 內透過 amp-bind 的方法來切換 class name。
教學

[Laravel] 在 component 中傳遞變數到 js 框架

在 Laravel 的 component 把變數傳遞給 js 框架(例如 Alpine.js)的方法。
教學

Livewire 整合 alpine.js 傳遞資料

說明在 livewire 內整合 alpine.js 傳值的方法。
教學

[FullCalendar] 取得日期點擊的事件與事件點擊的事件

說明透過 FullCalendar 取得日期點擊的事件與事件點擊的事件的方法。
網路資源

FullCalendar- 好用的行事曆套件，可以用來方便設定跟形成相關的互動

如果有需要做行事曆相關的功能，可以參考使用 FullCalendar 這個套件。
教學

透過 fabric.js 建置圖片編輯的 canvas

之前提到可以使用 fabric.js 來製作一些有趣的互動效果，這邊就來說一下該如何設置以及基本使用。
網路資源

使用 html2canvas 簡單且快速的將網頁轉為 canvas 後並透過 canvas2image 下載圖片

如果想要製作將網頁其中一個區塊截圖並儲存圖片的功能，可以參考使用這兩個 plugin，都很簡單使用。
網路資源

Animate On Scroll Library (AOS)- 依據捲動位置製作移入移出效果的套件

Animate On Scroll Library (AOS) 是一個可以根據捲動位置讓網頁上的區塊可以飛入或飛出的套件，用了這個套件可以讓使用者在瀏覽的時候有更生動的互動效果。
網路資源

Day.js- 輕便的 javascript 時間處理函式庫

DAY.JS 是一個輕便的 javascript 處理時間的函式庫，在安裝後就可以利用他寫好的方法來幫我們處理時間相關的內容。
教學

[jQuery] before, after, insertBefore, insertAfter 的用法

在 jQuery 裡 before, after, insertBefore, insertAfter 的用法說明。
網路資源

[jQuery Plugin] 拖曳切換內容- twentytwenty

如果想要做一些可以拖曳切換兩種狀態的樣子，很像開窗戶的感覺可以參考這個 plugin，應該很多人會用來做 before/after 的比對。
教學

使用 Vue.js 透過 Canvas 製作浮水印效果

說明使用 vue.js 搭配 canvas 製作浮水印的方法。
網路資源

list.js- 好用且方便的 js 列表、篩選、排序與分頁套件

list.js 是一個好用且方便的 js 列表、篩選、排序與分頁套件，只要透過簡單的設置就能把功能套上去。
教學

在 Vue.js 裡面繪製 canavs

說明在 vue.js 內使用 canvas 繪製的初步做法。
網路資源

[jQuery plugin] 簡單音效外掛- EasyAudioEffects.js

想要幫你的網站簡單的點綴一點音效的話，可以試一下這個 EasyAudioEffects.js。