Как запустить(активировать) страницу 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 · Регистрация: 03.06.2020

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

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

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

@voraa · Регистрация: 21.01.2024

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

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

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

@Usaga · Регистрация: 21.01.2016

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

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

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

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

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

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

@tgarl · Регистрация: 15.02.2012

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

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

@Usaga · Регистрация: 21.01.2016

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

@voraa · Регистрация: 21.01.2024

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

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

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

@Usaga · Регистрация: 21.01.2016

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

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

Сообщение от 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

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

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

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

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

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

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

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

@Labusa

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

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

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

@voraa · Регистрация: 21.01.2024

Ну если бы для анимации еще использовать не таймеры, а 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.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

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

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

@Usaga 14138 / 9366 / 1350 Регистрация: 21.01.2016 Сообщений: 35,234
	Вчера, 10:08
	tgarl, он от пункта №1 хочет избавиться, чтобы снять нагрузку с сервера. 0

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