Раздвигающаяся страница сайта

@CyberMen · Регистрация: 19.01.2015

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

Здравствуйте! Можно ли сделать, чтобы на главной странице сайта при нажатии на кнопку эта страница раздвигалась в стороны, и показывалась другая страница? Всего две страницы, главная и с биографией. На главной просто стоит на фоне гифка и одна ссылка. При нажатии на ссылку хочется, чтобы основная в стороны ушла и сразу было видно страницу с биографией. Как это можно осуществить?

KingdaKa · 24.02.2022, 21:20

Ну, можно наложить два блока и по клику один просто маржином уезжал в сторону и удалялся через JS.
Можно два рядом блока рядом по типу слайдера.
В общем это как я полагаю несложно, но весь дьявол как всегда в конкретных деталях конкретного макета.

@CyberMen · 24.02.2022, 23:04 **[ТС]**

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

Ну, можно наложить два блока и по клику один просто маржином уезжал в сторону и удалялся через JS.
Можно два рядом блока рядом по типу слайдера.
В общем это как я полагаю несложно, но весь дьявол как всегда в конкретных деталях конкретного макета.

Ну я смог два блока наложить друг на друга, на основном фон из гифки и ссылка. Нажимая на ссылку хочу, чтобы основной блок либо разъехался, либо стал прозрачным. Поискал примеры на сайтах, но почему-то не работает. Есть рабочий пример подобного?

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

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

Ну, можно наложить два блока и по клику один просто маржином уезжал в сторону и удалялся через JS.
Можно два рядом блока рядом по типу слайдера.
В общем это как я полагаю несложно, но весь дьявол как всегда в конкретных деталях конкретного макета.

Вот для примера приложу свой код, подскажите, пожалуйста, как сделать хотя бы плавное исчезновение faded. И заодно как сделать, чтобы автоматически блок был на всю страницу, если не указываю ширину, то фон повторяется при уменьшении страницы или если окно делаю меньше, то блок огромный получается. А если указываю, то при уменьшении страницы фон не растягивается, а просто прямоугольный блок окружен белыми полями.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="textstyle.css" />
</head>
<body>
    <div class="main" style=" width: 1900px;">
        <div id="devheader" style="text-align:center;height: 850px;">
        </div>
        <div style="text-align:center; height: 160px;">
            <pre id="main1"><a class="href1" href="work.html">WORK</a> / <a class="href1" href="contact.html">CONTACT</a></pre>
        </div>
    </div>
    <div class="container">
        <div style="width: 700px; height: 962px; background-color: #156985; float: left;"><img src="Contact.png" width="700" height="960"/></div>
        <div style="height: 962px;"><p>If you want to order web development – you are very welcome to contact me. I am available for freelance projects.</p></div>        
    </div>
</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
29
30
* {
margin: 0;
padding: 0;
}
.main
{
position:fixed;
top: 0px;
background-image: url('Main1.gif');
background-repeat: no-repeat;
}
.container
{
}
#main1
{
    font-family:"Bookman Old Style";
    font-style: italic;
    color: red;
}
.href1
{
    font-family:"Bookman Old Style";
    font-style: italic;
    color: red;
    text-decoration:none;
}
a.href1:link {color:red;}    /* непосещенная ссылка */
a.href1:hover {color:white;}   /* курсор мыши над ссылкой */
a.href1:active {color:white;}  /* выбранная ссылка */

@Splaisto · 02.03.2022, 16:13

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

подскажите, пожалуйста, как сделать хотя бы плавное исчезновение faded.

подскажите, пожалуйста, что за faded? несколько раз перечитал код, так и не нашел.
плавное исчезновение. включаем логику - визуальная составляющая интерфейсов - css. открываем гугл, пишем 'css animation'. читаем, радуемся.

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

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

так всегда будет, если ширина указана в пикселях. % в помощь или почитать про другие величины.

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@CyberMen 0 / 0 / 1 Регистрация: 19.01.2015 Сообщений: 67

	Раздвигающаяся страница сайта 24.02.2022, 05:50. Показов 593. Ответов 3 Метки css, javascipt (Все метки) Здравствуйте! Можно ли сделать, чтобы на главной странице сайта при нажатии на кнопку эта страница раздвигалась в стороны, и показывалась другая страница? Всего две страницы, главная и с биографией. На главной просто стоит на фоне гифка и одна ссылка. При нажатии на ссылку хочется, чтобы основная в стороны ушла и сразу было видно страницу с биографией. Как это можно осуществить? 0

KingdaKa 1306 / 781 / 190 Регистрация: 19.09.2020 Сообщений: 1,993
	24.02.2022, 21:20
	Ну, можно наложить два блока и по клику один просто маржином уезжал в сторону и удалялся через JS. Можно два рядом блока рядом по типу слайдера. В общем это как я полагаю несложно, но весь дьявол как всегда в конкретных деталях конкретного макета. 0