如何使用 CSS 和 Jquery 進行內容延遲

Question

我正在嘗試創建一個頁面，其中在頁面加載 3 秒后屏幕上的內容出現。 通過我在該網站上看到的其他帖子，我嘗試了下面的腳本，但沒有成功（所有內容同時出現）。

首先是我試圖延遲的部分，然后是整個頁面腳本。 非常感謝任何指導。 （我希望這次我的措辭正確，所以我不會再得到-1）

要延遲的部分：


    <div class="content">
                  <div id="fade">
                    <h1>Main Text</h1>
                    <h3>Secondary Text</h3>
                    <a href="#about" class="btn">Read More</a>
                  </div>
                </div>
            </section>
    
    
    <style>#fade p {
        opacity: 0;
        margin-top: 25px;
        font-size: 21px;
        text-align: center;
    }
    </style>
    
    <script>
    <$("#fade p").delay(3000).animate({"opacity": "1"}, 700);
    </script>

這是整個頁面


    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    
    <body bgcolor="#000000" marginwidth="0" marginheight="0">
    
    
    
    
    
    <section class="showcase"> 
    <div class="video-container">
                    <video src="https://traversymedia.com/downloads/video.mov" autoplay muted loop></video>
                </div>
    
    
    
    
    
    
    
    
                <div class="content">
                  <div id="fade">
                    <h1>Main Text</h1>
                    <h3>Secondary Text</h3>
                    <a href="#about" class="btn">Read More</a>
                  </div>
                </div>
            </section>
    
    
    <style>#fade p {
        opacity: 0;
        margin-top: 25px;
        font-size: 21px;
        text-align: center;
    }
    </style>
    
    <script>
    <$("#fade p").delay(3000).animate({"opacity": "1"}, 700);
    </script>
    
    
    
    
    <style>
    
    @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap');
    
    :root {
        --primary-color: #3a4052;
    }
    
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    
    body {
        font-family: 'Open Sans', sans-serif;
        line-height: 1.5;
    }
    
    a {
        text-decoration: none;
        color: var(--primary-color);
    }
    
    h1 {
        font-weight: 300;
        font-size: 60px;
        line-height: 1.2;
        margin-bottom: 15px;
    }
    
    .showcase {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: #fff;
        padding: 0 20px;
    }
    
    .video-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: var(--primary-color) url('./https://traversymedia.com/downloads/cover.jpg') no-repeat center
            center/cover;
    }
    
    .video-container video {
        min-width: 100%;
        min-height: 100%;
      position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        object-fit: cover;
    }
    
    .video-container:after {
        content: '';
        z-index: 1;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
        position: absolute;
    }
    
    .content {
        z-index: 2;
    }
    
    .btn {
        display: inline-block;
        padding: 10px 30px;
        background: var(--primary-color);
        color: #fff;
        border-radius: 5px;
        border: solid #fff 1px;
        margin-top: 25px;
        opacity: 0.7;
    }
    
    .btn:hover {
        transform: scale(0.98);
    }
    
    #about {
        padding: 40px;
        text-align: center;
    }
    
    #about p {
        font-size: 1.2rem;
        max-width: 600px;
        margin: auto;
    }
    
    #about h2 {
        margin: 30px 0;
        color: var(--primary-color);
    }
    
    .social a {
        margin: 0 5px;
    }
    
    </style>
    
    </body>
    </html>

Answer 1

這就是我最終將其全部更改為的內容，以使其正常工作。 希望這將幫助其他希望這樣做的人。


        <section class="showcase"> 
        <div class="video-container">
                        <video src="https://traversymedia.com/downloads/video.mov" autoplay muted loop></video>
                    </div>
        
        
        
        
        
        
        
        
                    <div class="content">
                    
                        <h1>Main Text</h1>
                        <h3>Secondary Text</h3>
                        <a href="#about" class="btn">Read More</a>
                    
                    </div>
                </section>
        
        
    
        
        
        
        
        <style>
    
    
    .content {
        -webkit-animation: 3s ease 0s normal forwards 1 fadein;
        animation: 3s ease 0s normal forwards 1 fadein;
    }
    
    @keyframes fadein{
        0% { opacity:0; }
        66% { opacity:0; }
        100% { opacity:1; }
    }
    
    @-webkit-keyframes fadein{
        0% { opacity:0; }
        66% { opacity:0; }
        100% { opacity:1; }
    }
    
    
    
    
    
        
        @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap');
        
        :root {
            --primary-color: #3a4052;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Open Sans', sans-serif;
            line-height: 1.5;
        }
        
        a {
            text-decoration: none;
            color: var(--primary-color);
        }
        
        h1 {
            font-weight: 300;
            font-size: 60px;
            line-height: 1.2;
            margin-bottom: 15px;
        }
        
        .showcase {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #fff;
            padding: 0 20px;
        }
        
        .video-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: var(--primary-color) url('./https://traversymedia.com/downloads/cover.jpg') no-repeat center
                center/cover;
        }
        
        .video-container video {
            min-width: 100%;
            min-height: 100%;
          position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            object-fit: cover;
        }
        
        .video-container:after {
            content: '';
            z-index: 1;
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
        }
        
        .content {
            z-index: 2;
        }
        
        .btn {
            display: inline-block;
            padding: 10px 30px;
            background: var(--primary-color);
            color: #fff;
            border-radius: 5px;
            border: solid #fff 1px;
            margin-top: 25px;
            opacity: 0.7;
        }
        
        .btn:hover {
            transform: scale(0.98);
        }
        
        #about {
            padding: 40px;
            text-align: center;
        }
        
        #about p {
            font-size: 1.2rem;
            max-width: 600px;
            margin: auto;
        }
        
        #about h2 {
            margin: 30px 0;
            color: var(--primary-color);
        }
        
        .social a {
            margin: 0 5px;
        }
        
    
    
    
    
        </style>

如何使用 CSS 和 Jquery 進行內容延遲

問題描述

1 個解決方案

解決方案1
0 2022-07-28 20:15:13

如何使用 CSS 和 Jquery 進行內容延遲

問題描述

1 個解決方案

解決方案1 0 2022-07-28 20:15:13

解決方案1
0 2022-07-28 20:15:13