ЖМК-301/2. Веб-дизайн. Практическое занятие №9. Горизонтальный 3D-параллакс

Вам нужно создать горизонтальный параллакс с фоновой иллюстрацией, четырьмя иллюстрациями (на прозрачном фоне) и описанием к каждой иллюстрации (заголовок и основной текст). Фото загрузите в репозиторий. 

CSS

1) Открываем селектор страницы. Укажите в нем ваше основное фоновое фото. Используйте зеркально ориентированное фото для совпадения вертикальных и горизонтальных границ:

  body {

  margin: 0;

  padding: 0;

  height: 4000px;

  background: url("ваше фото");

}

2) добавляем идентификатор контейнера:

#container {

  position: fixed;

  top: 0;

  left: 0;

  width: 400%;

  height: 100vh;

  display: flex;

    }

3) секцию контейнера:

#container .section {

  position: relative;

  width: 100%;

  height: 100%;

  padding: 100px;

  box-sizing: border-box;

  display: flex;

  justify-content: center;

  align-items: center;

}

4) блок контента внутри нее:

#container .section .content {

  display: flex;

  justify-content: center;

  align-items: center;

}

5) текста внутри блока:

#container .section .content .text {

  margin-right: 50px;

  max-width: 400px;

  color: LightCyan;

}

6) заголовка:

#container .section .content .text h1{

  margin: 0;

  padding: 0;

  font-size: 3em;

}

7) размера абзацев:

#container .section .content .text p{

  font-size: 1.1em;

}

8) и минимальный размер иллюстрации:

#container .section .content img {

  min-width: 400px;

}

HTML

9) Открываем теги верхней части страницы, указываем название вкладки параллакса:

<html lang="en" >

<head>

  <meta charset="UTF-8">

  <title>Parallax</title>

10) Встраиваем CSS

11) закрываем </head> и открываем <body>

12) Начинаем с первого блока. Открываем контейнер, секцию и блок с контентом. Чуть ниже добавляем первую иллюстрацию:

<div id="container">

  <div class="section">

    <div class="content">

      <div class="text">

        <h1><a href="#">Заголовок</a></h1>

        <p>Текст<hr>

          Текст<hr>

        Текст</p>

      </div>

      <img src="первая иллюстрация">

    </div>

  </div>

13) Повторяем пункт 12 с блока секции несколько раз - для второго, третьего и четвертого изображения и сопутствующего текста.

14) Закрываем идентификатор контейнера.

15) Встраиваем библиотеку jQuery отсюда: https://code.jquery.com/jquery-3.4.1.js

16) Встраиваем следующий JavaScript:

  $(window).scroll(function() {

  var scroll = $(window).scrollTop();

  var dh = $(document).height();

  var wh = $(window).height();

  value = (scroll /(dh-wh)) * 100;

  $('#container').css('left', - value * 3 + '%');

})

17) Закрываем </body> и </html>

Если все верно, то ваш параллакс будет выглядеть примерно так: https://konoplevdigital2.blogspot.com/p/horizontal-parallax.html

Для оптимизации отображения отключите в настройках блога левую боковую панель если не делали этого ране (дизайн - боковая панель - сделать все элементы неактивными).

Ссылки на выполненное задание принимаются в комментариях к этому посту для ЖМК-302 (кто присутствовал на практике 31 марта) до 17:00 3 апреля, кто не присутствовал- до 17:00 1 апреля, для ЖМК-301 до 17:00 6 апреля.


РЕЗУЛЬТАТЫ (данные обновляются):

Акимкина Олеся - 5

Ананина Виктория - 5

Андрюк Анастасия - 5

Ахрарова Виктория - 5

Власов Максим - 5

Гайфуллина Анна - 5

Гостева Полина - 5

Григорьева Екатерина - 5

Добышева Таисия - 5

Жукова Виктория - 5

Зубко Сабина - 5

Климович Мария - 5

Кобякова Дарья - 4

Козилова Елизавета - 5

Корнилова Полина - 5

Куликова Мария - 5

Мамонтова Мария - 5

Маханек Вера - 5

Орлова Арина - 5

Слободская Елизавета - 4

Хайруддинов Тимур - 4

Цветкова Виктория - 5

Шабалина Виктория - 5

Широкоумова Полина - 5

Щербакова Ангелина - 5



Комментарии

  1. Ангелина Щербакова31 марта 2026 г. в 01:44

    6 практика: https://kontrv.blogspot.com/p/6.html

    9 практика: https://kontrv.blogspot.com/p/9.html

    ОтветитьУдалить
  2. Виктория Шабалина31 марта 2026 г. в 02:39

    https://supervikaw.blogspot.com/p/parallax-html-body-margin-0-padding-0.html

    ОтветитьУдалить
  3. Polina Shirokoumova31 марта 2026 г. в 04:43

    https://polinashirokoumova.blogspot.com/2026/03/minions-body-margin-0-padding-0-height_16.html

    ОтветитьУдалить
  4. Слободская Елизавета31 марта 2026 г. в 14:02

    https://slobodskayaelizavta.blogspot.com/p/body-margin-0-padding-0-height-4000px_83.html

    ОтветитьУдалить
  5. Victoriya1 апреля 2026 г. в 04:49

    Жукова Виктория ЖМК-302
    https://whisk0ss.blogspot.com/p/horizontal-sneaker-parallax-root-text.html

    ОтветитьУдалить
  6. nasnrk1 апреля 2026 г. в 23:23

    https://uchebaandriuk.blogspot.com/2026/04/parallax-body-margin-0-padding-0-height.html

    ОтветитьУдалить
  7. Климович Мария2 апреля 2026 г. в 12:29

    https://mariaklimovich.blogspot.com/p/blog-page_2.html

    ОтветитьУдалить
  8. Ананина Виктория2 апреля 2026 г. в 21:53

    https://mediaeconomicsananina.blogspot.com/2026/04/parallax-body-margin-0-padding-0-height.html

    ОтветитьУдалить
  9. Зубко Сабина2 апреля 2026 г. в 22:38

    https://wasabibixoxo.blogspot.com/2026/04/parallax-body-margin-0-padding-0-height_2.html

    ОтветитьУдалить
  10. Max Vlasov2 апреля 2026 г. в 22:41

    https://maxvlasovblog.blogspot.com/p/body-margin-0-padding-0-height-4000px.html

    ОтветитьУдалить
  11. Акимкина Олеся2 апреля 2026 г. в 22:48

    https://akimkinaolesia.blogspot.com/p/parallax-body-margin-0-padding-0-height.html

    ОтветитьУдалить
  12. Полина Гостева2 апреля 2026 г. в 22:49

    https://gostevapolina.blogspot.com/2026/04/blog-post.html

    ОтветитьУдалить
  13. Арина Орлова2 апреля 2026 г. в 23:00

    https://philosopherarishka.blogspot.com/2026/04/body-margin-0-padding-0-height-4000px.html

    ОтветитьУдалить
  14. Вика Цветкова2 апреля 2026 г. в 23:00

    https://vikka56.blogspot.com/p/mlp-body-margin-0-padding-0-height.html

    ОтветитьУдалить
  15. Гайфуллина Анна3 апреля 2026 г. в 03:21

    Гайфуллина Анна, ЖМК-302:
    https://wev-desing.blogspot.com/p/blog-page_36.html

    ОтветитьУдалить
  16. Poly3 апреля 2026 г. в 05:01

    Корнилова Полина ЖМК-302
    Практика 8:
    https://pkornilova.blogspot.com/p/2.html
    Практика 9:
    https://pkornilova.blogspot.com/p/blog-page_3.html

    ОтветитьУдалить
  17. Дарья Кобякова3 апреля 2026 г. в 07:00

    https://dariakobykova.blogspot.com/2026/04/22-9.html# 9 Практика


    https://dariakobykova.blogspot.com/2026/03/20-6.html 6 практика

    ОтветитьУдалить
  18. Poly3 апреля 2026 г. в 08:13

    Корнилова Полина ЖМК-302
    Практика 6:
    https://pkornilova.blogspot.com/p/jennie.html
    Практика 1:
    https://pkornilova.blogspot.com/p/1.html

    ОтветитьУдалить
  19. Екатерина Григорьева4 апреля 2026 г. в 08:10

    https://besheniff.blogspot.com/2026/04/parallax.html

    ОтветитьУдалить
  20. Хайруддинов Тимур5 апреля 2026 г. в 00:33

    https://shadowdarksaid.blogspot.com/p/parallax-body-margin-0-padding-0-height.html

    ОтветитьУдалить
  21. Elizabeth Kozilova6 апреля 2026 г. в 00:41

    Добышева Таисия https://thdsop.blogspot.com/2026/04/parallax.html

    ОтветитьУдалить
  22. Viktoria6 апреля 2026 г. в 00:58

    Этот комментарий был удален автором.

    ОтветитьУдалить
  23. Viktoria6 апреля 2026 г. в 01:02

    https://vikitoria999.blogspot.com/2026/04/parallax-body-margin-0-padding-0-height.html
    виктория Ахрарова

    ОтветитьУдалить
  24. Elizabeth Kozilova6 апреля 2026 г. в 01:03

    Козилова Елизавета https://ekozil.blogspot.com/2026/04/parallax.html

    ОтветитьУдалить
  25. Маханек Вера6 апреля 2026 г. в 01:23

    Куликова Мария https://makhanekvera.blogspot.com/2026/04/html-body-margin-0-padding-0-height.html

    ОтветитьУдалить
  26. Elizabeth Kozilova6 апреля 2026 г. в 02:07

    Добышева Таисия Практика 8 : https://thdsop.blogspot.com/2026/04/parallax-jquerydocument.html

    ОтветитьУдалить
  27. Maria Mamontova6 апреля 2026 г. в 04:43

    https://marywow.blogspot.com/2026/04/parallax-body-margin-0-padding-0-height.html

    ОтветитьУдалить

Добавлять новые комментарии запрещено.