ЖМК-301/2. Веб-дизайн. Практическое занятие №8. Вертикальный 3D-параллакс
Вам нужно создать вертикальный параллакс с фоновой иллюстрацией и дополнительными иллюстрациями на прозрачном фоне (.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
Ссылки на выполненное задание принимаются в комментариях к этому посту для ЖМК-302 до 17:00 27 марта, для ЖМК-301 до 17:00 30 марта.
Комментарии
Отправить комментарий