ЖСО-201. Цифровые коммуникации. Практическое задание №11. Горизонтальный параллакс

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

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

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

Ссылки на выполненное в вашем блоге задание принимаются в комментариях к данному посту до 15:00 12 мая.


Комментарии

  1. lliinaoa7 мая 2025 г. в 00:02

    Ниязова Ангелина https://lliinaoa.blogspot.com/2025/05/minecraft.html

    ОтветитьУдалить
  2. Даша Караваева7 мая 2025 г. в 00:11

    https://dashaa777.blogspot.com/2025/05/parallax-body-margin-0-padding-0-height_7.html Караваева Даша

    ОтветитьУдалить
  3. Егор7 мая 2025 г. в 00:12

    Седов Егор https://egorsedov.blogspot.com/2025/05/body-margin-0-padding-0-height-4000px.html

    ОтветитьУдалить
  4. полина7 мая 2025 г. в 00:21

    https://polina125.blogspot.com/2025/05/parallax-body-margin-0-padding-0-height.html Чепель Полина

    ОтветитьУдалить
  5. Степан7 мая 2025 г. в 00:24

    https://malkovsa.blogspot.com/2025/05/parallax-body-margin-0-padding-0-height.html

    ОтветитьУдалить
  6. Евгений Старицын7 мая 2025 г. в 00:44

    Старицын Евгений https://new30574.blogspot.com/2025/05/blog-post.html

    ОтветитьУдалить
  7. Степан7 мая 2025 г. в 00:51

    https://steffed.blogspot.com/2025/05/blog-post.html

    ОтветитьУдалить
  8. SM7 мая 2025 г. в 03:37

    Митрошина https://msm2206.blogspot.com/2025/05/blog-post_7.html

    ОтветитьУдалить
  9. Кириллова Наталья8 мая 2025 г. в 04:48

    Кириллова https://kirillova-natalya-d.blogspot.com/2025/05/11.html Долги: практика №10 https://kirillova-natalya-d.blogspot.com/2025/05/10.html; практика № 6 https://kirillova-natalya-d.blogspot.com/2025/05/6.html

    ОтветитьУдалить
    Ответы
    1. Dmitry Konoplev11 мая 2025 г. в 02:34

      Текущее задание - "отлично", долги - "хорошо"

      Удалить
  10. Карина8 мая 2025 г. в 10:23

    Карина Ибрагимова
    https://karriinnkkaa.blogspot.com/2025/05/body-margin-0-padding-0-height-4000px.html

    ОтветитьУдалить
  11. лера8 мая 2025 г. в 15:02

    Валерия Бычкова https://leaeraea.blogspot.com/2025/05/body-margin-0-padding-0-height-4000px.html

    ОтветитьУдалить
  12. Карина9 мая 2025 г. в 01:18

    Ибрагимова и Юскина долг за Практическое задание №7. Рекламный баннер
    https://karriinnkkaa.blogspot.com/2025/05/gwd-page_9.html

    ОтветитьУдалить
  13. Дарья Перевышина9 мая 2025 г. в 14:31

    Перевышина Дарья https://dariartemi.blogspot.com/2025/05/body-margin-0-padding-0-height-4000px.html

    ОтветитьУдалить
  14. Елизавета10 мая 2025 г. в 10:38

    Елизавета Пермякова https://lililiad201.blogspot.com/p/tarot.html

    ОтветитьУдалить
  15. Ксения Кудряшова11 мая 2025 г. в 01:28

    https://akiraguuuuu.blogspot.com/2025/05/blog-post.html Ксюша Кудряшова

    ОтветитьУдалить
  16. Юшкова ЖСО-20111 мая 2025 г. в 02:51

    https://yushkovajso201.blogspot.com/2025/05/horizontal-parallax-v2.html

    ОтветитьУдалить
  17. Полина Юскина11 мая 2025 г. в 03:11

    https://polyausk.blogspot.com/2025/05/bags.html Юскина

    ОтветитьУдалить
  18. Елсуков Степан11 мая 2025 г. в 04:05

    https://elsukovstepan.blogspot.com/2025/05/parallax-body-margin-0-padding-0-height_11.html

    ОтветитьУдалить
  19. Пнёва Яна11 мая 2025 г. в 05:21

    https://pnevayana.blogspot.com/2025/05/blog-post.html Пнёва Яна

    ОтветитьУдалить
  20. Цибаняк Ярослав lit energy11 мая 2025 г. в 06:12

    https://ohotaohyeeah.blogspot.com/2025/05/hahaha.html

    ОтветитьУдалить
  21. Старицына Полина11 мая 2025 г. в 10:37

    Старицына Полина https://strawberrrrry.blogspot.com/2025/05/body-margin-0-padding-0-height-4000px.html
    Предыдущее задание: https://strawberrrrry.blogspot.com/2025/05/google-analytics.html (Для корректного отображения текста этого задания пришлось оставить черный фон темы, из-за чего новое задание отображается с черной полоской комментариев, иначе текст предыдущего задания не виден:( )

    ОтветитьУдалить
  22. Кузнецов Артём11 мая 2025 г. в 12:19

    Кузнецов Артем https://artemsvo2005.blogspot.com/2025/05/parallax-body-margin-0-padding-0-height.html

    ОтветитьУдалить
  23. Дмитрий Фомин11 мая 2025 г. в 13:15

    Фомин Дмитрий https://dmitriyzhso201.blogspot.com/2025/05/blog-post.html

    ОтветитьУдалить
  24. Нураева Лина11 мая 2025 г. в 22:53

    Нураева Лина https://nuraevalinaa.blogspot.com/2025/05/body-margin-0-padding-0-height-4000px.html

    ОтветитьУдалить
  25. Полина Быстрова11 мая 2025 г. в 23:01

    https://bystrova21.blogspot.com/2025/05/11.html
    Быстрова Полина

    ОтветитьУдалить
  26. ccc11 мая 2025 г. в 23:07

    шишканов григорий
    https://icealabaster.blogspot.com/2025/05/blog-post_11.html

    ОтветитьУдалить
    Ответы
    1. Dmitry Konoplev12 мая 2025 г. в 01:16

      Оценка "хорошо", в качестве верхнего фона должны быть иллюстрации на прозрачной подложке.

      Удалить
  27. Климова Диана12 мая 2025 г. в 03:05

    https://klimova-diana-110.blogspot.com/2025/05/la-roche-posay-body-margin-0-padding-0.html, долг: https://klimova-diana-110.blogspot.com/2025/05/10-google-analytics-201.html

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

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