How to make a logo slide in from off screen when the page loads in?

by

I’m trying to design my first website after learning HTML, CSS and basic JavaScript. One problem that I have encountered is, that it is almost impossible to find out how to make something slide in from off screen when the page loads initially.

An example of this is on https://rinodeboer.com/ but i can’t find any resources that teach you how to do this.

Can someone please help explain how to make a logo slide in from off the screen onto the screen when the site loads. Thanks.

* {
  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>

20 thoughts on “How to make a logo slide in from off screen when the page loads in?”

  19. 338796 380743Thanks for the sensible critique. Me and my neighbor were just preparing to do some research about this. We got a grab a book from our location library but I think I learned much more from this post. Im really glad to see such great information being shared freely out there. 14944

    Reply

  20. 482839 304647Hey there, I feel your weblog might be having browser compatibility issues. When I look at your web site in Safari, it looks fine but when opening in Internet Explorer, it has some overlapping. I just wanted to give you a quick heads up! Other then that, superb weblog! 719518

    Reply

Leave a Comment