Вставьте элемент при открытии страницы и выдвиньте его при закрытии страницы

Я задавал здесь десятки вопросов, но ничего не ответил на мою проблему.

В основном я хочу иметь ту же функцию, что и на этом веб-сайте: http://madebyheart.co.uk/work/thrively/ - когда вы загружаете страницу, кнопки [X] и MENU сдвигаются сверху, а когда вы нажимаете [X], чтобы закрыть страницу, они возвращаются вверх ...

Я попытался посмотреть их код, но это вызывает у меня головную боль.

Я предполагаю, что это сделано с помощью CSS + JS, но я понятия не имею, с чего начать.

мы, за исключением того, что вам нужно попробовать что-то со своей стороны и разместить это здесь со своим вопросом.

Suresh Ponnukalai 11.04.2018 13:19
0
1
153
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

animate.css - хорошая библиотека, должна соответствовать вашим потребностям.

ДЕМО:https://daneden.github.io/animate.css/

Ответ принят как подходящий

Проверь это.

@-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>

РЕДАКТИРОВАТЬ:

Для достижения плавной анимации с display:inline-block; вы должны использовать fadein classes in inner divs, как показано ниже.

@-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>

отлично работает! буду реализовывать у себя на сайте и посмотрю как работает :) спасибо!

Alan V K 11.04.2018 15:32

Не могли бы вы взглянуть сюда: codepen.io/alanvkarlik/pen/BrbMrq - Я хочу, чтобы вертикальный текст скользил внутрь, но я думаю, что из-за того, что это «блочный» элемент, браузер разбивает слова, располагая их друг под другом. Я хочу, чтобы вся строка ПРО - КОНТАКТ была на одной линии и скользила сбоку

Alan V K 11.04.2018 17:00

Для этого вам нужно использовать display: inline-block, я отредактировал свой ответ и объяснил, как его использовать. Если это вам поможет, не забудьте принять ответ.

Khushbu Vaghela 12.04.2018 06:42

@ AlanVK .. Нашел решение, пожалуйста, взгляните на мои правки и не забывайте поднимать палец вверх .. :)

Khushbu Vaghela 12.04.2018 14:34

один последний вопрос - вы знаете, как теперь текст не скользит по краю окна, а вместо этого как бы исчезает с точки экрана. как сделать так, чтобы он выглядел так, как будто он скользит с края браузера?

Alan V K 14.04.2018 14:39

Другие вопросы по теме