2017年3月26日 星期日

日本函館・東北之旅 互動地圖

日本函館・東北之旅 互動地圖

上禮拜受邀跟一些部落客還有人氣模特兒一起去日本東北觀光,回來把去玩的照片跟形成整理成互動地圖的形式,左邊是地圖,點上面的點右邊會滑到介紹的部分,右邊則是時間軸的行程,點景點名稱旁的圖示,左邊會移到該處的位置,有興趣可以玩玩看。

日本函館・東北之旅 互動地圖


日本函館・東北之旅 互動地圖

Read more

2017年3月21日 星期二

2017年3月10日 星期五

2017 高校制服大賞開跑

2017 高校制服大賞

忙到沒時間貼的 2017 高校制服大賞,今年開跑囉!

今年分為兩個階段,第一階段為人氣制服星,選出來的制服會成為飲料瓶裝,參賽者有機會成為瓶裝 MD,第二階段為傳統的高校制服大賞,選出來的學校我們會去請全校喝飲料,一起來玩吧!

2017 高校制服大賞2017 高校制服大賞
Read more

2017年3月1日 星期三

用純 CSS 排出瀑布流 UI

瀑布流

以往用瀑布流習慣用 plugin,最近因為專案需求發現要用原本的 plugin 的話會造成很多不必要的瀏覽器負擔,於是就改用純 CSS 來寫,其實只要用 CSS3 的 column 就可以了,簡單的說就是可以指定一個 DOM 裡面要分割成幾欄,就會自動幫你排列,以前要排這種版面很麻煩的,有了這個後就變得很簡單了,有興趣可以看一下說明文件

所以使用 column 只要依照以前排瀑布流類似的結構,但只要指定要分割成幾欄,就會自動產生瀑布流的 UI 了,還可以寫 RWD 在不同的解析度改變欄位數,有興趣可以試試看。

Read more

2017年2月27日 星期一

[NXEDGE STYLE] 夜鶯

[NXEDGE STYLE] Nightingale

這是小說版「逆襲的夏亞~貝托蒂嘉的子嗣」中夏亞駕駛的機體「夜鶯」,或許很多人玩過機戰會以為這架跟 Hi-ν 鋼彈分別是「沙薩比」跟「 ν 鋼彈」的後繼機,但其實應該算是平行世界的機體,但由於設計的比較帥,所以往往在機戰裡就被拿來當隱藏機體了。


[NXEDGE STYLE] Nightingale[NXEDGE STYLE] Nightingale


這架很有份量,所以價格也比以往又稍微高了一些些。

[NXEDGE STYLE] Nightingale[NXEDGE STYLE] Nightingale[NXEDGE STYLE] Nightingale[NXEDGE STYLE] Nightingale


受限於造型,可動性就不大理想,但造型還是修得很棒。

[NXEDGE STYLE] Nightingale[NXEDGE STYLE] Nightingale[NXEDGE STYLE] Nightingale[NXEDGE STYLE] Nightingale[NXEDGE STYLE] Nightingale

[NXEDGE STYLE] Nightingale[NXEDGE STYLE] Nightingale


跟 Hi-ν 合照,這兩台可以差不多時間出真的是太好了。

[NXEDGE STYLE] Nightingale


Read more

永恆正義無敵鐵金剛45周年經典大展

P1030574

這次的展覽似乎因為授權的關係後來變成免費的,雖然我是不管有沒有收費都會去看,但免費可以參觀真的有種賺到的感覺。這次是展覽開始沒多久就去看了,會拖到現在才整理是這陣子真的太忙了.. 展覽似乎也剩沒多少天,如果到最後都沒有去看的,也可以看我拍的一些照片過乾癮。

P1030575P1030576P1030578
Read more

2017年2月9日 星期四

vivus.js- 讓 SVG 圖變成動畫

最近上課的時候同學問說怎麼樣可以做出線條動畫,稍微查了一下先看到 svg animation,可以把 svg 動畫化,再找下去發現 vivus.js 這個 plugin,直接套用就可以把線條變動畫,真的超方便的。

使用方法一樣把js讀入後,可以用 var myVivus = new Vivus('my-svg-id'); 的方式,選擇要變成動畫的地方再指定 svg 位置就可以把 svg 變成動畫了。

我簡單畫了一張圖使用效果,點圖可以連結到效果網址。



動畫方式分為 Delayed(每一條線稍微延遲)、Sync(每條線同步)、OneByOne(每條線會在前一條跑完後才繼續),加上一些參數設定,就可以快速製作漂亮的 svg 動畫了,更多說明可以看官網文件。

vivus
Read more

2017年2月4日 星期六

2017年2月1日 星期三

[jQuery plugin] 簡單的視差滾動外掛- parallax.js

視差滾動簡單的說就是當使用者在捲動網頁的時候,網頁內的元素會有跟卷軸滾動速度不同步的效果,這個效果大致上是用 js 去控制它移動的速度,而也因為這個效果發展滿久的,所以也有不少好用的 plugin,這回介紹的就是簡單好用的 parallax.js。

外掛網址:
parallax.js
Read more

[jQuery Plugin] 依據捲動位置 highlight 選單- jQuery-One-Page-Nav

有些時候會遇到在單頁會塞不少資訊的狀況,另外會有選單可以切換到每一個區塊,如果需要在按下選單或滾動的時候 highlight 選單目前位置,可以使用這一個 plugin jQuery-One-Page-Nav。

外掛位置:
jQuery-One-Page-Nav

再來只要參考官方給的參考範例修改即可。
Read more
Related Posts Plugin for WordPress, Blogger...