Слайд двух страничек

Есть две страницы( enter.html - вход на сайт и index.html- главная страница). На странице enter по середине логотип. Хочу сделать что бы при нажатии на логотип страница enter.html слайдом уезжало вверх а index.html появлялось слайдом снизу. Как можно такое реализовать. Заранее спасибо! )
no image

Аноним

4 февраля, 16:37
414

Нет комментариев

Добавить комментарий
Вы не можете оставлять комментарии. Чтобы добавить комментарий, залогиньтесь или зарегистрируйтесь
Вы не можете голосовать. Чтобы проголосовать, залогиньтесь или зарегистрируйтесь

1 ответ

enter.html

<html>
<head>
  <script type="text/javascript" src="jq.js"></script>
<style>
#logo {
    height: 20%;
    margin:10em;
    position: relative;
  left:20%;
    width: 20%;
  background:#f0f;
}
</style>
</head>
<body>
  <div id="logo">1312312<br>12312323</div>
  <script type="text/javascript" charset="utf-8">
  $(function() {
    function redirectPage() {
      window.location = "index.html";
    }
    $("#logo").click(function () {
      $(this).slideUp("slow", redirectPage);
    });
  });
  </script>
</body>
</html>



index.thml

<html>
<head>
  <script type="text/javascript" src="jq.js"></script>
<style>
#content {
  display:none;
    height: 20%;
    margin:10em;
    position: relative;
  left:20%;
    width: 20%;
  background:#f0f;
}
</style>
</head>
<body>
  <div id="content">1312312<br>12312323</div>
  <script type="text/javascript" charset="utf-8">
  $(function() {
    $("#content").slideDown();
  });
  </script>
</body>
</html>
        Есть минимум два варианта, для описаной анимации: <br>

1. Сделать из enter.html и index.html одну, когда происходит клик по логотипу он "пропадает" и показываем остальной контент.
2. На странице enter.html делаем анимацию исчезновения по клику на логотип и по окончании анимации форвардим на страницу index.html.

Оба варианта делаются простыми функциями jquery. Если можно, код страницы enter.html в студию)
Исправленный index.html, с анимацией, как в сабже.

<html>
<head>
  <script type="text/javascript" src="jq.js"></script>
<style>
#content {
    height: 20%;
    margin:10em;
    position: relative;
  left:20%;
    width: 20%;
  background:#f0f;
}
#fake_content{
  height:100%;width:100%;
}
#holder {
overflow:hidden;height:100%;width:100%;
}
</style>
</head>
<body>
  <div id="holder">
    <div id="fake_content"></div>
    <div id="content">1312312<br>12312323</div>
  </div>
  <script type="text/javascript" charset="utf-8">
  $(function() {
    $("#fake_content").slideUp();
  });
  </script>
</body>
</html>
no image

Аноним

4 февраля, 16:37

Нет комментариев

Добавить комментарий
Вы не можете отвечать на вопросы. Чтобы ответить на вопрос, пожалуйста залогиньтесь или зарегистрируйтесь
Работа в Украине
Вакансии от WORK.ua
Игровой дизайнер
Киев, Boolat Games
Инженер-программист информационной безопасности
Одесса, Пивденный, Акционерный Банк
Спеціаліст з підключення інтернету, 8500 грн.
Теребовля, Колумбус
Программист 1С
Днепр, Сокол
Программист 1С, 30000 грн.
Киев, Агро-Регіон, ПЗ, ТОВ
Системный администратор web-сайтов
Одесса, Пивденный, Акционерный Банк
Junior SMM-менеджер
Киев, Soda Solutions
Интернет-маркетолог SEO PPC, 35000 грн.
Киев, Рембаза