數字翻轉計數器

jQuery

數字翻轉計數器 使用簡單的 JavaScript 與 SCSS 實作數字翻轉計數器，藉由設定每個計數器元素的 class 來達成不同數字的顯示，分別以 n0~n9 的 class 來設定子元素 top 的位置。GitHub 內的關鍵 css 與 JavaScript 分別在這裡和這裡，以下依照步驟配合圖片講解一下！ 首先建立要用的 HTML 結構，基本上就是 span 代表一個…

2016.06.12

瀏覽器 Console 上畫 QR Code

Google ChromeJavaScript

瀏覽器 Console 上畫 QR Code 來用瀏覽器除錯器畫一個屬於個人的彩蛋吧！使用瀏覽器 Console.log 的功能，再利用 CSS 語法調整樣式，製作有趣的個人彩蛋，本次使用 QRCode 當作實作範例，大家也可以改成自己的喲！Painting QR Code on the browser Console. 這是個無聊靈機一動的小作！大家應該都有打開 Facebook 網頁的 C…

2016.06.04

2016 六房媽祖過爐 GPS 系統

Google MapsGPS六房媽

2016 六房媽祖過爐 GPS 系統 雲林六房媽一年一度過爐活動今年也與我的 GPS 系統結合，六房媽在幾年前早已經有在做繞境定位，剛好有朋友介紹讓我與神之路關的開發團隊認識，所以這次的六房媽過爐活動就與林啟元先生合作開發，首次與 ASP.NET 後端結合。 此次的合作開發是採用前後端分離的做法，這次協助的部分主要是針對前…

2016.05.01

2016 北港迎媽祖

Google MapsGPS北港朝天宮媽祖

2016 北港迎媽祖 北港迎媽祖，這是個為我的家鄉的活動製作網站，幾本上是屬於義務性幫忙、沒盈利的非官方服務。每年我都會在 北港農曆三月十九迎媽祖 前數個月開始製作，目前為止這網站我算是不斷自我突破吧！整體從 設計、後端、系統、切版、攝影、上稿，基本上都是我嘗試一個人完成！以下主要分享一下設計、前端、後端以…

2016.04.25

2016 大庄媽 GPS 系統

Google MapsGPS大庄媽媽祖

2016 大庄媽 GPS 系統 大庄媽組南下北港進香的活動今年也特別的加入了 GPS 定位的功能，而這次協同開發的夥伴是大庄媽交流協會的楊協達先生，但其實架構與白沙屯南下進香的 GPS系統略有所不同！ 這個專案我主要協助製作 HTML、JavaScript、CSS 的撰寫，其中包含了版型、Google Maps JavaScript API 的串接，專案這次使用 G…

2016.04.02

嘉豪光學

接案PHPJavaScript

嘉豪光學 這是一個前、後端技術的外包案實作，其網站名稱為嘉豪光學，嘉豪光學有限公司為多國外知名品牌之總代理。於2007成立至今，憑著經營團隊專業的知識領域和熱誠的服務態度，產品銷售已涵蓋全台眼鏡商圈。 專案為宙思設計的網站專案，專案除了設計與聯絡外，從前端刻板、後端資料庫、系統架設皆是獨立完成。網站框架…

2016.03.21

VG 鉅臣

接案JavaScript

VG 鉅臣 這是一個前端技術的外包案實作，其網站名稱為 VG 鉅臣，此專案主要負責前端刻板部份，版型設計則由宙思設計所製作。 此專案為純前端的實作，有鑒於網站架構的特性，於是將網頁命名以中文顯示，一方面增強 SEO，另一方面方便素材人員配合更換素材(命名規則)。而網站前台可以發現都有固定幾項規則，所以就使用 jQuer…

2016.03.18

2016 白沙屯媽祖南下進香 GPS 系統

Google MapsGPS白沙屯媽祖

2016 白沙屯媽祖南下進香 GPS 系統 白沙屯媽祖南下北港遶境 GPS 定位實作，是我目前 Google Analytics(GA) 即時流量 最高也是 Server Loading 最大的任務之一，實作過成功嘗試多樣的系統架構，以達成最低成本、最高效率的方式服務信徒。 此項任務難點會在活動期間會有大量的 Request 打進 Server，所以勢必會對伺服器造成…

2016.03.15

實作 jQuery ScrollView 套件

jQueryjQuery UIScrollView

實作 jQuery ScrollView 套件 為了讓手機水平瀏覽圖片的操作更像 App 的介面，所以利用 JavaScript、jQuery、jQuery-UI、jQuery.UI.Touch-Punch 等套件，實作 ScrollView 的水平滑動效果。 功能主要是依賴 jQuery 與 jquery-UI 實作，再利用 jQuery-UI 的 Draggable 實作拖曳的效果，則 Draggable 需要設定 axis: 'x' 來固…

2016.03.14

宙思設計

PHPRWD

宙思設計 宙思設計團隊，是一家服務廣泛，凡舉網頁、平面、包裝、印刷及攝影皆可製作的設計公司。也是我長期配合的接案公司，我多數都是承接宙思的前端切版、JavaScript 功能、後端 php 上稿、套版、系統架設的部分，而宙思設計主要著力於“設計”的產出，如果各位有相關需求其實可以與其洽詢！ 關於宙思設計官網的架設開發…

2016.01.11

雙北市行政區域範圍座標

Google MapsGitHub

雙北市行政區域範圍座標 雙北市行政區域範圍座標，藉由大家一起來維護劃分出雙北市甚至於全台灣的行政區域、鄉鎮區域的範圍座標。 會實作出此專案主要目的是為了取得雙北市行政區域範圍座標，但因為 Google Maps JavaScript API 找不到可以取得行政區的範圍座標，故才自己畫完雙北市的範圍座標，並且藉此分享出來給大家使…

2015.12.09

億進建築經理

接案

億進建築經理 這是一個前端技術的外包案實作，其網站名稱為億進建築經理，此專案主要負責前端部份，版型設計則由宙思設計所製作。 此專案因為只負責前端部分的切版，所以就使用了 OAF2E version 1.8 框架，架構中主要是使用 Compass 來編譯 SCSS，而 JavaScript 函式庫則是使用 jQuery，網頁首頁的 Banner 輪播主要就是利…

2015.12.07

1234