Предыдущий ролик Следующий ролик  

Видео урок: Анимация элементов hero

Создание отзывчивого веб-дизайна

Чтобы создать анимацию внутри области hero, мы сначала возьмем изображение и переместим его немного направо, а также установим opacity на zero. Далее мы возьмем заголовок и переместим его немного влево, а также установим opacity на zero. Потом мы создаем анимацию по направлению к центру. Итак, давайте вернемся в наш текстовый редактор. Внутри файла design.js, внутри функции предварительной загрузки, функции обратного вызова, куда мы вставили наш алерт, это удаляем. Идем сюда и открываем эту функцию обратного вызова. Первое, что мы сделаем, - поищем изображение внутри области hero.

Пишем знак доллара, круглые скобки, одинарные кавычки для строкового литерала. Решетка, hero, пробел, .panel, пробел, img. Как только мы находим изображение, мы устанавливаем некоторые CSS свойства. Итак, .css, круглые скобки. После того как мы установили некоторые CSS свойства, мы будем создавать анимацию, так что пишем .animate, круглые скобки, точка с запятой. Теперь давайте вернемся внутрь круглых скобок для CSS. Мы установим несколько свойств.

Итак, нам нужно использовать фигурные скобки. Внутри фигурных скобок первым свойством будет opacity. Мы устанавливаем opacity на 0. Затем запятая для следующего свойства. Мы устанавливаем свойство right, двоеточие, и пишем здесь минус 100 пикселей. Итак, другой строковый литерал, минус 100 px. Как только мы установили эти свойства, мы создадим их анимацию. Итак, внутри animate набор фигурных скобок, первым свойством будет opacity, за строковым литералом идет двоеточие, 1, которая обозначает 100%, затем запятая, и следующее свойство, то есть right, которое должно быть строковым литералом, затем двоеточие, и мы устанавливаем его на 0 пикселей. Затем за фигурными скобками, но внутри круглых для opacity, мы ставим запятую.

Пишем 2000 миллисекунд, или же две секунды. Так, все на месте. Идем сюда и выбираем всю эту строку. Идем к следующей строке. Копируем и вставляем. Идем сюда и меняем image на .caption. Здесь мы меняем свойство right на left, а значение прописываем как минус 75%. А теперь давайте поменяем свойство right внутри анимации на left. Итак, опять же, после запуска функции предварительной загрузки мы берем изображение, которое было динамически загружено при помощи команды load.

Мы собираемся установить opacity в настройке right изображения, а затем мы создадим анимацию обратно к его оригинальной позиции. Тоже самое мы сделаем для заголовка. Чтобы все это увидеть, сохраняем документ. Возвращаемся в браузер, нажимаем Reload, и мы увидим, что изображение движется влево, а заголовок движется вправо. Но если я перейду к среднему экрану, давайте нажмем Reload для среднего экрана, мы увидим ту же самую анимацию. Теперь, когда мы создали анимацию для изображения и заголовка,

давайте создадим анимацию для логотипа. Возвращаемся в файл design.js, в место после анимации заголовка. Нажимаем несколько раз return. Теперь, чтобы создать анимацию логотипа, нам нужно убедиться, что мы создаем анимацию от того места, где на данный момент находится логотип. Чтобы сделать это, мы создаем переменную, которая называется logoPosition. И теперь мы собираемся найти логотип. Знак доллара, круглые скобки, строковый литерал. Мы ищем header, пробел, a.logo. За круглыми скобками .position, круглые скобки и точка с запятой.

На следующей строке мы собираемся поменять эти свойства, а затем создать анимацию к первоначальной позиции. Пишем знак доллара, круглые скобки. Кавычки для строкового литерала, header, пробел, a.logo. За круглыми скобками пишем .css. Вставляем круглые скобки. Теперь нам нужно вставить задержку, поэтому пишем .delay. Еще один набор круглых скобок, затем .animate. Снова круглые скобки и точка с запятой.

Внутри фигурных скобок для CSS мы устанавливаем несколько свойств. Первым свойством является opacity. Пишем здесь двоеточие и 0. Затем запятая и следующее свойство. Это будет top, затем двоеточие. Мы устанавливаем значение внутри строкового литерала на 0 пикселей. Свойство delay мы устанавливаем на 500 миллисекунд. Это означает, что анимация изображения и заголовка стартует каждые две секунды.

А затем мы создаем анимацию логотипа, не раньше чем за полсекунды, как мы начали. Далее мы заходим в круглые скобки для анимации. Вставляем фигурные скобки. Первое свойство - это opacity, двоеточие, 1, то есть 100%. Запятая, следующее свойство - это top, а значением будет исходная позиция логотипа, прежде чем мы запустим анимацию. Идем сюда и копируем имя переменной logoPosition. После двоеточия вставляем logoPosition, а затем мы пишем .top.

jQuery даст нам CSS свойство top для логотипа, прежде чем мы запустим анимацию. Далее мы пишем плюс, строковый литерал и px. За фигурными скобками - запятая, 1000 миллисекунд. Сохраняем файл. Переключаемся на браузер. Теперь нажимаем Reload, и мы увидим логотип. Позицию мы установили на top, opacity на 0, а анимация проходит вниз в течение одной секунды. Но есть еще одно свойство, которое нам нужно изменить. Когда мы создаем анимацию при помощи jQuery, jQuery вставляет действительные свойства стиля для этих отдельных элементов.

Если мы сейчас перейдем в браузер и свернем окно до среднего размера, то увидим, что позиция логотипа некорректна. Если я перейду сюда и сверну экран до среднего размера, произойдет анимация от текущего состояния до того места, где он должен быть. А если я вернусь к большому окну, логотип снова не будет находиться на своем месте. Чтобы это смягчить, возвращаемся к файлу design.js file, и после 1000 миллисекунд давайте добавим запятую, и к этой анимации мы также добавляем функцию обратного вызова. Вот function, круглые скобки, фигурные скобки.

Фигурные скобки открыты. И здесь внутри мы удаляем стиль логотипа. Поскольку мы создаем анимацию самого логотипа, мы можем использовать здесь $, круглые скобки. За круглыми скобками пишем removeAttribute или removeAttr, круглые скобки, точка с запятой. За круглыми скобками - строковый литерал, пишем слово style. Таким образом будут удалены все атрибуты стиля после запуска анимации. То есть элемент будет снова контролироваться нашими CSS файлами, а не состоянием анимации при помощи jQuery.

Давайте снова перейдем в браузер. Сейчас у меня большое окно. Нажимаем Reload. Логотип возвращается на место. Перехожу с большого экрана на средний. Позиция логотипа снова верна. Маленькое окно. Теперь переходим к среднему. Нажимаем Reload. Тогда анимация будет запущена снова, а теперь давайте перейдем от среднего экрана к большому, позиция логотипа снова верна. Но есть еще одно поведение, которое я хочу изменить: если мы сворачиваем браузер до маленького экрана и нажимаем Reload, первая переменная не сбрасывается, потому что мы запускаем ее только тогда, когда загружаем контент.

Если я перехожу от маленького экрана к среднему, как только загружается контент, будет запущена анимация. Возможно, вы хотите, чтобы так происходило, а я этого не хочу. Как только загружается контент, я не хочу, чтобы происходила какая-либо анимация. Если вы хотите избавиться от этого, тогда возвращаемся к файлу design.js. Переходим к loadHero для маленького размера экрана. Заходим сюда и сбрасываем здесь внутри первую переменную run. То есть мы устанавливаем firstRun на false.

Сохраняем файл, переключаемся на маленький экран, нажимаем Reload. Когда я перехожу от маленького экрана к среднему, анимация не будет вызываться. Поскольку я установил firstRun на false, когда первоначальная загрузка происходит на маленьком экране, и все у нас на месте, теперь собраны все кусочки мозаики для отзывчивого дизайна. Далее мы поговорим о вещах, которые вы можете использовать, чтобы получить максимальную совместимость с IE 7 и 8.