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

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 动画和@keyframe 规则来完成。您可以向父级添加一个类并使其位置相对，然后使图像绝对，这样您就可以使用left控制标志的定位。

然后在css中创建一个动画并命名为slideinanimation: slidein 1.5s ease-in-out;，设置持续时间和缓动度。然后设置@keyframe 以使用您命名为slidein 的动画名称创建补间关键帧。

您可以使用百分比或关键字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中你需要循环遍历带有transform类的元素来移除这个类来产生效果..使用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 库
• 对于任何想要添加此效果的元素，只需添加类 class="slide_to_down trans" 以向下滑动或 class="slide_to_up trans" 以向上滑动