網頁設計仿FB時光軸JS網站效果 (支援響應式)

早期FB時光軸介面，算是近幾年來網站UI設計中成功普及應用於網站服務的一項成功設計，雖然這兩年FB已改為雙欄式瀑布流UI，但不可否認之前FB的時光軸設計的確是一項優秀的文章展示模式 ! 今天分享一款CSS3+JS設計的仿時光軸UI效果給大家，本款套件也有採用響應式設計，可完整支援於手機平版界面中，非常適合拿來開發WebView APP，只要你對AJax 以及 PHP 有一定的了解，即可應用於各大CMS系統中，最近Shawn可能也考慮採用本套件來製作SR數位設計的手機版UI界面，如果你對時光軸UI也有興趣，相信本套件一定可以滿足你 !

JS套件名稱：Vertical Timeline

套件下載：http://codyhouse.co/gem/vertical-timeline/

範例展示：http://codyhouse.co/demo/vertical-timeline/index.html

程式簡易使用說明

其實官方網站使用已經解釋得很清楚，每塊時光軸內容是由 <div class="cd-timeline-block">....</div>所構成，只要複製此區塊內容所有相關程式碼，即可快速再產生第二篇內容。

1. <section id="cd-timeline">
   
2.         <div class="cd-timeline-block">
   
3.                 <div class="cd-timeline-img">
   
4.                         <img src="img/cd-icon-picture.svg" alt="Picture">
   
5.                 </div> <!-- cd-timeline-img -->
   
6. 
   
7.                 <div class="cd-timeline-content">
   
8.                         <h2>Title of section 1</h2>
   
9.                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
   
10.                         <a href="#0" class="cd-read-more">Read more</a>
    
11.                         <span class="cd-date">Jan 14</span>
    
12.                 </div> <!-- cd-timeline-content -->
    
13.         </div> <!-- cd-timeline-block -->
    
14. 
    
15.         <div class="cd-timeline-block">
    
16.                 <!-- ... -->
    
17.         </div>
    
18. </section>

複製代碼

有興趣的朋友可以研究一下他的CSS檔，並進行一些適合於自己網站上的調整與修改囉 !

vertical-timeline.zip (59.44 KB, 下載次數: 12)

2015-4-22 22:00 上傳

點擊文件名下載附件
閱讀權限: 10