Web-дизайн. 4 курс. Практическое занятие №4. 3D Parallax-дизайн

Вам нужно создать страницу с концепцией 3D-параллакс дизайна.

Рекомендованная тема: Notable1.
Для этого необходимо придумать параллакс-сценарий с логикой отображения, которая включает в себя: 
1) фон страницы; 
2) активные элементы, которые движутся по этому фону (основные и дополнительные) и 
3) текст страницы. 
Все указанные элементы должны отвечать общей идее и быть интегрированы. Данный параметр будет влиять на вашу итоговую оценку.

Чтобы реализовать данный сценарий вам потребуется:

I) Подключить библиотеку jQuery - скачать и разместить ее у себя в репозитории, можно из данного исходника: https://raw.githubusercontent.com/Dmitrykonn/locals/main/jquery.js

II) Подключить сам интерактивный сценарий. Для этого задаете параметры параллакса:

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');
}

 });

И сохраняете их как .js

III) Прописать непосредственно оформление параллакса в css:

1) Сначала вы задаете фон в параметре body. Обратите внимание, что фон должен быть подходящим к ширине страницы. Высота фона задает скроллинг параллакса в пикселях. То есть если у вас высота в 4600 пикселей (как в примере), а фон 1150 пикселей, то он будет дублироваться четыре раза. Так вы можете просчитать длину страницы.

body{
  background:url('https://sites.google.com/site/konoplevmedia/backgroundshort.png');
height:4600px;
}

2) Сначала указываем слои с шириной и отступами:



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) Затем расположение объектов, которые будут двигаться по фону (заменяете на свои - с вашими параметрами, и отступами, если необходимо). Все объекты с прозрачным фоном (png) иначе они не будут отображаться как нужно. Все объекты загружаете в репозиторий и называете так, чтобы вам было понятно какие иллюстрации за что отвечают:

div#bg-3-1{
background:url('https://sites.google.com/site/konoplevmedia/newsun.png');
width:529px;
height:757px;
top:-100px;
right:100px;
}
div#bg-3-2{
background:url('https://sites.google.com/site/konoplevmedia/newmoon.png');
width:603px;
height:583px;
top:1050px;
right:70px;
}
div#bg-3-3{
background:url('https://sites.google.com/site/konoplevmedia/newsun.png');
width:446px;
height:713px;
top:1800px;
right:140px;
}
div#bg-3-4{
background:url('https://sites.google.com/site/konoplevmedia/redmoon.png');
width:1104px;
height:684px;
top:2800px;
right:0px;
}

4) Это второй пласт фона. Объекты которые движутся между основными объектами и подложкой. Также указываете их в виде файлов с прозрачным фоном (png):


div#parallax-bg-2 div{
background:url('https://sites.google.com/site/konoplevmedia/verylittlecloud.png');
background-repeat:no-repeat;
position:absolute;
display:block;
width:488px;
height:138px;
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;
}

5) Те же объекты, расставленные в разных местах на странице - можно использовать одну и ту же небольшую картинку:


div#parallax-bg-1 div{
background-repeat:no-repeat;
position:absolute;
display:block;
width:488px;
height:138px;
overflow:hidden;
}
div#bg-1-1{
background:url('https://sites.google.com/site/konoplevmedia/verylittlecloud.png');
top:200px;
right:450px;
}
div#bg-1-2{
background:url('https://sites.google.com/site/konoplevmedia/verylittlecloud.png');
top:420px;
left:0px;
}
div#bg-1-3{
background:url('https://sites.google.com/site/konoplevmedia/verylittlecloud.png');
top:850px;
right:-290px;
}
div#bg-1-4{
background:url('https://sites.google.com/site/konoplevmedia/verylittlecloud.png');
top:1350px;
left:200px;
}
div#bg-1-5{
background:url('https://sites.google.com/site/konoplevmedia/verylittlecloud.png');
top:1200px;
left:-200px;
}

6) Сохраняете стили как .css и подключаете в коде HTML.

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

8) Указываете в HTML, что будете создавать параллакс:


<html lang="en">

<head>
  
  <title>Parallax Scrolling</title>
  
9) Затем встраиваете .css

10) Закрываете хэдер:

</head>

11) Далее в теге body помещаете фоны параллакса. Первый блок: 


<body> 
<html>
<body>
  <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"></div>
<div id="bg-3-4">
</div>
</div>
12) второй:


 <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"></div>
<div id="bg-2-6"></div>
</div>
13) Третий:


 <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"></div>
<div id="bg-1-5">
</div>
</div>
14) Закрываете параметры:

</body>
</html>

15) Далее встраиваете библиотеку jQuery и сам js.

16) Закрываете все параметры:

</body>

</html>

17) Вписываете несколько строк текста внутри параллакса (произвольно). В тексте также добавляете ссылку на произвольное слово и задаете ее цветом.

18) ссылку на выполненное задание оставляете в комментарии к данному посту до 15:00 3 ноября.

Как выглядит параллакс можно посмотреть здесь: https://konoplevdesign.blogspot.com/2018/10/parallax.html