jQuery Animation Logo Einblenden Ausblenden

-8

Ich bin derzeit hier fest, ich möchte den gleichen Effekt wie this website realisieren. Aber ich weiß nicht genau, wie es geht. Würde jemand so nett sein, mir den Code zu zeigen, um das zu tun?jQuery Animation Logo Einblenden Ausblenden

Im Grunde zeigt diese Seite am Anfang ein paar Sekunden lang ein Logo und blendet dann einen div-Bereich aus. Ich möchte meine eigene Version erstellen, um mein eigenes Logo zu zeigen und dann den Inhalt in einem div-Bereich auszublenden, den ich den anderen zeigen möchte. Sowohl das Logo als auch das Div müssen sich auf derselben Webseite befinden.

Bitte helfen.

Quelle

2017-01-28 Miricale Y

1) Sie müssen auf die Seite mit der Sache, die Sie wollen, zu linken, und 2) Sie müssen es versuchen und teilen Sie Ihre Arbeit mit uns mit einer klaren Frage. http://stackoverflow.com/help/how-to-ask –

"Ich möchte meine eigene Version erstellen" -> fortfahren. Dann komm zurück zu uns, wenn dein Code nicht funktioniert. – dda

Zeigen Sie uns den Code – rahulsm

Dies erfordert jQuery überhaupt nicht, es kann einfach mit CSS durchgeführt werden.

Hier ist eine Demonstration:

<!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>

Also, wie funktioniert es?

<body> hat die preload Klasse. Sobald es geladen wird (onload Ereignis), wird diese Klasse entfernt.

Während <body> die preload Klasse hat, wird div#logo haben opacity: 1 und height: 100%.

Sobald <body> die preload Klasse verliert, wird div#logo sowohl opacity und height auf 0 gesetzt haben, aber die transition Eigenschaft hält, dass der Wandel von der unmittelbaren sein.

opacity wartet 5 Sekunden (Verzögerung), um den Übergang zu starten.

opacity dauert 2,5 Sekunden vollständig von 1 bis Übergang auf 0.

height wartet 7,5 Sekunden (Opazität 5S + 2.5s), um den Übergang zu starten.

height dauert 3 Sekunden von 100% vollständig Übergang auf 0

Sie erhalten den gewünschten Effekt fast ohne JavaScript und keine Notwendigkeit für einen externen Rahmen.

Quelle

2017-02-25 19:04:53

Vielen Dank, Ihre Antwort hat den größten Teil meiner Frage geklärt. Wirklich sehr viel. Aber ich habe immer noch ein paar Fragen für dich, wenn es dir nichts ausmacht, mir hier zu helfen, wie man eine Verzögerungseffekt auf "Dein Logo hier" macht, wenn es erscheint, ich meine, lass sein Aussehen verblassen. –

jQuery Animation Logo Einblenden Ausblenden

Antwort

Verwandte Themen