Веб-дизайн и верстка. ЖСО-201. Лабораторное занятие №9. 3D-Parallax дизайн

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

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

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

I) Подключить библиотеку jQuery - скачать и разместить ее у себя (через google sites) можно из данного исходника: https://sites.google.com/site/konoplevmedia/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) Затем расположение объектов, которые будут двигаться по фону (заменяете на свои - с вашими параметрами, и отступами, если необходимо). Все объекты с прозрачным фоном - то есть подключаемые вами файлы (загрузите все фото на sites.google.com) должны быть в формате 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) Это второй пласт фона. Объекты которые движутся между основными объектами и подложкой. Также указываете их в виде файлов с прозрачным фоном, при необходимости меняете их положение:



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 после тега <title> на странице параллакса.

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

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


<html lang="en">

<head>
  
  <title>3D-Parallax</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 и сам JavaScript.
  
16) Закрываете все параметры:

</body>

</html>

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

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

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