CODEWITHSUNDEEP
javascripthtmljquerycss
gurveer arora
gurveer arora

Reputation: 71

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

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>

Upvotes: 1

Views: 718

Answers (2)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

It can be done by using css , jquery It may've other ways to be done but this is my solution

  • In css you need two classes one for transform: translateY and one for `transition-duration

  • In js you need to loop through the elements with the transform class to remove the class from it to make the effect.. use setTimeout to slide the element asynchronous

$(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>

Notes:

  • Don't forget to add jquery liberary
  • For any element you want to add this effect to it just add classes class="slide_to_down trans" to slide to down OR class="slide_to_up trans" to slide to up

Upvotes: 1

dale landry
dale landry

Reputation: 8610

This can be done with a CSS animation and @keyframe rule. You can add a class to the parent and make its position relative, then make the image absolute so you can control the positioning of the logo using left.

Then create an animation in css and give it a name slidein animation: slidein 1.5s ease-in-out;, set the duration and ease. Then set the @keyframe to create a keyframe tween using the animation name you named it slidein.

You can control any percentage of the keyframe rule using a percentage or keywords from and 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>

Upvotes: 2

Related Questions