Анимация элементов страницы

Нет сомнений, что содержимое сайта является главным для посетителей. Но принцип "встречают по одежке..." тоже никто не отменял. Поэтому оформление страницы является очень немаловажным! И анимация, ставшая широко доступной с приходом стандартов HTML5, является одним из самых выразительных средств оформления.

Данная система позволяет анимировать любое содержимое страницы! Более того, это делается буквально несколькими действиями мышки. Вам не потребуется прописывать сотни строк стилей и добавлять к ним куски кода на JavaScript. Поэтому призываю не переусердствовать! Хотя анимация в броузере выполняется с использованием аппаратного ускорения, а значит выполняется эффективно, но слишком большое ее количество может привести к "торомозам" - дергании при анимации.

Анимация элементов страницы. Настройка анимации для блоков осуществляется во вкладке "Анимация". Для того, чтобы анимировать иное содержимое, следует воспользоваться редактором аттрибутов. Выделите кусок текста или щелкните на изображении и нажмите в верхней панели редактора пиктограмму . В открывшемся окне перейдите на вкладку "Анимация".

Как видите, между полями во вкладках для анимации блоков и анимации остального контента нет разницы. Давайте рассмотрим настройки. В первую очередь надо задать момент запуска анимации. Это при вызове из системы, при загрузке страницы или при прокручивании страницы, когда элемент анимации появляется на экране. Впоследствии будет подробнее разъяснено событие вызова из системы. Также можно выбрать способ анимации. Это более шести десятков способов появления или исчезновения с экрана. В самом просто варианте следует указать вариант при загрузки страницы, вариант появления или исчезновения, время, в течении которого анимация будет происходить, а также задержку начала анимации после указанного события, т.е. загрузки страницы. Кроме того, следует указать будет ли анимированный элемент виден на странице до указанного события и после анимации.

Если вы ничего не знаете о программировании, дальше вам читать не имеет смысла!
Предоставленной информации вполне достаточно для оформления страницы. Но если вы что-то понимаете в программировании, то назначение остальных полей подскажет вам, что система позволяет составить сложные сценарии анимации.

В вашем распоряжении имеется функция системы Animate("параметры в виде строки"). Будем помнить, что ID - программное имя блока или элемента страницы можно установить либо при редактировании блока, либо вызвав редактор аттрибутов, нажав пиктограмму . Если вызвать эту функцию и в строке параметров просто указать ID элемента  и ничего более, то произойдет проигрывание анимации элемента с ID, с параметрами указанными в настройках анимации. Если же требуется выполнить анимацию с другими параметрами, то их можно через пробел перечислить следом за ID:
         Animate("ID способАнимации времяАнимации паузаПередАнимацией видимостьПеред видимостьПосле")
Если требуется несколько вызовов, то параметры можно указать в одной строке, разделив запятой. Итак, параметры, указанные в полях "в начале анимировать ID" и "в конце анимировать ID" предназначены именно для передачи в функцию Animate. Впрочем давайте рассмотрим один пример.
Здесь рассматривается анимация изображения с ID=img1. Указано, что после загрузки страницы  изображение должно выдвинуться из-за правого предела экрана до места, куда оно вставлено. Причем до этого момента изображение не видимо. После "установки на место" изображение остается видимым. По умолчанию время анимации равно 1сек, а задержки начала анимации нет. В начале анимации изображения запускается одновременная анимация текста с ID=text1. Согласно строке параметров текст должен "свалиться сверху" на свое место за 2 секунды, но с паузой до начала анимации в полсекунды. Все это указано до разделителя параметров "next" - о нем чуточку позже. При окончании анимации изображения будет выполняться анимация для img1, т.е. этого же изображения, но уже с исчезновением вправо за 1 сек, но до запуска анимации должно пройти 4 сек. При этом изображение остается видимым до конца анимации, а потом становится невидимым. И опять видим разделитель next. Для чего он нужен? Это не обязательный разделитель, но в данном случае он очень полезен. На самом деле изображение img1 анимируется два раза: приехало и через 4 секунды уехало. При этом дважды возникает событие начала анимации. И если в первый раз надо запустить анимацию текста на появление, то второй раз надо бы текст убрать. Именно поэтому указан разделитель next (следующий). При начале второй анимации система видит, что текст уже находится в состоянии, указанном в первой команде, следовательно повторять уже смысла нет и следует переходить к следующей команде, т.е. убрать текст. Т.е. одновременно с исчезновением изображения, начнется исчезновение текста. Когда анимация исчезновения изображения завершится и изображение спрячется влево, то система опять увидит, что img1 находится в состоянии, указанном в первой команде. Следовательно выполнять ее нет смысла и надо выполнить следующую (next) команду и анимировать, как указано, img2. Т.е. если запятая разделяет команды, которые выполняются строго последовательно, то next предназначена для выполнения сначала первой, а потом следующей команды, если первая уже выполнила анимацию элемента. Как видите, даже в пределах одного окна настройки можно запрограммировать достаточно сложный сценарий анимации.

Анимация элементов меню. Анимация меню производится только после окончания загрузки страницы. Поскольку каждый пункт меню соответствует странице сайта, то и настройки осуществляются на вкладке "параметры страницы" каждой из них. Т.е. вы можете определить для каждого пункта определенного вида меню свою анимацию. Посмотрите на рисунок слева. Указывается вид меню для которого должна быть осуществлена анимация и ее параметры. Для каждого пункта меню можно определить анимацию для двух видов меню - это хорошо видно на рисунке. Подробнее о меню читайте в документации. Анимация пункта для домашней страницы настраивается там, где задаются общие параметры сайта - на вкладке "шаблон и подшаблоны". Для мегаменю используется отдельно проектируемый блок, который вызывается по событию "наезда" мыши на пункт меню. Следовательно и настройку анимации для появления мегаменю надо делать в настройках этого блока.