iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

1 Like 1 留言 46623 瀏覽

鐵人賽 Modern Web

30天學習30套前端技術(2018年) 系列第 35 篇

技術 [十分鐘學習] Videos.js - HTML5影片播放器

Video.js是隨著HTML5的來襲所打造的媒體播放器，支援HTML5和Flash影片，類似Youtube或Vimeo的插件，支援桌上型和行動裝置，這個專案...

mfhsueh ‧ 2018-01-23

1 Like 1 留言 23462 瀏覽

鐵人賽 Modern Web

30天學習30套前端技術(2018年) 系列第 34 篇

技術 [十分鐘學習] three.js - 動畫繪製評價最高的神器

易於使用且輕量級3D函式庫，提供canvas、svg、CSS3D和WebGL渲染器 GitHub Star: 38,000Javascripting Ove...

mfhsueh ‧ 2018-01-22

0 Like 0 留言 21572 瀏覽

鐵人賽 Modern Web

30天學習30套前端技術(2018年) 系列第 33 篇

技術 [十分鐘學習] Slidebars - 簡易導入側欄選單

Slidebars是一套jQuery框架，提供網站或網站應用程式側欄選單 GitHub Star: 1,400Javascripting Overall:...

mfhsueh ‧ 2018-01-21

0 Like 0 留言 22995 瀏覽

鐵人賽 Modern Web

30天學習30套前端技術(2018年) 系列第 32 篇

技術 [十分鐘學習] Masonry - 自動排序Layout

Masonry常用於優化垂直可用位置來放置物件，你在網路上經常看到他 GitHub Star: 12,000Javascripting Overall: 78...

mfhsueh ‧ 2018-01-20

4 Like 0 留言 80852 瀏覽

達標好文技術怎麼把「滾動條」隱藏？

問題釐清什麼是「滾動條」？滾動條指的是下圖右側被紅線框起來的部分：只要網頁內容大於視窗，滾動條就會出現。一般來說，只要不是body層次的滾動條，那用ov...

Yeefun ‧ 2018-01-18

0 Like 0 留言 22341 瀏覽

鐵人賽 Modern Web

30天學習30套前端技術(2018年) 系列第 31 篇

技術 [十分鐘學習] Tabslet - 頁籤

一套用於頁籤的jQuery套件，輕量級且操作容易 GitHub Star: 550Javascripting Overall: 33%瀏覽器: Chrome、...

mfhsueh ‧ 2018-01-19

0 Like 0 留言 23019 瀏覽

鐵人賽 Modern Web DAY 30

30天學習30套前端技術(2018年) 系列第 30 篇

技術 [十分鐘學習] lightgallery.js - 燈箱

一套彈性高、模組化且響應式的燈箱jQuery套件 GitHub Star: 3,000Javascripting Overall: 72%瀏覽器: Chro...

mfhsueh ‧ 2018-01-18

0 Like 0 留言 8548 瀏覽

鐵人賽 Modern Web DAY 29

30天學習30套前端技術(2018年) 系列第 29 篇

技術 [十分鐘學習] Algolia Places - 強化地址輸入欄位

Algolia Places為您的網站提供一個快速、簡單的方式，自動化產生地址建議列表的JavaScript函式庫 GitHub Star: 4,200Ja...

mfhsueh ‧ 2018-01-17

0 Like 0 留言 6890 瀏覽

鐵人賽 Modern Web DAY 28

30天學習30套前端技術(2018年) 系列第 28 篇

技術 [十分鐘學習] Muuri - 網站Layout大躍進

Muuri是一套JavaScript Layout引擎，讓你可以建構多樣化的Layout，並具有響應式、可排序、可濾性、拖曳移動或動畫效果。 GitHub...

mfhsueh ‧ 2018-01-16

3 Like 2 留言 14977 瀏覽

鐵人賽 Modern Web DAY 25

前端路上那些重要與不重要的小事系列第 25 篇

技術 Day25：小事之 CSS 偽元素與 content Property

W3C 寫道：content 屬性與 ::before 和 ::after 一起使用在文檔中生成內容。因此，使用 ::before 和 ::after 一定要...

小艾 ( Cami ) ‧ 2018-01-13 ‧團隊好想工作室第一屆鐵人賽

3 Like 0 留言 11537 瀏覽

鐵人賽 Modern Web DAY 24

前端路上那些重要與不重要的小事系列第 24 篇

技術 Day24：小事之 CSS 偽類與偽元素

先來個比較表 . 符號 . . 作用偽類 : 不是元素不會出現在 DOM tree 用於定義元素的特殊狀態偽元素 :: 是元素會出現在...

小艾 ( Cami ) ‧ 2018-01-12 ‧團隊好想工作室第一屆鐵人賽

0 Like 1 留言 13712 瀏覽

鐵人賽 Modern Web DAY 27

30天學習30套前端技術(2018年) 系列第 27 篇

技術 [十分鐘學習] Timeline.js - 時間軸

jQuery時間軸套件，使用簡單是它的優點 GitHub Star: 469Javascripting Overall: -瀏覽器: Chrome、Firef...

mfhsueh ‧ 2018-01-15

0 Like 0 留言 3677 瀏覽

鐵人賽 Modern Web DAY 26

30天學習30套前端技術(2018年) 系列第 26 篇

技術 [十分鐘學習] KUTE.js - 做動畫金柑單

一套成熟的原生的JavaScript動畫引擎，提供給網站開發者、設計師、動畫師相當多基本的功能，淺顯易懂的操作方式，跨瀏覽器動畫，擁有著高質量、靈活、專業且輕...

mfhsueh ‧ 2018-01-14

0 Like 0 留言 5373 瀏覽

鐵人賽 Modern Web DAY 25

30天學習30套前端技術(2018年) 系列第 25 篇

技術 [十分鐘學習] iCheck - 免出國，也可以幫C先生和R先生做Face Off

專為jQuery和Zepto做的高彈性客製化checkbox和radio按鈕的套件 GitHub Star: 7,000Javascripting Over...

mfhsueh ‧ 2018-01-13

0 Like 0 留言 6023 瀏覽

鐵人賽 Modern Web DAY 24

30天學習30套前端技術(2018年) 系列第 24 篇

技術 [十分鐘學習] nanoScroller.js - Mac OS風格捲軸

nanoScroller.js是一套用簡單方法做出類似Mac OS X風格捲軸的jQuery套件，儘管目前沒有在持續維護，但使用上相當簡單且支援性高仍然是不錯...

mfhsueh ‧ 2018-01-12

0 Like 0 留言 5631 瀏覽

鐵人賽 Modern Web DAY 23

30天學習30套前端技術(2018年) 系列第 23 篇

技術 [十分鐘學習] Toolbar.js - 工具列

一套產生工具列的jQuery套件 GitHub Star: 2,000Javascripting Overall: 53%License: MIT瀏覽器:...

mfhsueh ‧ 2018-01-11

7 Like 1 留言 62084 瀏覽

鐵人賽 Modern Web DAY 22

前端路上那些重要與不重要的小事系列第 22 篇

達標好文技術 Day22：小事之 Media Query

Media Queries 中文翻為『媒體查詢』，作用在偵測輸出裝置，它是由一個媒體類型（media type）與零到多個用於檢查特定條件的媒體功能（media...

小艾 ( Cami ) ‧ 2018-01-10 ‧團隊好想工作室第一屆鐵人賽

1 Like 0 留言 7555 瀏覽

鐵人賽 Modern Web DAY 22

30天學習30套前端技術(2018年) 系列第 22 篇

技術 [十分鐘學習] iScroll - 3秒變成iPhone，模擬拖曳反彈(bounds)神器

iScroll是一款高性能，檔案小，無相依性且多平台可的JavaScript拖曳滑動 GitHub Star: 10,000Javascripting Ov...

mfhsueh ‧ 2018-01-10

0 Like 0 留言 7853 瀏覽

鐵人賽 Modern Web DAY 21

30天學習30套前端技術(2018年) 系列第 21 篇

技術 [十分鐘學習] Hover.css - 強化系游標移入動畫效果

多項針對連結、按鈕、Logo、SVG和圖片的移入CSS3特效，非常容易導入進去 GitHub Star: 18,000Javascripting Overa...

mfhsueh ‧ 2018-01-09

12 Like 2 留言 46553 瀏覽

鐵人賽 Modern Web DAY 21

前端路上那些重要與不重要的小事系列第 21 篇

達標好文技術 Day21：小事之 CSS Reset 與 CSS normalize

為什麼會想介紹 CSS Reset 與 CSS normalize ？因為在很久很久以前（喂～）。咳！重來。在 W3C 制訂 HTML 與 CSS 規格時，...

小艾 ( Cami ) ‧ 2018-01-09 ‧團隊好想工作室第一屆鐵人賽

11 Like 1 留言 34203 瀏覽

鐵人賽 Modern Web DAY 20

前端路上那些重要與不重要的小事系列第 20 篇

達標好文技術 Day20：小事之 CSS 權重 (css specificity)

在學習 CSS 的時候，一定會先認識什麼是 html element、什麼是 class、什麼是 id，什麼是 css 的 inline 寫法。了解基本的 cs...

小艾 ( Cami ) ‧ 2018-01-08 ‧團隊好想工作室第一屆鐵人賽

2 Like 0 留言 5608 瀏覽

鐵人賽 Modern Web DAY 28

前端新手村系列第 28 篇

技術前端新手村 Animations (上)

「當你迷惘的時候，就回到原點想一想」-中華一番蘭飛鴻前言網頁前端新手村系列文章，宗旨並不在技術本身的教導，重點放在技術與技術之間的脈胳關係。讓零碎的網...

Chris ‧ 2018-01-07

2 Like 0 留言 10478 瀏覽

鐵人賽 Modern Web DAY 20

30天學習30套前端技術(2018年) 系列第 20 篇

技術 [十分鐘學習] Parallax - 某站做出視覺效果竟然是靠它

對任何裝置、相容性高的視差引擎 GitHub Star: 12,400Javascripting Overall: 85%瀏覽器: Chrome、Firef...

mfhsueh ‧ 2018-01-08

1 Like 0 留言 12178 瀏覽

鐵人賽 Modern Web DAY 19

30天學習30套前端技術(2018年) 系列第 19 篇

技術 [十分鐘學習] Fine Uploader - 拖曳上傳

導入拖曳上傳檔案的好選擇，跨瀏覽器、原生JavaScript又加上百分百免費開源，只要載入一隻JavaScript就可以開始運作，不依賴其他程式 GitHu...

mfhsueh ‧ 2018-01-07

2 Like 1 留言 3253 瀏覽

鐵人賽 Modern Web DAY 27

前端新手村系列第 27 篇

技術前端新手村 Animations (前傳)

「當你迷惘的時候，就回到原點想一想」-中華一番蘭飛鴻前言網頁前端新手村系列文章，宗旨並不在技術本身的教導，重點放在技術與技術之間的脈胳關係。讓零碎的網...

Chris ‧ 2018-01-06

3 Like 0 留言 5861 瀏覽

鐵人賽 Modern Web DAY 18

30天學習30套前端技術(2018年) 系列第 18 篇

技術 [十分鐘學習] Intro.js - 網站導覽

優化網站的導覽功能，提供步驟指南給瀏覽者，強化網站的使用體驗 GitHub Star: 16,000Javascripting Overall: 90%瀏覽...

mfhsueh ‧ 2018-01-06

0 Like 0 留言 2519 瀏覽

鐵人賽 Modern Web DAY 15

菜鳥前端奮鬥史(欸? 系列第 15 篇

技術 Day15 「給我好好站在那邊」 ─ position 定位屬性

今天又去補前坑了，希望能把進度追回來..填坑時間！ position ，一種 CSS 屬性 (慣例廢話先前淺白的介紹過了 float(浮動屬性)今次就來介紹另...

阿陰 ‧ 2018-01-03 ‧團隊Lorem100+tab

2 Like 0 留言 8831 瀏覽

鐵人賽 Modern Web DAY 17

30天學習30套前端技術(2018年) 系列第 17 篇

技術 [十分鐘學習] reveal.js - 網頁？簡報？網站也可以二刀流

只要遵循reveal.js的架構，網站也可以無痛變成漂亮簡報 GitHub Star: 38,000Javascripting Overall: 91%瀏覽...

mfhsueh ‧ 2018-01-05

3 Like 0 留言 14202 瀏覽

鐵人賽 Modern Web DAY 26

前端新手村系列第 26 篇

技術前端新手村 @import 開心的結構化 CSS

「當你迷惘的時候，就回到原點想一想」-中華一番蘭飛鴻前言網頁前端新手村系列文章，宗旨並不在技術本身的教導，重點放在技術與技術之間的脈胳關係。讓零碎的網...

Chris ‧ 2018-01-05

1 Like 0 留言 29997 瀏覽

鐵人賽 Modern Web DAY 16

30天學習30套前端技術(2018年) 系列第 16 篇

技術 [十分鐘學習] PDF.js - HTML5 X PDF 聯名

PDF.js是一套由HTML建構的PDF閱讀器，由Mozilla Labs所推廣，目標是建立一個通用的PDF平台 GitHub Star: 20,000Ja...

mfhsueh ‧ 2018-01-04

技術 [十分鐘學習] Videos.js - HTML5影片播放器

技術 [十分鐘學習] three.js - 動畫繪製評價最高的神器

技術 [十分鐘學習] Slidebars - 簡易導入側欄選單

技術 [十分鐘學習] Masonry - 自動排序Layout

達標好文 技術 怎麼把「滾動條」隱藏？

技術 [十分鐘學習] Tabslet - 頁籤

技術 [十分鐘學習] lightgallery.js - 燈箱

技術 [十分鐘學習] Algolia Places - 強化地址輸入欄位

技術 [十分鐘學習] Muuri - 網站Layout大躍進

技術 Day25：小事之 CSS 偽元素 與 content Property

技術 Day24：小事之 CSS 偽類 與 偽元素

技術 [十分鐘學習] Timeline.js - 時間軸

技術 [十分鐘學習] KUTE.js - 做動畫金柑單

技術 [十分鐘學習] iCheck - 免出國，也可以幫C先生和R先生做Face Off

技術 [十分鐘學習] nanoScroller.js - Mac OS風格捲軸

技術 [十分鐘學習] Toolbar.js - 工具列

達標好文 技術 Day22：小事之 Media Query

技術 [十分鐘學習] iScroll - 3秒變成iPhone，模擬拖曳反彈(bounds)神器

技術 [十分鐘學習] Hover.css - 強化系游標移入動畫效果

達標好文 技術 Day21：小事之 CSS Reset 與 CSS normalize

達標好文 技術 Day20：小事之 CSS 權重 (css specificity)

技術 前端新手村 Animations (上)

技術 [十分鐘學習] Parallax - 某站做出視覺效果竟然是靠它

技術 [十分鐘學習] Fine Uploader - 拖曳上傳

技術 前端新手村 Animations (前傳)

技術 [十分鐘學習] Intro.js - 網站導覽

技術 Day15 「給我好好站在那邊」 ─ position 定位屬性

技術 [十分鐘學習] reveal.js - 網頁？簡報？網站也可以二刀流

技術 前端新手村 @import 開心的結構化 CSS

技術 [十分鐘學習] PDF.js - HTML5 X PDF 聯名

標記使用者

達標好文技術怎麼把「滾動條」隱藏？

技術 Day25：小事之 CSS 偽元素與 content Property

技術 Day24：小事之 CSS 偽類與偽元素

達標好文技術 Day22：小事之 Media Query

達標好文技術 Day21：小事之 CSS Reset 與 CSS normalize

達標好文技術 Day20：小事之 CSS 權重 (css specificity)

技術前端新手村 Animations (上)

技術前端新手村 Animations (前傳)

技術前端新手村 @import 開心的結構化 CSS