页面加载时如何使徽标从屏幕外滑入？

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"向上滑动