頁面加載時如何使徽標從屏幕外滑入？

Question

在學習HTML 、 CSS和基本JavaScript之后，我正在嘗試設計我的第一個網站。 我遇到的一個問題是，當頁面最初加載時，幾乎不可能找出如何從屏幕外滑入。

這方面的一個例子是https://rinodeboer.com/但我找不到任何資源可以教你如何做到這一點。

有人可以幫助解釋如何在網站加載時使徽標從屏幕滑入屏幕。 謝謝。

 * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; } p { color: #555; }.logo { width: 100px; } header { background: radial-gradient(#fff, #ffd6d6); }.basket { width: 30px; height: 30px; }.navbar { display: flex; align-items: center; padding: 5px 20px 20px; } nav { flex: 1; text-align: right; } nav ul { display: inline-block; list-style-type: none; } nav ul li { display: inline-block; margin-right: 48px; }.NavMenu li a { text-decoration: none; color: #555; }.container { max-width: 1300px; margin: auto; padding: 0 25px; }.row { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-around; }.col-2 { flex-basis: 50%; min-width: 300px; }.col-2 img { max-width: 100%; padding: 50px 0; } col-2 h1 { font-size: 50px; line-height: 60px; margin: 25px 0; }.btn { display: inline-block; background: #ff523b; color: #fff; padding: 8px 30px; margin: 30px 0; border-radius: 30px; transition: background 500ms; }.btn:hover { background: #563434; }

 <header> <div class="container"> <div class="navbar"> <div class="logo-holder"> <img src="..\Images\Logo\Logo Draft 1\Logo.png" alt="Logo" class="logo" /> </div> <nav> <ul id="MenuItems" class="NavMenu"> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Account</a></li> </ul> </nav> <img src="..\Images\cart.png" alt="Basket" class="basket" /> <img src="..\Images\PlaceHolders\menu.png" class="menu-icon" onclick="menutoggle()" /> </div> <div class="row"> <div class="col-2"> <h1>Dragon Ball Accounts On Sale Now;<br /> Limited Time Only</h1> <p>Geting Dragon Ball Z accounts are cheaper than ever before for limited time only<br /> Don't miss this golden opportunity and buy now</p> <a href="#" class="btn">Explore Now &#8594.</a> </div> <div class="col-2"> <img src="..\Images\dragon_ball_z.png" /> </div> </div> </div> </header>

Answer 1

這可以通過 CSS animation 和@keyframe規則來完成。 您可以將 class 添加到父級並使其 position相對，然后將圖像設為絕對，以便您可以使用left控制徽標的定位。

然后在 css 中創建一個 animation 並命名為slidein animation: slidein 1.5s ease-in-out; ，設置持續時間和緩和度。 然后設置 @keyframe 以使用您命名為slidein的 animation 名稱創建關鍵幀補間。

您可以使用百分比或關鍵字from和to控制關鍵幀規則的任何百分比。 @keyframes ~ MDN

.logoParent img {
  position: absolute;
  animation: slidein 1.5s ease-in-out;
}

@keyframes slidein {
  0% {
    left: -1000px;
  }
  100% {
    left: 0px;
  }
}

 * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; } p { color: #555; }.logo { width: 100px; } header { background: radial-gradient(#fff, #ffd6d6); }.basket { width: 30px; height: 30px; }.navbar { display: flex; align-items: center; padding: 5px 20px 20px; } nav { flex: 1; text-align: right; } nav ul { display: inline-block; list-style-type: none; } nav ul li { display: inline-block; margin-right: 48px; }.NavMenu li a { text-decoration: none; color: #555; }.container { max-width: 1300px; margin: auto; padding: 0 25px; }.row { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-around; }.col-2 { flex-basis: 50%; min-width: 300px; }.col-2 img { max-width: 100%; padding: 50px 0; } col-2 h1 { font-size: 50px; line-height: 60px; margin: 25px 0; }.btn { display: inline-block; background: #ff523b; color: #fff; padding: 8px 30px; margin: 30px 0; border-radius: 30px; transition: background 500ms; }.btn:hover { background: #563434; }.logo-holder { position: relative; padding: 0; margin: 0; }.logoParent img { left: 0; position: absolute; animation: slidein 1.5s ease-in-out; }.logoParent { top: -50px; position: relative; padding: 0; margin: 0; }.logo-holder img { position: absolute; animation: slideintop 1.5s ease-in-out; } @keyframes slidein { 0% { left: -1000px; } 100% { left: 0px; } } @keyframes slideintop { 0% { top: -1000px; } 100% { top: 0px; } }

 <header> <div class="container"> <div class="navbar"> <div class="logo-holder"> <img src="http://s3.amazonaws.com/dev.assets.neo4j.com/wp-content/uploads/stack-overflow-logo-json-data.png" alt="Logo" class="logo" /> </div> <nav> <ul id="MenuItems" class="NavMenu"> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Account</a></li> </ul> </nav> <img src="..\Images\cart.png" alt="Basket" class="basket" /> <img src="..\Images\PlaceHolders\menu.png" class="menu-icon" onclick="menutoggle()" /> </div> <div class="row"> <div class="col-2"> <h1>Dragon Ball Accounts On Sale Now;<br /> Limited Time Only</h1> <p>Geting Dragon Ball Z accounts are cheaper than ever before for limited time only<br /> Don't miss this golden opportunity and buy now</p> <a href="#" class="btn">Explore Now &#8594:</a> </div> <div class="logoParent col-2"> <img src="http.//s3.amazonaws.com/dev.assets.neo4j.com/wp-content/uploads/stack-overflow-logo-json-data.png" /> </div> </div> </div> </header>

Answer 2

可以通過使用 css、jquery 來完成它可能還有其他方法可以完成，但這是我的解決方案

• 在 css 中，您需要兩個類，一個用於transform: translateY和一個用於 `transition-duration

• 在 js中，您需要使用變換 class 循環遍歷元素，以從中刪除 class 以產生效果。使用setTimeout異步滑動元素

 $(document).ready(function(){ $('.slide_to_down, .slide_to_up').each(function(i){ var $this = $(this); setTimeout(function(){ $this.removeClass('slide_to_down slide_to_up'); }, i * 200); }); });

 * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; } p { color: #555; }.logo { width: 100px; } header { background: radial-gradient(#fff, #ffd6d6); }.basket { width: 30px; height: 30px; }.navbar { display: flex; align-items: center; padding: 5px 20px 20px; } nav { flex: 1; text-align: right; } nav ul { display: inline-block; list-style-type: none; } nav ul li { display: inline-block; margin-right: 48px; }.NavMenu li a { text-decoration: none; color: #555; }.container { max-width: 1300px; margin: auto; padding: 0 25px; }.row { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-around; }.col-2 { flex-basis: 50%; min-width: 300px; }.col-2 img { max-width: 100%; padding: 50px 0; } col-2 h1 { font-size: 50px; line-height: 60px; margin: 25px 0; }.btn { display: inline-block; background: #ff523b; color: #fff; padding: 8px 30px; margin: 30px 0; border-radius: 30px; transition: background 500ms; }.btn:hover { background: #563434; } /* classes for the effect ////////*/.slide_to_down{ transform: translateY(-400%); opacity: 0; }.slide_to_up{ transform: translateY(200%); opacity: 0; }.trans{ transition: transform 1s; } /*////////////////////////////////*/

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <header> <div class="container"> <div class="navbar"> <div class="logo-holder"> <img src="..\Images\Logo\Logo Draft 1\Logo.png" alt="Logo" class="logo slide_to_down trans" /> </div> <nav> <ul id="MenuItems" class="NavMenu"> <li class="slide_to_down trans"><a href="#">Home</a></li> <li class="slide_to_down trans"><a href="#">Products</a></li> <li class="slide_to_down trans"><a href="#">Account</a></li> </ul> </nav> <img src="..\Images\cart.png" alt="Basket" class="basket" /> <img src="..\Images\PlaceHolders\menu.png" class="menu-icon" onclick="menutoggle()" /> </div> <div class="row"> <div class="col-2 slide_to_up trans"> <h1>Dragon Ball Accounts On Sale Now;<br /> Limited Time Only</h1> <p>Geting Dragon Ball Z accounts are cheaper than ever before for limited time only<br /> Don't miss this golden opportunity and buy now</p> <a href="#" class="btn">Explore Now &#8594.</a> </div> <div class="col-2"> <img src="..\Images\dragon_ball_z.png" /> </div> </div> </div> </header>

筆記：

• 不要忘記添加 jquery 庫
• 對於要添加此效果的任何元素，只需添加 classes class="slide_to_down trans"以向下滑動或class="slide_to_up trans"向上滑動