Современные информационные технологии. 4 курс. Лабораторное занятие №4. Интерактивные страницы на Coffeescript

марта 08, 2021

Современные информационные технологии. 4 курс. Лабораторное занятие №4. Интерактивные страницы на Coffeescript

Для реализации активного меню вам потребуется:

I) Скрипт динамического меню на Coffeescript
II) Параметры стилей в CSS
III) Традиционный HTML, встраиваемый отдельным постом в blogger

Сначала мы пишем сам CoffeeScript:

1) Параметры блоков контента:

block = $('.blocks__block')
bname = $('.blocks__name')
content = $('.blocks-content__content')
closeBtn = $('.blocks__content-close')
wHeight = $(window).outerHeight()
wWidth = $(window).outerWidth()
bHeight = block.outerHeight()
bWidth = block.outerWidth()
xVal = Math.round(wWidth / bWidth) + 0.03
yVal = wHeight / bHeight + 0.03

2) Функции контента в блоках:

expand = ->
num = $(this).index()
aBlock = block.eq(num)
if !aBlock.hasClass('active')
bname.css 'opacity', '0'
aBlock.css
'transform': 'scale(' + xVal + ',' + yVal + ')'
'-webkit-transform': 'scale(' + xVal + ',' + yVal + ')'
aBlock.addClass 'active'
openContent num
return

openContent = (num) ->
content.css
'transition': 'all 0.3s 0.4s ease-out'
'-webkit-transition': 'all 0.3s 0.4s ease-out'
aContent = content.eq(num)
aContent.addClass 'active'
return

closeContent = ->
bname.css 'opacity', '1'
content.css
'transition': 'all 0.1s 0 ease-out'
'-webkit-transition': 'all 0.1s 0 ease-out'
block.css
'transform': 'scale(1)'
'-webkit-transform': 'scale(1)'
block.removeClass 'active'
content.removeClass 'active'
return

3) Их размеры:

updateValues = ->
`var yVal`
`var xVal`
`var bWidth`
`var bHeight`
`var wWidth`
`var wHeight`
if block.hasClass('active')
aBlock = $('.blocks__block.active')
wHeight = $(window).height()
wWidth = $(window).width()
bHeight = block.height()
bWidth = block.width()
xVal = Math.round(wWidth / bWidth) + 0.03
yVal = wHeight / bHeight + 0.03
aBlock.css
'transform': 'scale(' + xVal + ',' + yVal + ')'
'-webkit-transform': 'scale(' + xVal + ',' + yVal + ')'
return

4) Ресайз окна:

$(window).on 'resize', updateValues
bname.on 'click', expand
closeBtn.on 'click', closeContent

У вас получится скрипт вида:

block = $('.blocks__block')
bname = $('.blocks__name')
content = $('.blocks-content__content')
closeBtn = $('.blocks__content-close')
wHeight = $(window).outerHeight()
wWidth = $(window).outerWidth()
bHeight = block.outerHeight()
bWidth = block.outerWidth()
xVal = Math.round(wWidth / bWidth) + 0.03
yVal = wHeight / bHeight + 0.03

expand = ->
num = $(this).index()
aBlock = block.eq(num)
if !aBlock.hasClass('active')
bname.css 'opacity', '0'
aBlock.css
'transform': 'scale(' + xVal + ',' + yVal + ')'
'-webkit-transform': 'scale(' + xVal + ',' + yVal + ')'
aBlock.addClass 'active'
openContent num
return

openContent = (num) ->
content.css
'transition': 'all 0.3s 0.4s ease-out'
'-webkit-transition': 'all 0.3s 0.4s ease-out'
aContent = content.eq(num)
aContent.addClass 'active'
return

closeContent = ->
bname.css 'opacity', '1'
content.css
'transition': 'all 0.1s 0 ease-out'
'-webkit-transition': 'all 0.1s 0 ease-out'
block.css
'transform': 'scale(1)'
'-webkit-transform': 'scale(1)'
block.removeClass 'active'
content.removeClass 'active'
return

updateValues = ->
`var yVal`
`var xVal`
`var bWidth`
`var bHeight`
`var wWidth`
`var wHeight`
if block.hasClass('active')
aBlock = $('.blocks__block.active')
wHeight = $(window).height()
wWidth = $(window).width()
bHeight = block.height()
bWidth = block.width()
xVal = Math.round(wWidth / bWidth) + 0.03
yVal = wHeight / bHeight + 0.03
aBlock.css
'transform': 'scale(' + xVal + ',' + yVal + ')'
'-webkit-transform': 'scale(' + xVal + ',' + yVal + ')'
return

$(window).on 'resize', updateValues
bname.on 'click', expand

closeBtn.on 'click', closeContent

5) Сохраняем файл как .coffeecript. Чистый файл можно взять здесь: https://sites.google.com/site/konoplevmedia/clear.coffeescript

6) Конвертируем Coffeescript в JS здесь: https://coffeescript.org/#try

7) Копируем код JS и сохраняем его как .js, после чего загружаем на google sites

Переходим к CSS:

8) Указываем блочные элементы, шрифт и расположение текста:

* {
box-sizing: border-box;
}
body {
font-family: 'Open Sans';
font-weight: 400;
text-align: center;
}

9) параметры блоков:

.blocks {
position: fixed;
bottom: 0;
z-index: 1;
list-style-type: none;
display: flex;
width: 100%;
margin: 0;
padding: 0;
}

10) Их движение:

.blocks__block {
will-change: transform;
position: relative;
height: 20vh;
flex: 1;
transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

11) Далее - цвета для каждого блока - меняете на свои, а также последовательность
трансформации вкладок в модальные окна:

.blocks__block:nth-child(1) {
background: #4682B4;
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
.blocks__block:nth-child(2) {
background: #db5b4a;
-webkit-transform-origin: 25% 100%;
transform-origin: 25% 100%;
}
.blocks__block:nth-child(3) {
background: #e2bb7f;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.blocks__block:nth-child(4) {
background: #f67b7d;
-webkit-transform-origin: 75% 100%;
transform-origin: 75% 100%;
}
.blocks__block:nth-child(5) {
background: #a1775a;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}

12) Контент активных блоков:

.blocks__block.active {
z-index: 2;
}
.blocks-content {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
bottom: 0;
left: 0;
height: 100vh;
width: 100%;
}
.blocks-content__content {
will-change: transform, opacity;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-direction: column;
position: fixed;
width: 100%;
z-index: 3;
top: 0;
left: 0;
height: 100vh;
padding: 10vw;
font-size: 20px;
opacity: 0;
visibility: hidden;
text-align: center;
-webkit-transform: scale(0.9);
transform: scale(0.9);
transition: all 0.3s 0.2s ease-out;
}
.blocks-content__content.active {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
visibility: visible;
}

13) Параметры закрытых блоков:

.blocks-content .blocks__content-close {
position: absolute;
right: 2vw;
top: 2vh;
font-size: 30px;
cursor: pointer;
transition: all 0.2s ease-out;
}
.blocks-content .blocks__content-close:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}

14) Значения для текста в модальных окнах:

.blocks-content p {
font-size: 16px;
line-height: 2;
max-width: 800px;
}
.blocks-content h2 {
padding: 15px 30px;
font-weight: 300;
letter-spacing: 6px;
box-shadow: inset 0 0 0 3px #000;
}
.blocks-names {
position: fixed;
bottom: 0;
left: 0;
z-index: 2;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
font-size: 18px;
letter-spacing: 4px;
cursor: pointer;
transition: all 0.15s ease-out;
}
.blocks-names .blocks__name {
flex: 1;
height: 20vh;
display: flex;
align-items: center;
justify-content: center;
}

14) Сохраняете параметры стилей как .css

Теперь переходите собственно к HTML:

15) Открываем хэдер страницы:

<html lang="en">

<head>

16) Встраиваем параметры дефолтных стилей:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"></link>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,700" rel="stylesheet" type="text/css"></link>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet"></link>

17) Таким же образом подключаете свой .css

18) Закрываем хэдер, открываем общее содержимое:

</head>
<body>

19) Далее создаем блоки компонентов внутри тела страницы:

<html>
<body>

<ul class="blocks-names">
<li class="blocks__name">вкладка 1</li>
<li class="blocks__name">вкладка 2</li>
<li class="blocks__name">вкладка 3</li>
<li class="blocks__name">вкладка 4</li>
<li class="blocks__name">вкладка 5</li>
</ul>
<ul class="blocks">
<li class="blocks__block" id="1"></li>
<li class="blocks__block" id="2"></li>
<li class="blocks__block" id="3"></li>
<li class="blocks__block" id="4"></li>
<li class="blocks__block" id="5"></li>
</ul>
20) Формируем их открытый и закрытый вариант:

<ul class="blocks-content">
<li class="blocks-content__content">
<div class="content__close">
</div>
21) Затем указываем вкладки и текст в них:

<h2>Вкладка 1</h2>
<p>Ваш текст здесь<p>
<i class="blocks__content-close fa fa-close"></i>
</li>

<li class="blocks-content__content">
<h2>Вкладка 2</h2>
<p>Ваш текст здесь</p>
<i class="blocks__content-close fa fa-close"></i>
</li>

<li class="blocks-content__content">
<h2>Вкладка 3</h2>
<p>Ваш текст здесь</p>
<i class="blocks__content-close fa fa-close"></i>
</li>

<li class="blocks-content__content">
<h2>Вкладка 4</h2>
<p>Ваш текст здесь</p>
<i class="blocks__content-close fa fa-close"></i>
</li>

<li class="blocks-content__content">
<h2>Вкладка 5</h2>
<p>Ваш текст здесь</p>
<i class="blocks__content-close fa fa-close"></i>
</li>

22) Закрываем оставшиеся теги:
</ul>
</body>
</html>

24) Встраиваем через тег <script> минимальные значения Jquery - взять их можно здесь:https://sites.google.com/site/konoplevmedia/jqueryminmovz.js
23) Встраиваем скрипт JavaScript, полученный из Coffeescript

24) Закрываем страницу:
</body>
</html>

Если все успешно, то страница будет отображаться примерно так: https://konoplevdesign2.blogspot.com/2019/01/coffeescript.html

Ссылки на выполненное задание принимаются до 20:00 22 марта.