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

創建動畫 404 頁面

它一定會發生。遲早,有人會輸入錯誤的 URL 或點擊斷開的鏈接到您的網站。這就是臭名昭著的 404 頁面出現的時候。為了讓體驗不那麼令人沮喪,您可以花時間設計一個友好的錯誤頁面,這將鼓勵您的用戶留在您的網站上。

今天我們就是這樣做的。我們將創建一個動畫 404 頁面,您可以輕鬆地對其進行自定義和改進。

HTML

像往常一樣,我們從 HTML 標記開始。這裡我們使用新的 HTML5 文檔類型和新的 hgroup 標籤。在頭部部分,我們在條件註釋中包含了 IE 的 HTML5 啟用腳本。該腳本將幫助 Internet Explorer 理解新的 HTML5 標籤。

404.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creating an Animated 404 Page | Tutorialzine Demo</title>

<!-- Internet Explorer HTML5 enabling script: -->

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

<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body>

<div id="rocket"></div>

<hgroup>
    <h1>Page Not Found</h1>
    <h2>We couldn't find what you were looking for.</h2>
</hgroup>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

在 HTML5 啟用腳本之後,我們包含樣式表,下一節將給出其中的摘錄。在 body 標籤內,您可以看到 #rocket div 和前面提到的 hgroup . #rocket div 有 rocket.png 作為它的背景,它應用了許多樣式,包括動畫所需的相對定位,稍後您將看到。

最後我們有 jQuery 庫和我們的 script.js 文件,也將在下一節中討論。

該頁面簡約,僅向用戶提供基本信息。您可以通過添加更針對站點的消息和指向您的主頁(或您認為合適的其他資源)的鏈接來改進它。

CSS

現在讓我們繼續進行造型。正如 tut 的 HTML 部分所述,#rocket div 的定位設置為相對。這允許我們插入絕對定位的跨度,形成從發動機排出的廢氣,並相對於火箭抵消它們。

body{
    background:url('img/bg.png') no-repeat center center #1d1d1d;
    color:#eee;
    font-family:Corbel,Arial,Helvetica,sans-serif;
    font-size:13px;
}

#rocket{
    width:275px;
    height:375px;
    background:url('img/rocket.png') no-repeat;
    margin:140px auto 50px;
    position:relative;
}

/*  Two steam classes. */

.steam1,
.steam2{
    position:absolute;
    bottom:78px;
    left:50px;
    width:80px;
    height:80px;
    background:url('img/steam.png') no-repeat;
    opacity:0.8;
}

.steam2{

   /*   .steam2 shows the bottom part (dark version)
    *   of the background image.
    */

    background-position:left bottom;
}

hgroup{

    /* Using the HTML4 hgroup element */

    display:block;
    margin:0 auto;
    width:850px;
    font-family:'Century Gothic',Calibri,'Myriad Pro',Arial,Helvetica,sans-serif;
    text-align:center;
}

h1{
    color:#76D7FB;
    font-size:60px;
    text-shadow:3px 3px 0 #3D606D;
    white-space:nowrap;
}

h2{
    color:#9FE3FC;
    font-size:18px;
    font-weight:normal;
    padding:25px 0;
}

每個蒸汽跨度為 80px 寬 x 80px 高,並被指定為 steam.png 作為其背景。此圖像是跨度高度的兩倍,實際上包含兩個版本的蒸汽 - 白色和黑色。steam1steam2 類顯示圖像的相應版本。蒸汽的輕版本會產生煙霧的錯覺,而黑色的則使火箭發動機的火焰閃爍。

jQuery 創建蒸汽跨度並將其插入到 #rocket 容器,並使用 animate 以與火箭運動相反的方向移動它們 方法,稍後您將看到。

jQuery

正如我們上面所討論的,jQuery 的部分是創建廢氣的動畫。讓我們仔細看看這是如何實現的。

該腳本首先將事件偵聽器附加到 窗口加載 事件。這與 document ready 不同 我們通常定位的事件,在那個 window.load 不僅在加載 DOM 時觸發,還加載圖像時觸發。這樣我們就可以確定用戶不會在 rocket.png 之前看到火箭的煙霧 已加載。

$(window).load(function(){

    // We are listening for the window load event instead of the regular document ready.

    function animSteam(){

        // Create a new span with the steam1, or steam2 class:

        $('<span>',{
            className:'steam'+Math.floor(Math.random()*2 + 1),
            css:{
                // Apply a random offset from 10px to the left to 10px to the right
                marginLeft  : -10 + Math.floor(Math.random()*20)
            }
        }).appendTo('#rocket').animate({
            left:'-=58',
            bottom:'-=100'
        }, 120,function(){

            // When the animation completes, remove the span and
            // set the function to be run again in 10 milliseconds

            $(this).remove();
            setTimeout(animSteam,10);
        });
    }

    function moveRocket(){
        $('#rocket').animate({'left':'+=100'},5000).delay(1000)
                    .animate({'left':'-=100'},5000,function(){
                setTimeout(moveRocket,1000);
        });
    }

    // Run the functions when the document and all images have been loaded.

    moveRocket();
    animSteam();
});

animSteam() 功能是產生煙霧效果的原因。調用時,該函數運行一個動畫,完成後使用 setTimeout 安排相同的功能在 10 毫秒內再次運行。這可以防止積聚 - 在第一個動畫完成之前開始第二個動畫。

腳本在 steam1 之間隨機選擇 和 steam2 第 10 行的類並使用 margin-left 的隨機值水平偏移跨度 .在 animate() 方法,在鏈的後面,我們告訴 jQuery 從蒸汽 div 的當前位置(正好在火箭的噴嘴上方)開始動畫,並將元素向左移動 58 像素,向下移動 100 像素。

在此之後我們傳遞動畫的持續時間 - 120 毫秒,以及一個回調函數,該函數將在動畫完成後執行。

另一個動畫函數 - moveRocket() 通過修改 left CSS 屬性將火箭緩慢地左右移動。這兩個函數在文件末尾調用一次。如果要禁用其中一個動畫,只需註釋掉相應的函數調用即可。

這樣我們的 404 動畫頁面就完成了!

結論

請記住,要在實際發生 404 錯誤時顯示頁面,您需要將此行添加到您的 .htaccess 文件:

ErrorDocument 404 /404.html

假設您已將其放置在根文件夾中,這將輸出帶有適當標題的頁面。您還可以向頁面添加更多有用的信息,例如指向您的主頁的鏈接、更加個性化的消息,甚至是用戶報告遇到的錯誤的方式。


Tutorial JavaScript 教程
  1. Muil - 使用 React 構建動態電子郵件模板

  2. 如何將 React App 部署到 GitHub 頁面

  3. 廣告攔截器性能研究

  4. 2022 年前端開發路線圖

  5. JavaScript 對象解構指南

  6. 探索 Blockdom:最快的虛擬 DOM(有史以來!)

  7. 我想在我的 php 頁面從服務器獲取數據時顯示等待動畫

  1. 理解 React 中的 setState/useState

  2. 宣布 ToolJet 1.0 - 將平台與產品分離

  3. 為什麼 useEffect 在 React 中運行兩次

  4. 15+ 2022 年最佳黑暗管理模板

  5. 快遞簡介

  6. Angular中的延遲加載示例

  7. 引導 5 容器

  1. 100 個用於圖像/內容的 jQuery 滑塊(第 2 部分)

  2. 深入了解 JavaScript

  3. 介紹 Web 共享 API

  4. 退格字符串比較:處理通用算法的兩種方法