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

2017年1月31日 星期二

2017年1月28日 星期六

2017年1月27日 星期五

2017年1月22日 星期日

求婚大作戰



無意間在網路上看到網友在討論這部,上次本來有想看但一開始看到山下的演技就放棄了,這次多看了一點,就欲罷不能地看完了,覺得真的是很棒的一部日劇,怪不得很多人都稱他為神作了。

故事簡單講就是主角在一直喜歡的女主前跟別人結婚那天,因為悔恨而吸引了教堂的精靈幫助他的故事,教堂精靈給他回到過去的機會,「當你有機會重來的時候,你會怎麼去彌補之前曾經後悔的事」,每一集都是主角回去改變了曾經經歷過的回憶,也一步步帶出了主角間的友情、親情和愛情,雖然到最後主角還是不能阻止那個婚禮舉行,但女主角最後還是沒有跟老師結婚(都這麼多年應該沒有爆雷了吧),就跟裡面有人提到的,其實所有的事情都是一點一滴累積下來的必然,很多看起來偶然的事會導致必然的結果。
Read more

2017年1月18日 星期三

2017年1月17日 星期二

Related Posts Plugin for WordPress, Blogger...