Прокрутка веб-страницы с задержкой. Landing Page

@Phil Faster · Регистрация: 15.09.2014

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

Здравствуйте, уважаемые форумчане!

Я, мягко сказать, в программировании не шарю. Веб-дизайнер. Но предо мной встала такая вот цель: сделать так, чтобы блоки Lending Page, высотой с экран, прокручивались, как бы не сразу, а плавно, как будто с задержкой. В пример идеально подходит сайт Apple: apple.com/mac-pro/. И, чтобы можно было кнопками на клавиатуре (стрела вниз, стрелка вверх соответственно) эти блоки переключить.

К примеру, такой HTML-код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="main">
    <div class="block" style="background: #000;">
            
    </div>
    <div class="block" style="background: #F3F3F3;">
            
    </div>
    <div class="block" style="background: #000;">
            
    </div>
    <div class="block" style="background: #F3F3F3;">
            
    </div>
</div>

И к нему прикрепляется CSS:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
html, body {
margin: 0;
padding: 0;
}
.main {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.block {
width: 980px;
height: 100%;
margin: auto;
}

Так вот, как вы уже, наверное, поняли переключение должно происходить между блоками с классом "block".

Заранее спасибо тем, кто ответит! Буду очень благодарен!

@kalabuni · 15.09.2014, 18:22

Сообщение от Phil Faster

В пример идеально подходит сайт Apple: apple.com/mac-pro/

на морде сайта никаких блоков и "плавных прокруток" нет
если таковые имеются на какой-то из внутренних страниц сайта, то дайте точный адрес такой страницы

@Phil Faster · 15.09.2014, 18:34 **[ТС]**

Эм, я дал очень даже подробную ссылку, на нее даже нажать можно... Ссылка то: apple.com/mac-pro/. Страница Mac Pro.

@kalabuni · 15.09.2014, 18:56

Сообщение от Phil Faster

Эм, я дал очень даже подробную ссылку, на нее даже нажать можно... Ссылка то: apple.com/mac-pro/. Страница Mac Pro.

и где ж вы там прокрутку то увидели?
где, например, скроллбар, который является необходимым элементом того, что называется прокрутка?

на указанной вами странице реализована javascript-анимация в виде согласованного изменения позиции, размеров и фоновой картинки контейнера - и как раз прокрутки там нет ни разу

@Phil Faster · 15.09.2014, 19:04 **[ТС]**

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

и где ж вы там прокрутку то увидели?
где, например, скроллбар, который является необходимым элементом того, что называется прокрутка?

на указанной вами странице реализована javascript-анимация в виде согласованного изменения позиции, размеров и фоновой картинки контейнера - и как раз прокрутки там нет ни разу

А, да, наверное ошибся... Ну вы поняли, что я хочу сделать. Такое же движение как сделать?

z-z · 15.09.2014, 20:06

Phil Faster, например можно менять прозрачность и z-index.

У того блока, который сейчас виден

CSS
1
z-index: 100; opacity: 1;

У невидимого блока

CSS
1
z-index: 99; opacity: 0;

Соответственно при переключении на другой блок вы даете ему стили "видимого" блока. Ну а чтоб это делалось постепенно, используйте анимацию. Сейчас для этого даже скрипты не нужны, все можно сделать через css3 transition. А скриптом просто удалять и присваивать класс active (или как там вы для себя придумаете).

@Phil Faster · 15.09.2014, 20:49 **[ТС]**

Сообщение от z-z

Phil Faster, например можно менять прозрачность и z-index.

У того блока, который сейчас виден

CSS
1
z-index: 100; opacity: 1;

У невидимого блока

CSS
1
z-index: 99; opacity: 0;

Соответственно при переключении на другой блок вы даете ему стили "видимого" блока. Ну а чтоб это делалось постепенно, используйте анимацию. Сейчас для этого даже скрипты не нужны, все можно сделать через css3 transition. А скриптом просто удалять и присваивать класс active (или как там вы для себя придумаете).

Спасибо, вы прояснили для меня ситуацию. Большущее спасибо!

Новые блоги и статьи Все статьи Все блоги /
Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .

@Phil Faster 0 / 0 / 0 Регистрация: 15.09.2014 Сообщений: 4
	15.09.2014, 18:34 [ТС]
	Эм, я дал очень даже подробную ссылку, на нее даже нажать можно... Ссылка то: apple.com/mac-pro/. Страница Mac Pro. 0

Прокрутка веб-страницы с задержкой. Landing Page

Решение