Как запустить(активировать) страницу html из css

@Segera · Регистрация: 03.06.2020

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

Суть вопроса:

HTML5
1
2
3
...
<section class="start"></section>
....

CSS
1
2
3
4
5
.start {
    /* background: url('../img/Cars/Concept/Rimak2080.png') no-repeat center center/cover; */
    /* background: url('https://wharferj.files.wordpress.com/2015/11/bio_north.jpg') no-repeat center center/cover; */
    background: url('../Responsive-Image-Carousel01.html');
}

Стартовать не новым фоном, а страницей *..html
Листинг не полный. В полном плавное появление фона из картинки. Надо б заменить другой страницей. Модальное окно не подойдет. Т.е. старт внутри первой странице.
Наверное проще из JS. Это сильно изменит всю конструкцию. Пока думаю о более простом варианте.

krvsa · 05.02.2026, 11:13

Думается беда как раз в отсутствии именно знаний вообще и наличии каких-то фантазий.

@Segera · 06.02.2026, 07:11 **[ТС]**

Сообщение от Usaga

Каким боком тут TypeScript и загрузка из CSS?

Поясняю. С некоторыми извинениями из-за не достаточно понятного вопроса темы. Такое бывает.
TS приведен как пример для старта страницы из JS. А не CSS. Это всё с такого бока.
Вопрос темы подразумевает использованием пример для пикчи.
background: url('../Responsive-Image-Carousel01.html'); для класса в CSS. Это знакомый пример старта для картинки с многими опциями. На весь экран или по-другому.
Т.е. есть класс .start {} в CSS. Есть возможность из этого класса и в CSS стартовать страницу .html с другого сайта или каталога с исходного сайта. Разумеется не используя background: url(), а другой метод.
Если вопрос разложить максимально для понимания, то я старался.
Зачем это?
.start {} в CSS обеспечивает плавное раскрытие картинки с фиксацией в %% сколько появилось. Есть запрос сделать именно не для картинки, а страницы со своим содержимым и интерактивностью.
Если появилось желание дать уроки по TS, могу приветствовать. Правда пока в этом нет актуальных запросов и конечно есть где получить некоторый уровень.

@voraa · 06.02.2026, 07:46

Сообщение от Segera

Есть запрос сделать именно не для картинки, а страницы со своим содержимым и интерактивностью.

Только iframe. На счет плавности открытия - не думаю, что всегда получится. И в чем плавность должна проявляться в увеличении размера или в постепенном проявлении (увеличении яркости)?
Если достаточно только html (без css и js) то сойдет и обычный div - вставь в него html и "проявляй" как хочешь.

@Usaga · 06.02.2026, 08:55

Сообщение от Segera

Есть запрос сделать именно не для картинки, а страницы со своим содержимым и интерактивностью.

Если нужно заменить всю текущую страницу другой (с применением эффектов), то решения нет ни на CSS, ни на JS. Если нужно в текущую страницу встроить, то это IFRame как выше заметили. Его можно немного анимировать, в том числе и стилями.

Сообщение от Segera

Если появилось желание дать уроки по TS

Не появилось. И я не знаю с чего ты взял, что должно было появиться.

@tgarl · 06.02.2026, 10:02

Ваша задача не решается через CSS, css это стилистика, но не подгрузка контента.
В html подгрузить контент можно через iframe или устаревшие теги embed, object
Остальная динамика осуществляется либо через браузерные скрипты типа JavaScript(тот же ajax) либо серверными языками(но они подгружают в основном только один раз в момент загрузки страницы)

Дальше выбирайте как будете комбинировать эти возможности по отношению к вашей задаче.
Я бы остановился на одном из 2 вариантов:
1. на сервреном языке подгрузка содержимого в скрытый блок внутри <section class="start"></section> и далее анимация проявления блока из скрытого в видимый
2. отложенным JS(после загрузки DOM) при помощи ajax подгрузка содержимого с другой страницы
3, аналог первого пункта, но только через iframe

@Usaga · 06.02.2026, 10:08

tgarl, он от пункта №1 хочет избавиться, чтобы снять нагрузку с сервера.

@voraa · 06.02.2026, 11:17

Сообщение от Usaga

tgarl, он от пункта №1 хочет избавиться, чтобы снять нагрузку с сервера.

А серверу не все равно, что передавать? 200K изображений или 200K html, если статика?

@Usaga · 06.02.2026, 11:19

voraa, блин. Я прогнал) Это я в контексте другой темы ответил, где чел хотел трафик пустить мимо сервера)

@Segera · 06.02.2026, 20:15 **[ТС]**

Сообщение от tgarl

Ваша задача не решается через CSS, css это стилистика, но не подгрузка контента.

Да понял.

Сообщение от Usaga

он от пункта №1 хочет избавиться, чтобы снять нагрузку с сервера.

Понимаю ситуацию, когда недостаток информации, требует генерации фантазий. Не исключено у меня такое было.
Попробую исправить:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
 
<head>
    <title>Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="src/styles.css">
</head>
 
<body>
    <section class="start"></section>
    <div class="loading-text">0%</div>
 
    <script src="src/index.js">
    </script>
</body>
 
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
* {
  box-sizing: border-box;
}
 
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}
.start {
  background: url('https://avatars.mds.yandex.net/i?id=37cee65fd2d483edcaa7a5d374d378e2_l-4571838-images-thumbs&n=13') no-repeat center center/cover;
 /*Здесь могла быть ваша реклама из другой страницы :) */
  position: absolute;
  top: -30px;
  left: -30px;
  width: calc(100vw + 60px);
  height: calc(100vh + 60px);
  z-index: -1;
  filter: blur(0px);
}
.loading-text {
  font-size: 50px;
  color: rgb(67, 171, 35);
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const loadText = document.querySelector('.loading-text')
const bg = document.querySelector('.start')
 
let load = 0
 
let int = setInterval(blurring, 30)
 
function blurring() {
    load++
 
    if (load > 99) {
        clearInterval(int)
    }
 
    loadText.innerText = `${load}%`
    loadText.style.opacity = scale(load, 0, 100, 1, 0)
    bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`
}
 
const scale = (num, in_min, in_max, out_min, out_max) => {
    return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
}

Могу упростить для просмотра: https://q6hsxw.csb.app/
клик => Yes, proceed to preview
Подумаю как вызвать не картинку, а страницу из js для класса start

@Labusa · 06.02.2026, 20:25

Сообщение от Segera

Подумаю как вызвать не картинку, а страницу из js для класса start

Обязательно должна быть страница? Можно с помощью js создать нужные элементы и отобразить их на странице. А если контент динамический, то послать запрос на сервер через аякс, получить ответ и создать нужные элементы с нужным содержанием.

@Segera · 06.02.2026, 20:28 **[ТС]**

Сообщение от Labusa

Обязательно должна быть страница?

страница с другого сайта, в которой свой интерактив.
Идея с картинкой спорткара, просто идея для примера. Как должна грузиться страница.

@Labusa · 06.02.2026, 20:38

Сообщение от Segera

страница с другого сайта, в которой свой интерактив.

Похоже на XSS-уязвимость. А iframe не подходит, потому что они отправляют заголовок X-Frame-Options, запрещающий отображать на других сайтах? Я угадал? Уверен, что из этого ничего не получится.

@voraa · 06.02.2026, 21:14

Ну если бы для анимации еще использовать не таймеры, а requestAnimationFrame, то вполне нормально будет

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const loadText = document.querySelector('.loading-text')
const bg = document.querySelector('.start')
 
let timeStart = performance.now();
const animTime = 3000;
function blurring(ct) {
    const proc = Math.min((ct - timeStart) / animTime, 1);
    const opacity = 1 - proc;
    const filter = 30 * (1-proc);
    loadText.style.opacity = opacity;
    bg.style.filter = `blur(${filter}px)`;
    loadText.innerText = `${(proc*100).toFixed(0)}%`
    if (proc < 1) requestAnimationFrame(blurring)
}
requestAnimationFrame(blurring);

Добавлено через 3 минуты

Сообщение от Segera

страница с другого сайта, в которой свой интерактив.

Если не через iframe, то никак.

Добавлено через 19 минут
Нет, ну если та страница не слишком сложная и не меняется часто и не обращается к своим серверам, то теоретически проблема решаема.
Делаешь серверный скрипт, который скачивает страницу, парсит ее, вытягивает js и css, скачивает их, создавая локальные копии, меняет на скачанной странице урлы js и css на локальные и отдает страницу тебе, для загрузки в iframe.

@Segera · 07.02.2026, 19:20 **[ТС]**

Сообщение от Labusa

Похоже на XSS-уязвимость

не понял почему?

Сообщение от voraa

Ну если бы для анимации еще использовать не таймеры, а requestAnimationFrame, то вполне нормально будет

если здесь нет для класса .start выбор чего-то из ***.html, например интернет магазин, то придется согласиться

Сообщение от voraa

Если не через iframe, то никак.

Сообщение от voraa

Нет, ну если та страница не слишком сложная и не меняется часто и не обращается к своим серверам, то теоретически проблема решаема.

ну как сказать? К примеру страницы интернет магазина уровня я.маркет или озон, сложные или нет.
Ожидается появление из блюра с 0% с индикацией в 100% в полную резкость до 100% не просто как картинку, а обычная работа на странице, как если бы перешел из html с <a href="https://_" target="_blank">Наша страница</a>
Хотя ладно. Понимаю, приближается к ответу "слишком у 'золотой рыбки'"
Пока надеюсь найти способ выбора страницы в JS. Не обящательно брать в CSS, для получения результата.

@voraa · 07.02.2026, 21:29

Сообщение от Segera

К примеру страницы интернет магазина уровня я.маркет или озон, сложные или нет.

Не важно
Важно

Сообщение от voraa

и не обращается к своим серверам

А они обращаются. А вы из такой адаптированной страницы, которая грузится с вашего сервера не сможете обратиться к тому. Ибо CORS.

@Segera · 06.03.2026, 07:38 **[ТС]**

Сообщение от voraa

Ибо CORS.

про чём тут CORS. Нет намерения что-то считать и тем более в .json из страницы другого сайта.
Идея чтобы открылась из CSS index.html или какой-то url(...).
Команда background: url('../Responsive-Image-Carousel01.html'); и пример в начале темы показаны как пример картинки, которая грузится средством CSS.

@voraa · 06.03.2026, 11:40

Сообщение от Segera

показаны как пример картинки, которая грузится средством CSS.

Есть разница грузить картинки или

Сообщение от Segera

страница с другого сайта, в которой свой интерактив.

Новые блоги и статьи Все статьи Все блоги /
мат медиц модель 30. презентация проекта anaschu 27.08.2026 хоп хоп хоп хидахоп, а я кладую))	Как у меня протекала болезнь zorxor 27.08.2026 Здравствуйте, друзья! Эта запись блога предназначена именно для вас - для моих дорогих друзей, которые знали меня лично. Чтобы ответить на вопрос - а что же со мной произошло на самом деле? Я учился. . .	Нашел вот забавное видео о измерениях. Лучшее что я видел на эту тему kumehtar 26.08.2026 ILETXiw9bMQ Основная суть и тезисы по измерениям: 0D (Нулевое измерение): точка, не имеющая длины, ширины, высоты или объема. Объект не может перемещаться в 0D. 1D (Первое измерение):. . .	[EasyBuilder Pro] Памятка по разработке для панелей Weintek ФедосеевПавел 26.08.2026 Памятка по разработке для панелей Weintek ВВЕДЕНИЕ Ранее, при реализации проектов основное внимание уделял разработке управляющей программы для контроллера, а панели оператора доставалось время. . .
Модель по догадкам anaschu 25.08.2026 Прошло две недели. Я уже рассказывал, как разговаривал с сотрудниками у сортировки и как понял, что главная ветка — не про приёмку, а про отбор. Но тогда я думал, что понял механику. На этой неделе я. . .	Запись в регистр сведений независимо от заполненности табличной части Maks 25.08.2026 Реализация из решения ниже выполнена на нетиповом документе с несколькими табличными частями, разработанного в КА2. Задача: Обеспечить запись документа в регистр сведений независимо от. . .	Ноутбук Альфария kumehtar 24.08.2026 Встретился тут в сети ноутбук Альфария, примарха Альфа-Легиона. Хотя возможно, это ноутбук Омегона, разумеется. Ну как вам?	Мастера простых решений DevAlt 23.08.2026 В сишарп стэках winforms, да и wpf существует сложная система связывания источниках данных и элементов формы(текстовые поля и метки), опирается все это на технологию событий и мета. . .

krvsa 3864 / 1769 / 434 Регистрация: 14.03.2022 Сообщений: 4,458
	05.02.2026, 11:13
	Думается беда как раз в отсутствии именно знаний вообще и наличии каких-то фантазий. 0

@tgarl 469 / 432 / 120 Регистрация: 15.02.2012 Сообщений: 1,961
	06.02.2026, 10:02
	Ваша задача не решается через CSS, css это стилистика, но не подгрузка контента. В html подгрузить контент можно через iframe или устаревшие теги embed, object Остальная динамика осуществляется либо через браузерные скрипты типа JavaScript(тот же ajax) либо серверными языками(но они подгружают в основном только один раз в момент загрузки страницы) Дальше выбирайте как будете комбинировать эти возможности по отношению к вашей задаче. Я бы остановился на одном из 2 вариантов: 1. на сервреном языке подгрузка содержимого в скрытый блок внутри <section class="start"></section> и далее анимация проявления блока из скрытого в видимый 2. отложенным JS(после загрузки DOM) при помощи ajax подгрузка содержимого с другой страницы 3, аналог первого пункта, но только через iframe 0

@Usaga 14738 / 9512 / 1364 Регистрация: 21.01.2016 Сообщений: 35,902
	06.02.2026, 10:08
	tgarl, он от пункта №1 хочет избавиться, чтобы снять нагрузку с сервера. 0

@Usaga 14738 / 9512 / 1364 Регистрация: 21.01.2016 Сообщений: 35,902
	06.02.2026, 11:19
	voraa, блин. Я прогнал) Это я в контексте другой темы ответил, где чел хотел трафик пустить мимо сервера) 0