淡入jQuery的動畫標誌淡出

-8

我目前堅持在這裏，我想實現的this website同樣的效果。但我不知道如何去做。任何人都會友善地向我展示執行此操作的代碼嗎？淡入jQuery的動畫標誌淡出

基本上，這個網站顯示的一對夫婦在年初秒的標誌，然後淡出到一個div區域。我想製作自己的版本來展示自己的徽標，然後淡入我想展示給其他人的div區域中的內容。徽標都會顯示出來，並且div必須位於同一個網頁上。

請幫忙。

來源

2017-01-28 Miricale Y

1），你需要用你想要的東西鏈接到網站，和2），你需要給它一個鏡頭，並帶有明顯的問題，與我們分享您的工作。 http://stackoverflow.com/help/how-to-ask –

「我想製作我自己的版本」 - >繼續。然後當你的代碼不工作時再回到我們這裏。 – dda

告訴我們代碼 – rahulsm

這並不需要的jQuery的話，那可以用CSS輕鬆完成。

這裏有一個演示：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title> Valid HTML5 documents require title tags </title> 
 
    <style type="text/css"> 
 
     #logo { 
 
      position: fixed; 
 
      display: flex; 
 
      align-items: center; 
 
      justify-content: center; 
 
      left: 0; 
 
      top: 0; 
 
      width: 100%; 
 
      height: 0; 
 
      opacity: 0; 
 
      background-color: #fff; 
 
      pointer-events: none; 
 
      cursor: default; 
 

 
      transition: opacity 2.5s ease 5s, height 3s ease 7.5s; 
 
      /*     __^__ __^__  __^__ __^__ 
 
           [1]  [2]  [3]  [4] 
 

 
       [1] Time opacity takes to transition from 1 to 0; 
 
       [2] Time opacity waits until it starts transitioning 
 
       [3] Time height takes to transition from 100% to 0; 
 
       [4] Time height waits until it starts transitioning (>= [1] + [2]); 
 
      */ 
 
     } 
 
     .preload #logo { 
 
      opacity: 1; 
 
      height: 100%; 
 
     } 
 
    </style> 
 
</head> 
 
<body class="preload" onload="document.body.className='';"> 
 
    <div id="logo"> YOUR LOGO HERE </div> 
 
    <div id="content"> 
 
     <h1> wow, a title </h1> 
 
     <p> yay, content </p> 
 
    </div> 
 
</body> 
 
</html>

那麼，它是如何工作的？

<body>有preload類。一旦加載（onload事件），該類將被刪除。

雖然<body>有preload類，div#logo將有opacity: 1和height: 100%。

只要<body>失去preload類，div#logo將同時擁有opacity和height設置爲0但transition財產即會停止立即有變化。

opacity等待5秒（延遲）開始的過渡。

opacity需要2.5秒至1至0。

height完全過渡等待7.5秒（不透明度的5S + 2.5S）開始的過渡。

height需要3秒，從100％完全過渡到0

你得到幾乎沒有任何JavaScript和預期的效果無需外部框架。

來源

2017-02-25 19:04:53

Thx很多，你的回答包含了我的問題的大部分內容。真的很多。但我還是有一些問題，如果你不介意在這裏幫助我，如何在出現的時候對「你的標識在這裏」產生延遲效果，我的意思是讓它的外觀消失。 –

淡入jQuery的動畫標誌淡出

回答

相關問題