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

ноября 22, 2020

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

Вам нужно создать страницу с концепцией 3D-параллакс дизайна.
Рекомендованная тема: чистый блог с темой Notable1.

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

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

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) Сначала указываем слои с шириной и отступами:

/* foreground */
div#parallax-bg-1{
position: fixed;
width: 1200px;
top: 0;
left: 50%;
margin-left: -600px;
z-index: 1;
}
/* background middle layer*/
div#parallax-bg-2{
position: fixed;
width: 1200px;
top: 0;
left: 50%;
margin-left: -600px;
z-index: 2;
}
/* background layer */
div#parallax-bg-3{
position: fixed;
width: 960px;
top: 0;
left: 50%;
margin-left: -470px;
z-index: 3;
}
/* foreground */
div#parallax-bg-3 div{
background-repeat:no-repeat;
position:absolute;
display:block;
overflow:hidden;
}

3) Затем расположение объектов, которые будут двигаться по фону (заменяете на свои - с вашими параметрами, и отступами, если необходимо). Все объекты с прозрачным фоном (png) иначе они не будут отображаться как нужно. Все объекты загружаете на google sites и называете так, чтобы вам было понятно какие иллюстрации за что отвечают:

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):

/* middle layer clouds */
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) Те же объекты, расставленные в разных местах на странице - можно использовать одну и ту же небольшую картинку:

/*background layer clouds */
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 на странице параллакса.

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

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

<html lang="en">

<head>

<title>Parallax 3D</title>


9) Закрываете хэдер и далее в теге 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>

10) второй:

<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>

11) Третий:

<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>

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

</body>
</html>

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

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

</body>

</html>

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

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

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