BounceBar

今天經由 Awwwards 看到「メカクシティアクターズ」公式サイト這個網站,覺得它底下科技感十足的彈跳 bar 還蠻炫目的,就心血來潮做了一個類似的。

JS Bin

其實說穿了很簡單,先把容器.bouncebar.indactor的樣式做好,速度、長度參數用data-*方式傳遞給 javascript 來控制,每一個 frame 指定.indicatorleft屬性即可讓它左右移動。

L00 - Angular.js環境設定

第一件事就先來去Angular.js官網,點擊那顆藍色的Download按鈕。

  1. 點擊之後複製CDN該欄,在head中加一個script標籤。
  2. 安裝完成!

接下來不免俗的來寫一個Hello, World!吧

HTML

  1. 在body內開一個div,內含ng-app屬性
  2. 在ng-app內開一個div,內含ng-controller屬性,並傳入參數myCtrl
  3. 在ng-controller內填上{{ greeting }}

JavaScript

  1. myCtrl函式(同ng-controller參數)傳入$scope
  2. 定義greeting之後,HTML檔案就可以開始顯示greeting的內容

Result

Hello, World!

如果你可以正確顯示Hello, World!的話,恭喜!代表你已經一腳踏入Angular.js的世界了。

首po

Angular.js

這個blog之後會寫一些關於Rails, Angular.js的文章,包含開發時的一些經驗及心得。目前尚處於初學階段的我,希望可以記錄一下曾犯過的錯誤,日後可以給剛入門的朋友們做為一些參考。

另外,這是我用Hexo的首po,也是筆電轉來Ubuntu後所寫的第一篇文章,特此記念一下。