Slide animation

What is a slide animation How do you make a slide animation? This script and codes were developed by Jerusha Johnson on 26 December 2021, Sunday.

How do I make an slide animation?
  1. Slide animation Previews
  2. Slide animation HTML Codes
  3. Slide animation CSS Codes
  4. Slide animation JS Codes
Slide animation Previews

Slide animation HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>slide animation</title>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha256-k2/8zcNbxVIh5mnQ52A0r3a6jAgMGxFJFE2707UxGCk= sha512-ZV9KawG2Legkwp3nAlxLIVFudTauWuBpC10uEafMHYL0Sarrz5A7G79kXh5+5+woxQ5HM559XX2UZjMJ36Wplg==" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <section class="main-body">
  <i class="fa fa-bars fa-2x menu"></i>
</section>
<section class="right-drawer"></section>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

Slide animation CSS Codes

.main-body{
  background: url(https://images.unsplash.com/photo-1438109491414-7198515b166b?fit=crop&fm=jpg&h=700&q=80&w=1050) no-repeat center center fixed; 
  background-size: cover;
  position: absolute;
  width:100%;
  position: relative;
}
.menu{
  position: absolute;
  top:15px;
  right: 15px;
  color:#fff;
  text-shadow:0 0 10px rgba(0,0,0,0.3);
  cursor:pointer;
}
.right-drawer{
  width: 2000px;
  background: url(https://images.unsplash.com/photo-1434210330765-8a00109fc773?fit=crop&fm=jpg&h=600&q=80&w=1050) no-repeat center center fixed; 
  background-size: cover;
  position: absolute;
  top:0;
  right:-2000px;
}

Slide animation JS Codes

var w_h = $(window).height();
$('.main-body').height(w_h);
$('.right-drawer').height(w_h);

$('.menu').on('click',function(){
  if($(this).hasClass('fa-times')){
    $('.main-body').animate({'right':'0'},200);
    $('.right-drawer').animate({'right':'-2000px'},200);
    $(this).removeClass('fa-times').addClass('fa-bars');
  }else{
    $('.main-body').animate({'right':'2000px'},400);
    $('.right-drawer').animate({'right':'0'},400);
    $(this).removeClass('fa-bars').addClass('fa-times');
  }
  
});
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.