Современные информационные технологии. 4 курс. Лабораторное занятие №1. Динамические объекты на Super CSS

Вам нужно сделать динамический объект, реализованный на основе скомпилированного Super CSS из SASS

Для этого вам потребуется:
- чистый файл .sass - его можно взять здесь: https://sites.google.com/site/konoplevmedia/clear.sass
- компилятор, например, Scout-App: http://scout-app.io/ 

Сначала вы задаете параметры стилей в SASS:
1) Создаем миксин для ключевых фреймов и анимации:


@mixin keyframes($animation-name)
  @-webkit-keyframes #{$animation-name}
    @content

@mixin animation($str)   
  -webkit-animation: #{$str}

2) Поскольку объект состоит у нас из трех динамических элементов, то мы три раза используем директиву @include с параметрами движения:

первый:

@include keyframes(flame-scale)
  0%
    transform: translate(-50%, -90%)       rotate(134deg) scale(1)
  50%
    transform: translate(-45%, -120%) rotate(134deg) scale(1.1)
  100%
    transform: translate(-50%, -90%) rotate(134deg) scale(1)

второй:

@include keyframes(flame-orange)
  0%
    transform: translate(-50%, -90%) rotate(134deg) scale(1)
  50%
    transform: translate(-45%, -110%) rotate(134deg) scale(1.2)
  100%
    transform: translate(-50%, -90%) rotate(134deg) scale(1)

третий:

@include keyframes(flame-red)
  0%
    transform: translate(-40%, -90%) rotate(134deg) scale(1)
  100%
    transform: translate(-55%, -220%) rotate(134deg) scale(0)  

3) Далее идут переменные цветов. Вы меняете их на свои - и в движущихся элементах и в статичных:

/* Default variables */
$bgcolor: #111217
$woodcolor: rgb(112,57,47)
$flameone: #FF0000
$flametwo: #DC143C
$flamethree: #f73B01

4) Размеры элементов:

=common-wood-property
  width: 15em
  height: 2em
  background: $woodcolor
  border-radius: .3em

=common-flame-property
  border-radius: .3em
  position: absolute
  transform: translate(-50%, -90%) rotate(134deg)

5) И, наконец, свойства элементов:

/* Element Properties */  
body
  background: $bgcolor

#night-fire
  position: relative

#nightfirewood
  +common-wood-property
  margin: 45% auto 0
  position: relative
  -webkit-transform: rotate(15deg)
  z-index: 99
  &:after
    content: ''
    position: absolute
    +common-wood-property
    top: 0
    left: 0
    -webkit-transform: rotate(-30deg)

.flameone
  +common-flame-property
  left: 50%
  top: -100%
  width: 8em
  height: 8em
  background: $flameone
  @include animation('flame-scale 1s infinite')

.flametwo
  +common-flame-property
  left: 50%
  top: -400%
  width: 5em
  height: 5em
  background: $flamethree 
  z-index: -1
  @include animation('flame-red 1s infinite')  
  
.flamethree
  +common-flame-property
  left: 50%
  top: -30%
  width: 5em
  height: 5em
  background: $flametwo 
  z-index: 2 
  @include animation('flame-orange 1s infinite')    

Вместе с комментариями у вас получится код вида (копируйте именно его, чтобы не поставить лишних пробелов в SASS - иначе создать Super CSS не получится):

/* SASS Mixin for Animation */

@mixin keyframes($animation-name)
  @-webkit-keyframes #{$animation-name}
    @content

@mixin animation($str)   
  -webkit-animation: #{$str} 

@include keyframes(flame-scale)
  0%
    transform: translate(-50%, -90%)       rotate(134deg) scale(1)
  50%
    transform: translate(-45%, -120%) rotate(134deg) scale(1.1)
  100%
    transform: translate(-50%, -90%) rotate(134deg) scale(1)

@include keyframes(flame-orange)
  0%
    transform: translate(-50%, -90%) rotate(134deg) scale(1)
  50%
    transform: translate(-45%, -110%) rotate(134deg) scale(1.2)
  100%
    transform: translate(-50%, -90%) rotate(134deg) scale(1)

@include keyframes(flame-red)
  0%
    transform: translate(-40%, -90%) rotate(134deg) scale(1)
  100%
    transform: translate(-55%, -220%) rotate(134deg) scale(0)  

/* Default variables */
$bgcolor: #111217
$woodcolor: rgb(112,57,47)
$flameone: #FF0000
$flametwo: #DC143C
$flamethree: #f73B01

=common-wood-property
  width: 15em
  height: 2em
  background: $woodcolor
  border-radius: .3em

=common-flame-property
  border-radius: .3em
  position: absolute
  transform: translate(-50%, -90%) rotate(134deg)

/* Element Properties */  
body
  background: $bgcolor

#night-fire
  position: relative

#nightfirewood
  +common-wood-property
  margin: 45% auto 0
  position: relative
  -webkit-transform: rotate(15deg)
  z-index: 99
  &:after
    content: ''
    position: absolute
    +common-wood-property
    top: 0
    left: 0
    -webkit-transform: rotate(-30deg)

.flameone
  +common-flame-property
  left: 50%
  top: -100%
  width: 8em
  height: 8em
  background: $flameone
  @include animation('flame-scale 1s infinite')

.flametwo
  +common-flame-property
  left: 50%
  top: -400%
  width: 5em
  height: 5em
  background: $flamethree 
  z-index: -1
  @include animation('flame-red 1s infinite')  
  
.flamethree
  +common-flame-property
  left: 50%
  top: -30%
  width: 5em
  height: 5em
  background: $flametwo 
  z-index: 2 

  @include animation('flame-orange 1s infinite')    

6) Сохраняете файл .sass

7) Запускаете его в Scout-App, и, указав папку для конечного файла, компилируете в super CSS (предпочтительные параметры - development - expanded)

Порядок действий с компилятором:

a) Запускаете exe файл напрямую из архива

b) Создаете папки для исходного файла и конечного файла

c) Добавляете папку с SASS серой кнопкой Add a project

d) В разделе Stylesheet Directories указываете исходную папку (Input Folder) и папку в которой будет сформирован Super CSS (Output Folder)

e) В разделе Environment выбираете Development

f) В выпадающем меню - expanded

g) Line Endings оставляете по умолчанию (default)

h) Затем справа вверху жмете на синюю кнопку справа от названия проекта






Программа подаст звуковой сигнал, когда в конечной папке будет создан файл Super CSS

Далее переходите в blogger и начинаете работу с HTML:
8) Указываете стандартные параметры:

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

9) Встраиваете ваш super CSS прямо внутрь HTML-документа через тег <style>

10) Закрываете тег </head>

11) Внутри тега <body> создаете класс динамических объектов, в той же последовательности, в которой они были у вас в .sass:


<div id="night-fire">
  <div id="nightfirewood"></div>
  <div class="flameone"></div>
  <div class="flametwo"></div>
  <div class="flamethree"></div>
</div>

12) Закрываете теги страницы:
  
</body>

</html>

Если все сделано правильно у вас должен получиться вот такой динамический объект:

Ссылки на выполненное задание принимаются до 18:00 9 февраля. Следующее занятие - 11 февраля.