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

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

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

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

@Evgeniy55 · 18.01.2017, 18:19

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

@mrtoxas · 18.01.2017, 18:33

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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
1
2
3
4
5
#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, все работает, спасибо большое!

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .

@Paul_Check 3 / 4 / 0 Регистрация: 28.07.2016 Сообщений: 192

	Появление слоя на странице с задержкой по времени 18.01.2017, 16:16. Показов 4132. Ответов 7 Метки нет (Все метки) Здравствуйте! Задача возникла: как можно сделать появление слоя на странице сайта по истечению заданного времени. Ни сразу, а через секунд 20 к примеру после загрузки страницы? 0

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

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

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

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