Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
0 / 0 / 1
Регистрация: 19.01.2015
Сообщений: 67

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

24.02.2022, 05:50. Показов 593. Ответов 3

Студворк — интернет-сервис помощи студентам
Здравствуйте! Можно ли сделать, чтобы на главной странице сайта при нажатии на кнопку эта страница раздвигалась в стороны, и показывалась другая страница? Всего две страницы, главная и с биографией. На главной просто стоит на фоне гифка и одна ссылка. При нажатии на ссылку хочется, чтобы основная в стороны ушла и сразу было видно страницу с биографией. Как это можно осуществить?
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
24.02.2022, 05:50
Ответы с готовыми решениями:

Долго грузится страница сайта
Почему то долго грузятся страницы сайта. Почему? <!DOCTYPE html> <html lang="en"> <head> ...

При тестировании сайта на локальном сервере(Apache 2.2.13) в Файрфоксе и IE вместо содержиого сайта отображается лишь пустая страница
тестирую сайт на локалхосте.Используемый сервер - Apache 2.2.13. В Опере содержимое сайта,расположенного на локалхосте, отображается...

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

3
1306 / 781 / 190
Регистрация: 19.09.2020
Сообщений: 1,993
24.02.2022, 21:20
Ну, можно наложить два блока и по клику один просто маржином уезжал в сторону и удалялся через JS.
Можно два рядом блока рядом по типу слайдера.
В общем это как я полагаю несложно, но весь дьявол как всегда в конкретных деталях конкретного макета.
0
0 / 0 / 1
Регистрация: 19.01.2015
Сообщений: 67
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;}  /* выбранная ссылка */
0
250 / 184 / 58
Регистрация: 12.03.2021
Сообщений: 1,043
02.03.2022, 16:13
Цитата Сообщение от CyberMen Посмотреть сообщение
подскажите, пожалуйста, как сделать хотя бы плавное исчезновение faded.
подскажите, пожалуйста, что за faded? несколько раз перечитал код, так и не нашел.
плавное исчезновение. включаем логику - визуальная составляющая интерфейсов - css. открываем гугл, пишем 'css animation'. читаем, радуемся.
Цитата Сообщение от CyberMen Посмотреть сообщение
А если указываю, то при уменьшении страницы фон не растягивается, а просто прямоугольный блок окружен белыми полями.
так всегда будет, если ширина указана в пикселях. % в помощь или почитать про другие величины.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
02.03.2022, 16:13
Помогаю со студенческими работами здесь

Раздвигающаяся область
Приветствую. Хочется сделать на странице некий список, при клике на пункт которого область между пунктами раздвигалась бы и в это й...

Главная страница сайта
Здравствуйте! Никто не подскажет? Когда я на сайте (вордпресс) устанавливаю главная страница сайта - статическая страница, то у меня не...

Не та страница сайта в серпе
Господа, такой вопрос: есть страница заточенная под однословный ВЧ, плотность слова 7-8%, само слово используется около 70 раз, внешних...

Внутренняя страница сайта
На сайте http://klassegrafik.de/ есть так сказать внутренняя страница. Помогите разобраться как сделать такую же страницу как после нажатия...

Welcome-страница для сайта
Доброго времени суток! Ребята, кто может подсказать как мне сделать welcome-страничку на сайте? Т.е. человек заходит на сайт и...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
Воспроизведение звукового файла с помощью 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 полиномов. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru