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

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

I CSS

1) Открываем селектор страницы и указываем фоновую картинку. Чтобы она дублировалась вниз, выставьте достаточную высоту (например, как у меня):

body {

background:url('https://raw.githubusercontent.com/Dmitrykonn/locals/refs/heads/main/brickwallpale.jpg');

height:4600px;

}

2) Создаем элементы слоев для фонов 1, 2 и 3: 

div#parallax-bg-1{

position: fixed;

width: 1200px;

top: 0;

left: 50%; 

margin-left: -600px; 

z-index: 1;

}

div#parallax-bg-2{

position: fixed;

width: 1200px;

top: 0;

left: 50%; 

margin-left: -600px; 

z-index: 2;

}

div#parallax-bg-3{

position: fixed;

width: 960px;

top: 0;

left: 50%; 

margin-left: -470px; 

z-index: 3;

}

div#parallax-bg-3 div{

background-repeat:no-repeat;

position:absolute;

display:block;

overflow:hidden;

}

3) Указываем первую прозрачную картинку, которая будет зафиксирована вверху по центру экрана:

div#bg-3-1{

background:url('https://raw.githubusercontent.com/Dmitrykonn/locals/main/pumpkin.png');

width:529px;

height:757px;

top:-100px;

right:100px;

}

4) Затем вторую картинку которая будет ниже по центру:

div#bg-3-2{

background:url('https://raw.githubusercontent.com/Dmitrykonn/locals/main/tomato.png');

width:603px;

height:583px;

top:1050px;

right:70px;

}

5) Следующая иллюстрация с отступом вниз:

div#bg-3-3{

background:url('https://raw.githubusercontent.com/Dmitrykonn/locals/main/pepper.png');

width:846px;

height:713px;

top:1800px;

right:140px;

}

6) И иллюстрация, смещенная влево внизу:

div#bg-3-4{

background:url('https://raw.githubusercontent.com/Dmitrykonn/locals/main/sliced.png');

width:1104px;

height:684px;

top:2800px;

right:0px;

} 

7) Теперь зададим мелкие объекты среднего слоя:

div#parallax-bg-2 div{

background:url('https://raw.githubusercontent.com/Dmitrykonn/locals/main/chili.png');

background-repeat:no-repeat;

position:absolute;

display:block;

width:488px;

height:438px;

overflow:hidden;

}

div#bg-2-1{

top:100px;

left:-310px;

}

div#bg-2-2{

top:270px;

right:-70px;

}

div#bg-2-3{

top:870px;

left:-300px;

}

div#bg-2-4{

top:1120px;

right:-130px;

}

div#bg-2-5{

top:1620px;

left:140px;

}

div#bg-2-6{

top:720px;

left:340px;

}

8) Укажем размеры для объектов первого слоя:

div#parallax-bg-1 div{

background-repeat:no-repeat;

position:absolute;

display:block;

width:488px;

height:538px;

overflow:hidden;

}

9) И расставим иллюстрации в этот слой:

div#bg-1-1{

background:url('https://raw.githubusercontent.com/Dmitrykonn/locals/main/grass.png');

top:200px;

right:250px;

}

   

div#bg-1-2{

background:url('https://raw.githubusercontent.com/Dmitrykonn/locals/main/bean.png');

top:420px;

left:0px;

}

div#bg-1-3{

background:url('https://raw.githubusercontent.com/Dmitrykonn/locals/main/grass.png');

top:850px;

right:-290px;

}

div#bg-1-4{

background:url('https://raw.githubusercontent.com/Dmitrykonn/locals/main/bean.png');

top:1350px;

left:200px;

}

div#bg-1-5{

background:url('https://raw.githubusercontent.com/Dmitrykonn/locals/main/grass.png');

top:1200px;

left:-200px;

}  

10)   Теперь создадим движущиеся сверху объекты. У меня их три. Ниже в примере один. Назовите его любым классом по имени объекта и укажите скорость падения - в моем примере это 5 секунд:

имя вашего класса {

  animation: имя вашего класса 5s infinite;

}

11) задаем сценарий падения. В первом атрибуте translateY указываем точку входа. Если падение начинается сверху, то поставьте ноль. Во втором атрибуте translateY указываем высоту падения. Задайте подходящее для вашего параллакса значение:

@keyframes имя вашего класса {

  0% {

    transform: translateY(-80);

  }

  100% {

    transform: translateY(410vh);

  }

}

12) Повторите пункты 10 и 11 для второго и третьего объекта с другими классами.

 II HTML

13) Открываем стандартные параметры страницы:

<html lang="en">

<head>

  <meta charset="UTF-8"></meta>

  <title>Parallax</title>

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

 15) Закрываем </head>, внутри <body> открываем класс первого падающего объекта: 

<html>

<body>

<div class="имя вашего класса"><img src="ссылка на фото"></div>

16) Открываем третий слой параллакса, укажите в нем свой текст, его цвет и подходящий кегль:

  <div class="parallax-bg" id="parallax-bg-3">

  <div id="bg-3-1"></div>

  <div id="bg-3-2"></div>

  <div id="bg-3-3"><p><font color="green" size="+4">Tomatoes and Pepper</font></p></div>

  <div id="bg-3-4"><p><font color="green" size="+4">Cabbidge and Beans</font></p></div>

 </div>

17) Открываем второй слой. Также используйте свой текст:

 <div class="parallax-bg" id="parallax-bg-2">

  <div id="bg-2-1"></div>

  <div id="bg-2-2"></div>

  <div id="bg-2-3"></div> 

  <div id="bg-2-4"></div>

  <div id="bg-2-5"><p><font color="green" size="+4">Olives and cucumbers</font></p></div>

  <div id="bg-2-6"><p><font color="green" size="+4">Pumpkins,</font></p></div>

 </div>

 18) Добавляем второй и третий падающие объекты:

 <div class="имя вашего класса"><img src="ссылка на фото"></div>

  <div class="имя вашего класса"><img src="ссылка на фото"></div>

19) Добавляем первый слой. Также используйте свой текст:

 <div class="parallax-bg" id="parallax-bg-1">

  <div id="bg-1-1"></div>

  <div id="bg-1-2"></div>

  <div id="bg-1-3"></div>

  <div id="bg-1-4"><p><font color="red" size="+4"> <br />

<p>And something more...</p></font></p></div>

  <div id="bg-1-5"></div>

 </div>

</body>

</html>

 III JavaScript

20) Встраиваем библиотеку jQuery. Взять ее можно здесь: https://raw.githubusercontent.com/Dmitrykonn/locals/refs/heads/main/parallaxquery.js

21) Добавляем скрипт движения слоев фона:

jQuery(document).ready(function(){

  $(window).scroll(function(e){

  parallaxScroll();

});

 

function parallaxScroll(){

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

$('#parallax-bg-1').css('top',(0-(scrolled*.25))+'px');

$('#parallax-bg-2').css('top',(0-(scrolled*.4))+'px');

$('#parallax-bg-3').css('top',(0-(scrolled*.75))+'px');

}

 

 });

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

23* дополнительный пункт для пропустивших лекцию 7 мая - сделайте любую часть текста в параллаксе ссылкой, ведущей на ваше предыдущее задание.

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

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

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