JavaScript >> Javascript 文檔 >  >> Tags >> CSS

時間線組合

Timeline 是一個 jQuery 插件,專門用於顯示按時間順序排列的一系列事件。您可以嵌入各種媒體,包括推文、視頻和地圖,並將它們與日期相關聯。通過一些設計調整,這將使其非常適合展示您的工作和興趣的作品集。

HTML

默認情況下,時間軸帶有淺色主題。它完全可用,在大多數情況下正是您所需要的。但是,對於我們的產品組合,深色設計會更合適,因此我們會根據自己的喜好對其進行定制。

先來看看頁面的基本佈局:

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Timeline Portfolio | Tutorialzine Demo</title>

        <!-- The default timeline stylesheet -->
        <link rel="stylesheet" href="assets/css/timeline.css" />
        <!-- Our customizations to the theme -->
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!-- Google Fonts -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Dancing+Script|Antic+Slab" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

        <div id="timeline">
            <!-- Timeline will generate additional markup here -->
        </div>

        <!-- JavaScript includes - jQuery, turn.js and our own script.js -->
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="assets/js/timeline-min.js"></script>
        <script src="assets/js/script.js"></script>

    </body>
</html>

在 head 部分,我們有插件的樣式表 -timeline.css 和 styles.css,它們將保存我們的自定義。在頁腳中,我們有 jQuery 庫、時間線插件和 script.js 初始化它。

當我們調用插件時,它會在你的頁面上搜索一個ID為timeline的div .在其中,它將插入呈現時間線所需的所有標記:

<div class="container main" id="timeline">
    <div class="feature slider" style="overflow-y: hidden;">
        <div class="slider-container-mask slider-container slider-item-container">

            <!-- The divs below are the events of the timeline -->

            <div class="slider-item content">
                <div class="text container">

                    <h2 class="start">Johnny B Goode</h2>
                    <p><em><span class="c1">Designer</span> &amp; <span class=
                    "c2">Developer</span></em></p>

                </div>

                <div class="media media-wrapper media-container">
                    <!-- Images or other media go here -->
                </div>
            </div>

            <div class="slider-item content content-container">
                <div class="text container">

                    <h2 class="date">March 2009</h2>
                    <h3>My first experiment in time-lapse photography</h3>
                    <p>Nature at its finest in this video.</p>

                </div>

                <div class="media media-wrapper media-container">
                    <!-- Images or other media go here -->
                </div>
            </div>

            <!-- More items go here -->
        </div>

        <!-- Next arrow -->
        <div class="nav-next nav-container">
            <div class="icon"></div>
            <div class="date">March 2010</div>
            <div class="title">Logo Design for a pet shop</div>
        </div>

        <!-- Previous arrow -->
        <div class="nav-previous nav-container">
            <div class="icon"></div>
            <div class="date">July 2009</div>
            <div class="title">Another time-lapse experiment</div>
        </div>
    </div>

    <div class="navigation">

            <!-- The navigation items go here (the tooltips in the bottom)
                one for each of the events -->

            <div class="time">
                <!-- The timeline numbers go here -->
            </div>
        </div>

        <div class="timenav-background">
            <div class="timenav-line" style="left: 633px;"></div>

            <div class="timenav-interval-background top-highlight"></div>
        </div>

        <div class="toolbar" style="top: 27px;">
            <div class="back-home icon" title="Return to Title"></div>
            <div class="zoom-in icon" title="Expand Timeline"></div>
            <div class="zoom-out icon" data-original-title="Contract Timeline"></div>
        </div>
    </div>
</div>

由於我們將修改時間線的 CSS,上面的片段將使您更好地了解自定義。請注意,我們不會從頭開始重新創建插件的樣式表,我們只會覆蓋我們自己的 css 文件中的一些規則。這樣做的好處是使插件的未來更新變得簡單明了,更不用說它會更容易。

僅通過查看標記來編寫 CSS 將是一項艱鉅的任務,因為我們的規則必須優先於 timeline.css 中使用的規則 .幸運的是,有一種更簡單的方法,您將在本教程的 CSS 部分看到。

jQuery

要初始化插件,我們需要在文檔就緒時調用 VMM.Timeline() 方法:

$(function(){

    var timeline = new VMM.Timeline();
    timeline.init("data.json");

});

init 方法採用單個參數 - 數據源。它可以是上面的 json 文件,也可以是 Google 電子表格(讓人想起我們的 Spredsheet Powered FAQ 教程)。

CSS

我使用 Firebug 的 HTML Inspector 為我們將要自定義的元素獲取正確的選擇器。在 HTML 選項卡中,很容易看到 timeline.css 對每個元素應用了哪些規則 .為了覆蓋它們,我將相同的選擇器複製到 styles.css 這是我們進行修改的地方。然而,在幾次出現時,我使用了 !important 標記以使我的工作更輕鬆。

您在下面看到的所有自定義僅覆蓋少數 CSS 樣式。其餘的由默認樣式表繼承。讓我們開始吧!

我們將在 styles.css 中做的第一件事 ,在頁面本身樣式化之後,就是改變時間線的背景:

#timeline{
    background:none;
}

/* The individual events in the slider */
.slider .slider-container-mask .slider-container{
    background:none;
}

/* Setting a custom background image */
#timeline div.navigation{
    background: url('../img/timeline_bg.jpg') repeat;
    border-top:none;
}

要創建時間線導航的 3D 效果,我們需要使用其他元素。但 Timeline 插件在其標記中不包含此類內容。一個簡單的解決方案是使用 :before / :之後 偽元素。 :after 元素是頂部較暗的部分,它使用線性漸變來增強效果。

#timeline div.navigation:before{
    position:absolute;
    content:'';
    height:40px;
    width:100%;
    left:0;
    top:-40px;
    background: url('../img/timeline_bg.jpg') repeat;
}

#timeline div.navigation:after{
    position:absolute;
    content:'';
    height:10px;
    width:100%;
    left:0;
    top:-40px;
    background:repeat-x;

    background-image: linear-gradient(bottom, #434446 0%, #363839 100%);
    background-image: -o-linear-gradient(bottom, #434446 0%, #363839 100%);
    background-image: -moz-linear-gradient(bottom, #434446 0%, #363839 100%);
    background-image: -webkit-linear-gradient(bottom, #434446 0%, #363839 100%);
    background-image: -ms-linear-gradient(bottom, #434446 0%, #363839 100%);
}

然後我們為時間線導航(帶有代表事件的小可點擊工具提示的部分)添加深色背景:

#timeline div.timenav-background{
    background-color:rgba(0,0,0,0.4) !important;

}

#timeline .navigation .timenav-background .timenav-interval-background{
    background:none;
}

#timeline .top-highlight{
    background-color:transparent !important;
}

稍後我們為放大/縮小按鈕和工具欄設置樣式:

#timeline .toolbar{
    border:none !important;
    background-color: #202222 !important;
}

#timeline .toolbar div{
    border:none !important;
}

接下來是底部的數字刻度:

#timeline .navigation .timenav .time .time-interval-minor .minor{
    margin-left:-1px;
}

#timeline .navigation .timenav .time .time-interval div{
    color: #CCCCCC;
}

上一個和下一個箭頭:

.slider .nav-previous .icon {
    background: url("timeline.png") no-repeat scroll 0 -293px transparent;
}

.slider .nav-previous,.slider .nav-next{
    font-family:'Segoe UI',sans-serif;
}

.slider .nav-next .icon {
    background: url("timeline.png") no-repeat scroll 72px -221px transparent;
    width: 70px !important;
}

.slider .nav-next:hover .icon{
    position:relative;
    right:-5px;
}

.slider .nav-previous:hover, .slider .nav-next:hover {
    color: #666;
    cursor: pointer;
}

#timeline .thumbnail {
    border: medium none;
}

載入畫面:

#timeline .feedback {
    background-color: #222222;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2) inset;
    border:none;
}

#timeline .feedback div{
    color: #AAAAAA;
    font-size: 14px !important;
    font-weight: normal;
}

然後我們繼續看幻燈片:

#timeline .slider-item h2,
#timeline .slider-item h3{
    font-family:'Antic Slab','Segoe UI',sans-serif;
}

#timeline .slider-item h2{
    color:#fff;
}

#timeline .slider-item p{
    font-family:'Segoe UI',sans-serif;
}

#timeline .slider-item img,
#timeline .slider-item iframe{
    border:none;
}

最後,我們將自定義首頁的外觀。我正在使用 nth-child(1) 僅針對第一個滑塊項,其中包含已在 JSON 數據源中定義的時間線的名稱和描述。

/* Customizing the first slide - the cover */

#timeline .slider-item:nth-child(1) h2{
    font:normal 70px/1 'Antic Slab','Segoe UI',sans-serif;
    background:rgba(0,0,0,0.3);
    white-space: nowrap;
    padding:10px 5px 5px 20px;
    position:relative;
    right:-60px;
    z-index:10;
}

#timeline .slider-item:nth-child(1) p i{
    font:normal normal 40px 'Dancing Script','Segoe UI',sans-serif;
    background:rgba(0,0,0,0.3);
    white-space: nowrap;
    padding:5px 20px;
    position:relative;
    right:-60px;
    z-index:10;
}

#timeline .slider-item:nth-child(1) p .c1{
    color:#1bdff0;
}

#timeline .slider-item:nth-child(1) p .c2{
    color:#c92fe6;
}

#timeline .slider-item:nth-child(1) .media-container {
    left: -30px;
    position: relative;
    z-index: 1;
}

#timeline .slider-item:nth-child(1) .credit{
    text-align: center;
}

剩下的就是打開 timeline.psd 即與插件的下載捆綁在一起,並更改Photoshop中某些圖標的顏色。我在本教程的 zip 下載中包含了必要的文件。有了這個,我們的時間線組合就完成了!

完成!

您不僅可以使用此作品集來展示您最近的項目,還可以展示您職業生涯中的興趣和重要時刻。在評論部分分享你的想法和建議。


Tutorial JavaScript 教程
  1. 超出最大調用堆棧大小錯誤

  2. Vue設計系統

  3. 如何使用 javascript 對重複對象的 ID 進行分組並刪除數組中的對象

  4. 在 JavaScript 中使用字符串替換

  5. 使用 React 和 Intersection Observer API 輕鬆延遲加載

  6. 使用 React、Storybook、Material-UI 和 React-Admin 構建時間線

  7. 你需要的是一雙 Crocs 和一個關於靜態網絡應用程序的免費研討會

  1. 您對績效評估會議有何期待?

  2. 12+ jQuery Mobile 佈局插件和示例

  3. 你是高級用戶嗎?你不再需要了。

  4. 具有多個條件的數組操作 – Vue.js / JavaScript

  5. 如何使用 Node.js 向所有 android 設備發送 FCM 通知

  6. 每次發布請求後執行功能

  7. JavaScript 字符串替換全部

  1. Javascript 算法 #2:回文

  2. Bin2Dec 轉換器

  3. React 渲染器:概述

  4. 通過電子郵件激活測試註冊流程