[CSS3] How to make marquee by CSS3 animation

  這次要來探討如何使用 CSS3的 animation達成跑馬燈效果, 原因是原本的 HTML的 marquee標籤是非標準標籤 (refer from wiki), W3C也不建議使用囉. 所以乾脆自己用 CSS3的動畫效果刻一個.分享出來給大家玩看看.

  主要規格是當我  focus到一個連結後底下的字樣會進行跑馬燈的效果.使用到 CSS3的 animation跟 keyframe來呈現.當然有設定文字呈現最基本的 white-space以及overflow: hidden (這樣才有跑馬燈效果阿) .

Check out this Pen!

  透過 keyframes可以設定在動畫的秒數內文字的位置來做到跑馬燈效果, 算是很彈性的作法!

[JavaScript] Closure 概念

  最近跟 Vexed在討論 JavaScript的 Closure概念, 就參照了他的投影片加上自己參考 Nicholas C. Zakas的 Professional JavaScript for Web Developers以及 wiki當中的 Closure概念.自己試著講解了一次什麼是 JavaScript Closure.


  其實 Closure的定義就是一個方法能夠存取到非同一個scope的方法的變數. Closure在很多語言都有使用到, 而在 JavaScript當中是透過 Scope Chain去達成.

  下面這個例子很有趣, 很明顯的表達出 Scope Chain是 Lexical 分析時候決定, 而非 Execution time決定.

var arg = 1;   
 function funcTest() {   
      alert(arg);   
      var arg = 2;   
 }   

 funcTest(); 
 function funcTest2() {   
      alert(arg);   
      //var arg = 2;   
 }  
funcTest2();
Check out this Pen!