Как затухание в элементе после задержки

Question

См. Ниже код. У меня есть изображение героя с наложением градиента и некоторым текстом. У меня это так, что все это исчезает, когда сайт открывается. Я хотел бы, чтобы только изображение/градиент сначала затухали, и как только это полностью исчезло, тогда текст будет исчезать или скользить. Каков наилучший способ достичь этого? Простая задержка в тексте затухания? Благодарю.

HTML

<section id="hero"> 
      <div id="hero-gradient"> 
      <div class="container"> 
       <h1 id="hero-title">ASCO AUSTRALIA</h1> 
       <p id="hero-body">ASCO Australia provides Onshore Supply Base, Transport and Logistics, and Marine Supply Base services to the Energy, Resources, and Infrastructure industries across Australia.</p> 
       <div id="button-container"> 
        <a href="#learn-more-anchor"><div id="learn-more-button" class="smoothScroll">LEARN MORE</div></a> 
        <a href="#learn-more-anchor"><div id="find-us-button" class="smoothScroll">FIND US</div></a> 
       </div> 
       <a class="smoothScroll"><img src="images/arrow.png" id="arrow" class="animated bounce"></a> 
      </div> 
      </div> 
    </section> 

CSS

#hero { 
     position: relative; 
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 890px; 
     background-image: url(../images/hero.jpg); 
     background-size: cover; 
     background-attachment: fixed; 
     background-repeat: no-repeat; 
     animation: fadein 2s; 
     z-index: 0; 
    } 

    #hero-gradient { 
     position: relative; 
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 890px; 
     background: linear-gradient(-45deg, #324f8f, #1a7ba7); 
     opacity: 0.90; 
     z-index: 1; 
    } 

    @keyframes fadein { 
     from { opacity: 0; } 
     to { opacity: 1; } 
    } 

    #hero .container { 
     padding-top: 300px; 
    } 

    #hero-body { 
     max-width: 1100px; 
     margin: 0 auto; 
     color: #fff; 
     text-align: center; 
     font-weight: 200; 
    } 

    #button-container { 
     width: 1440px; 
     margin: 70px auto; 
     text-align: center; 
     max-width: 90%; 
    } 

    #learn-more-button { 
     margin-right: 15px; 
     padding-top: 25px; 
     width: 200px; 
     height: 45px; 
     font-family: 'Montserrat', sans-serif; 
     font-size: 14px; 
     color: #fff; 
     font-weight: 800; 
     text-align: center; 
     letter-spacing: 1px; 
     transition: 0.45s; 
     border: 1px solid #fff; 
     border-radius: 50px; 
     -webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.07); 
     -moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.07); 
     box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.07); 
     display: inline-block; 
    } 

    #learn-more-button:hover { 
     cursor: pointer; 
     width: 218px; 
    } 

    #find-us-button { 
     margin-left: 15px; 
     padding-top: 25px; 
     width: 200px; 
     height: 45px; 
     background-color: #009ee3; 
     font-family: 'Montserrat', sans-serif; 
     font-size: 14px; 
     color: #fff; 
     font-weight: 800; 
     text-align: center; 
     letter-spacing: 1px; 
     transition: 0.45s; 
     border-radius: 50px; 
     -webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.07); 
     -moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.07); 
     box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.07); 
     display: inline-block; 
    } 

    #find-us-button:hover { 
     cursor: pointer; 
     width: 218px; 
    } 

Javascript

$(document).ready(function(){ 
    $(window).scroll(function(){ 
     $("#hero-title").css("opacity", 1 - $(window).scrollTop()/380); 
    }); 
}); 

$(document).ready(function(){ 
    $(window).scroll(function(){ 
     $("#hero-body").css("opacity", 1 - $(window).scrollTop()/410); 
    }); 
}); 

$(document).ready(function(){ 
    $(window).scroll(function(){ 
     $("#learn-more-button").css("opacity", 1 - $(window).scrollTop()/450); 
    }); 
}); 

$(document).ready(function(){ 
    $(window).scroll(function(){ 
     $("#find-us-button").css("opacity", 1 - $(window).scrollTop()/450); 
    }); 
}); 

Answer 1

Как я уже сказал в своем комментарии, вы не должны использовать несколько $(document).ready(), один из которых достаточно. То же самое относится и к $(window).scroll в этом случае. Что касается вопроса, я думаю, что решение состоит в том, чтобы скрыть элемент .container, используя display: none;, и используя метод setTimeout(), вы просто показываете его после x секунд, используя fadeIn().

Вы можете посмотреть на это JSFIDDLE или просто запустите снимок ниже, чтобы увидеть его в действии.

$(document).ready(function() { 
 
    $(window).scroll(function() { 
 
    $("#hero-title").css("opacity", 1 - $(window).scrollTop()/380); 
 
    $("#hero-body").css("opacity", 1 - $(window).scrollTop()/410); 
 
    $("#learn-more-button").css("opacity", 1 - $(window).scrollTop()/450); 
 
    $("#find-us-button").css("opacity", 1 - $(window).scrollTop()/450); 
 
    }); 
 
    setTimeout(function() { 
 
    $('.container').fadeIn(); 
 
    }, 2000); 
 
});

#hero { 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 890px; 
 
    background-image: url(../images/hero.jpg); 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
    background-repeat: no-repeat; 
 
    animation: fadein 2s; 
 
    z-index: 0; 
 
} 
 
#hero-gradient { 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 890px; 
 
    background: linear-gradient(-45deg, #324f8f, #1a7ba7); 
 
    opacity: 0.90; 
 
    z-index: 1; 
 
} 
 
@keyframes fadein { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
} 
 
#hero .container { 
 
    padding-top: 300px; 
 
    display: none; 
 
} 
 
#hero-body { 
 
    max-width: 1100px; 
 
    margin: 0 auto; 
 
    color: #fff; 
 
    text-align: center; 
 
    font-weight: 200; 
 
} 
 
#button-container { 
 
    width: 1440px; 
 
    margin: 70px auto; 
 
    text-align: center; 
 
    max-width: 90%; 
 
} 
 
#learn-more-button { 
 
    margin-right: 15px; 
 
    padding-top: 25px; 
 
    width: 200px; 
 
    height: 45px; 
 
    font-family: 'Montserrat', sans-serif; 
 
    font-size: 14px; 
 
    color: #fff; 
 
    font-weight: 800; 
 
    text-align: center; 
 
    letter-spacing: 1px; 
 
    transition: 0.45s; 
 
    border: 1px solid #fff; 
 
    border-radius: 50px; 
 
    -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07); 
 
    -moz-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07); 
 
    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07); 
 
    display: inline-block; 
 
} 
 
#learn-more-button:hover { 
 
    cursor: pointer; 
 
    width: 218px; 
 
} 
 
#find-us-button { 
 
    margin-left: 15px; 
 
    padding-top: 25px; 
 
    width: 200px; 
 
    height: 45px; 
 
    background-color: #009ee3; 
 
    font-family: 'Montserrat', sans-serif; 
 
    font-size: 14px; 
 
    color: #fff; 
 
    font-weight: 800; 
 
    text-align: center; 
 
    letter-spacing: 1px; 
 
    transition: 0.45s; 
 
    border-radius: 50px; 
 
    -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07); 
 
    -moz-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07); 
 
    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07); 
 
    display: inline-block; 
 
} 
 
#find-us-button:hover { 
 
    cursor: pointer; 
 
    width: 218px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="hero"> 
 
    <div id="hero-gradient"> 
 
    <div class="container"> 
 
     <h1 id="hero-title">ASCO AUSTRALIA</h1> 
 
     <p id="hero-body">ASCO Australia provides Onshore Supply Base, Transport and Logistics, and Marine Supply Base services to the Energy, Resources, and Infrastructure industries across Australia.</p> 
 
     <div id="button-container"> 
 
     <a href="#learn-more-anchor"> 
 
      <div id="learn-more-button" class="smoothScroll">LEARN MORE</div> 
 
     </a> 
 
     <a href="#learn-more-anchor"> 
 
      <div id="find-us-button" class="smoothScroll">FIND US</div> 
 
     </a> 
 
     </div> 
 
     <a class="smoothScroll"> 
 
     <img src="images/arrow.png" id="arrow" class="animated bounce"> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</section>