Появление слоя на странице с задержкой по времени

@Paul_Check · Регистрация: 28.07.2016

Author24 — интернет-сервис помощи студентам

Здравствуйте! Задача возникла: как можно сделать появление слоя на странице сайта по истечению заданного времени. Ни сразу, а через секунд 20 к примеру после загрузки страницы?

@Evgeniy55 · 18.01.2017, 18:19

это на JS делается через load насколько помню, напиши в раздел с JS

@mrtoxas · 18.01.2017, 18:33

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    .block{
      width:100px;
      height: 100px;
      background-color:red;
      opacity: 0;
      animation:anim .1s 20s linear forwards;
    }
    @keyframes anim{
      0%{ opacity: 0; }
      100%{ opacity: 1; }
    }
  </style>
</head>
<body>
  <div class="block"></div>
</body>
</html>

@Paul_Check · 21.01.2017, 11:07 **[ТС]**

а как связать с уже готовым кодом слоя с формой?

HTML5

<div id="Layer1" style="position:absolute;overflow:hidden;text-align:left;" title="">
<div id="wb_Form1" style="position:absolute;left:15px;top:4px;width:531px;height:182px;z-index:18;">
<form name="Form1" method="post" action="<?php echo basename(__FILE__); ?>" enctype="multipart/form-data" id="Form1">
<input type="hidden" name="formid" value="form1">
<div id="wb_Text1" style="position:absolute;left:10px;top:15px;width:82px;height:16px;z-index:13;text-align:left;">
<span style="color:#000000;font-family:Arial;font-size:13px;">Ваше имя:</span></div>
<input type="text" id="Editbox1" style="position:absolute;left:102px;top:15px;width:419px;height:23px;line-height:23px;z-index:14;" name="Editbox1" value="">
<div id="wb_Text2" style="position:absolute;left:10px;top:45px;width:82px;height:16px;z-index:15;text-align:left;">
<span style="color:#000000;font-family:Arial;font-size:13px;">Ваш вопрос:</span></div>
<textarea name="TextArea1" id="TextArea1" style="position:absolute;left:102px;top:45px;width:417px;height:98px;z-index:16;" rows="5" cols="63"></textarea>
<input type="submit" id="Button1" name="" value="Задать вопрос" style="position:absolute;left:198px;top:150px;width:146px;height:25px;z-index:17;">
</form>
</div>
</div>

Добавлено через 17 часов 47 минут
mrtoxas, не получается никак связать это все( без вас не разберусь..

@thedude · 21.01.2017, 12:12

CSS

#Layer1 {opacity:0; animation: anim 0.1s 20s linear forwards;}
@keyframes anim {
  0%{ opacity: 0; }
      100%{ opacity: 1; }
}

HTML5

1	<div id="Layer1" style="position:absolute;text-align:left;" title="">

https://jsfiddle.net/8cfxr52x/

@Paul_Check · 21.01.2017, 12:51 **[ТС]**

thedude, а CSS куда прописать нужно? отдельным файлом или в этом же документе?

@thedude · 21.01.2017, 14:21

Либо вынести css стили во внешний файл, либо в самом html документе указать стили между тегами <style></style>

@Paul_Check · 22.01.2017, 12:42 **[ТС]**

thedude, все работает, спасибо большое!

@Paul_Check 3 / 4 / 0 Регистрация: 28.07.2016 Сообщений: 192
		1
	Появление слоя на странице с задержкой по времени 18.01.2017, 16:16. Показов 3911. Ответов 7 Метки нет (Все метки) Здравствуйте! Задача возникла: как можно сделать появление слоя на странице сайта по истечению заданного времени. Ни сразу, а через секунд 20 к примеру после загрузки страницы? 0

@Evgeniy55 108 / 102 / 35 Регистрация: 14.03.2014 Сообщений: 586
	18.01.2017, 18:19	2
	это на JS делается через load насколько помню, напиши в раздел с JS 0

@Paul_Check 3 / 4 / 0 Регистрация: 28.07.2016 Сообщений: 192
	21.01.2017, 12:51 [ТС]	6
	thedude, а CSS куда прописать нужно? отдельным файлом или в этом же документе? 0

@thedude 36 / 37 / 23 Регистрация: 31.05.2014 Сообщений: 131
	21.01.2017, 14:21	7
	Либо вынести css стили во внешний файл, либо в самом html документе указать стили между тегами `<style></style>` 1

@Paul_Check 3 / 4 / 0 Регистрация: 28.07.2016 Сообщений: 192
	22.01.2017, 12:42 [ТС]	8
	thedude, все работает, спасибо большое! 0