CODEWITHSUNDEEP
javascripthtmlcss
Alan V K
Alan V K

Reputation: 109

Slide element in when opening page, and slide it out when closing page

I went through dozens of questions here, but nothing answers my problem.

Basically I want to have the same feature as on this website: http://madebyheart.co.uk/work/thrively/ - when you load the page the [X] and MENU buttons slide from top, and when you click [X] to close the page they slide back up...

I tried looking at their code but it gives me headache.

I assume that's done with CSS + JS, but I have no clue where to start.

Upvotes: 0

Views: 298

Answers (2)

Khushbu Vaghela
Khushbu Vaghela

Reputation: 619

Check this out.

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, -200%, 0);
    transform: translate3d(0, -200%, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, -200%, 0);
    transform: translate3d(0, -200%, 0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.site__title.mega {
  text-align: center;
  font-size: 60px;
}
.ji:hover {
	cursor: pointer;
}
.ji {
  padding: 2px 14px;
  border: 1px solid black;
}
<html>
<head>
  	<title>Bootstrap</title>
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1">
  	<link rel="stylesheet" type="text/css" href="setest_style.css">
  	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
      $(".ji").click(function(){
        $("#animationSandbox").removeClass("fadeInDown");
        $("#animationSandbox").addClass("fadeInUp");
      });
      });
    </script>
</head>
<body>  
<span id="animationSandbox" style="display: block;" class="fadeInDown animated">
  <h1 class="site__title mega"><span class="ji">X</span></h1>
</span>
</body>
</html>

EDIT:

For achieving fadein animation with display:inline-block; , you have to use fadein classes in inner divs as shown below.

      
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(200%, 0, 0);
    transform: translate3d(200%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(200%, 0, 0);
    transform: translate3d(200%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(200%, 0, 0);
    transform: translate3d(200%, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(-200%, 0, 0);
    transform: translate3d(-200%, 0, 0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


body {
  background: #f9f9f9;
  margin: 0;
}
a {
  text-decoration:underline;
  color:#000;
  position: relative;
}

/* ABOUT + CONTACT */

.hlinks {
  writing-mode: vertical-rl;
  position: fixed;
  right: 10%;
  top: 15px;
  display: inline;
  color: #000;
  font-size: 13px;
}

.hlinks2 {
  writing-mode: vertical-rl;
  position: fixed;
  right: 10%;
  top: 100px;
  display: inline;
  color: #000;
  font-size: 13px;
}
<span  style="display: inline-block;" >
          <div id="animationSandbox" class="hlinks fadeInLeft animated">
            <span>
            <a href="#" class="ij">ABOUT</a> &mdash;
            <a href="#">CONTACT</a>
            </span>
          </div>
</span>

Upvotes: 1

Mars.Tsai
Mars.Tsai

Reputation: 184

animate.css is good library , Should meet your needs

DEMO: https://daneden.github.io/animate.css/

Upvotes: 1

Related Questions