Лого www.SiteHere.ru

Анимация HTML5

Анимация HTML5

Раньше вся анимация на сайтах была в основном создана на Flash. С появлением технологии HTML5 стало возможным создавать анимацию без использования Flash. А ведь анимация всегда привлекала и привлекает внимание посетителей. Но писать с нуля на HTML5 смогут не все, потому что это не очень легко для человека, который не разбирается в этом. Поэтому в данном уроке я хочу рассмотреть специальный сервис, который позволяет создавать анимацию на HTML5. В этом сервисе сможет разобраться абсолютно каждый!

Я хочу рассказать о таком сервисе, как HTML5Maker.

HTML5Maker — это онлайн-сервис, который позволяет создавать интерактивный анимированный контент(слайд-шоу, баннеры и т.д.) на HTML5.

Давайте приступим к изучению этого сервиса.

Перейти на сервис
HTML5Maker

Анимация HTML5

Введение и регистрация

Данный сервис можно использовать без регистрации. Для этого нужно нажать на кнопку «Create animation» сразу, как зайдете на сайт:

Кнопка "Создать анимацию"

Что касается регистрации и авторизации то здесь также всё очень легко. Вам нужно нажать на кнопку «Sign in» в правом верхнем углу экрана:

Вход на сайт

Тут есть два пути: войти через Facebook или Google PLus, или зарегистрироваться. Ссылка(там еще будет текст «Don’t have an Account? Register Now!») регистрации находится под большой кнопкой «Sign in»

Регистрация на сайте HTML5Maker

После нажатия по этой ссылке вы попадаете на страницу с выбором тарифа. Выбираете первый тариф «Free» и жмете кнопку «Start now!»

Выбор тарифа на сайте HTML5Maker

Затем появится страница с вводом email и пароля. Заполняете эти два поля и кликаете на кнопку с текстом «Create free account», которая находится ниже.

Окончание регистрации

После чего на почту придет сообщение, в котором будет ссылка. По этой ссылку необходимо будет пройти для активации вашего аккаунта.

Знакомство с интерфейсом

Думаю с регистрацией и входом у вас проблем не возникнет. И сейчас переходим непосредственно к среде в которой мы будем разрабатывать нашу анимацию.

Первое, что вы увидите, это рабочая область. Выглядит она следующим образом:

Рабочая область HTML5Maker

Она состоит из трех колонок. В левой колонке находятся слайды, центральная колонка(область) предоставлена для размещения необходимых блоков на слайдах, и, наконец, правая колонка содержит настройки анимации. Также в правой колонке в зависимости от выделенного элемента(текст, изображение или слайд) появляются соответствующие настройки.

Добавление слайдов

Если вы до этого пользовались программой Microsoft PowerPoint, то для вас работать со слайдами будет очень легко, потому что здесь всё очень похоже. Но и для тех, кто видит это впервые, я думаю, не составит труда разобраться.

Для добавления нового слайда необходимо нажать на кнопку «Add a New Slide»:

Добавление нового слайда

Добавление изображений

Для того чтобы добавить изображение на слайд, необходимо нажать на кнопку «Add image»:

Добавление изображения на слайд

После чего появится всплывающее окно с выбором готовых изображений:

Готовые изображения на HTML5Maker

Также в этом окне можно нажать на кнопку «Upload image» и загрузить своё собственное изображение. Кроме своего изображения, как я уже говорил, вам предлагается уже набор подобранных и сгруппированных изображений. После того, как вы определились с изображением необходимо нажать на кнопку «Add» и изображение будет добавлено на слайд:

Добавление изображения на слайд

После добавления изображения на слайд, оно выделяется и становятся доступны функции для работы с изображением. На изображении ниже я отметил каждую функцию цифрой:

Работа с изображением

Давайте по порядку рассмотрим эти кнопки:

  1. При нажатии на эту кнопку изображение скопируется и скопированное вставится со смещением чуть ниже и вправо.
  2. Данную кнопку необходимо зажать и можно вращать изображение.
  3. Эта кнопка удаляет изображение.
  4. Кнопка отвечает за изменение размера изображения по ширине.
  5. Эта кнопка отвечает за изменение размера изображения пропорционально по высоте и ширине.
  6. Кнопка отвечает за изменение размера изображения по высоте.

Итак, это основные функции, которые можно применить к изображению. Но есть и еще. Они становятся доступными при выделении изображения и находятся в правой колонке:

Работа с изображением через панель

Начнем рассматривать сверху вниз.

Первым идет блок «Adjust image», в котором есть 4 кнопки: «Replace», «Modify», «Original» и «Fit to Canvas». Что же делает каждое из этих свойств?

  • Кнопка «Replace» — при нажатии на эту кнопку появляется всплывающее окно, в котором вас просят выбрать новое изображение, которым вы хотите заменить настоящее.
  • Кнопка «Modify» — при нажатии на данную кнопку открывается окно, в котором доступны различные эффекты для изображения, можно добавить текст на изображение, добавить рамку, а также обрезать, повернуть, сделать размытым, отразить по вертикали или горизонтали и изменить контрастность.
  • Кнопка «Original» — возвращает начальные настройки изображения.
  • Кнопка «Fit to Canvas» — при нажатии изображение принимает максимальную высоту и ширину с учетом что оно должно поместиться в размер слайда.

Следующим идет блок «Arrange Selected Text», и в нем две кнопки: «Bring to Front», «Send to Back». Кнопка «Bring to Front» отвечает за то, чтобы выдвинуть изображение на передний план, а вторая кнопка «Send to Back» отвечает за позиционирование изображения на задний план.

Далее идут три блока «Change position»(изменение позиции изображения), «Change size»(изменение размера) и «Change rotation»(поворот в градусах), которые можно изменять с помощью кнопок и перетаскивая изображения удерживая левую кнопку мыши.

И последний блок под названием «Opacity» — изменяя его значение, перетаскивая ползунок, вы изменяете прозрачность изображения.

Последний момент, который хочу рассказать — это эффект при появлении и исчезновении изображения. Эта панель находится внизу в центральной части рабочей области:

Эффект при появлении изображений

В левом верхнем выпадающем списке, где есть надпись «Appear:», вы выбираете эффект как будет изображение появляться. А в левый нижний выпадающий, у которого есть надпись «Disappear:», список отвечает за эффект с которым изображением исчезает.

Добавление текста

Текст добавляется нажатием на кнопку «Add text» в левом верхнем углу центральной области.

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

Добавление и изменение текста на слайде

Основные настройки анимации, предпросмотр и публикация проекта

Для того чтобы активировать эти настройки вам необходимо нажать либо на кнопку «Settings» в левом верхнем углу центральной области, либо кликнуть по пустому месту, где нет слайда.

В результате вы увидите следующие настройки вашего проекта в правой колонке:

Настройки проекта

Здесь можно изменить размер слайдов, установить фоновый цвет, а также добавить кнопки, для управления слайд-шоу. Чтобы добавить кнопки управления слайд-шоу необходимо нажать на кнопку «Animation controls» и здесь вы увидите всплывающее окно с выбором всевозможным кнопок, таймлайнов и так далее:

Настройки анимации

Предпросмотр и публикация

Данный сервис предоставляет два способа предпросмотра: предпросмотр одного слайда(для этого нужно использовать кнопку «Prewiew Current Slide») или предпросмотр всех слайдов вместе(кнопка «Prewiew All Slides»).

После завершения создания вашего проекта необходимо нажать на большую оранжевую кнопку, которая находится в правом верхнем углу окна браузера. Появится всплывающее окошко, в котором есть возможность сохранить ваш проект в формате HTML5/CSS/JS или в формате FLash.

После чего вы можете встраивать вашу анимацию на ваш сайт! 🙂

Также смотрите цикл статей 3D преобразования и анимация CSS.

Вывод

Статья, конечно, получилась объемная. Я подробно рассмотрел основные возможности сервиса HTML5Maker, с помощью которого можно создавать анимации на HTML5 без профессиональных знаний этой технологии. Изучайте этот сервис и создавайте свои слайд-шоу и анимации, а также встраивайте их на себе на сайт. А также пишите о своих анимациях HTML5, которые вы создали с помощью этого сервиса в комментариях ниже, мне очень интересно узнать что у вас получилось! 🙂

Успехов!

С Уважением, Юрий Немец

Анимация HTML5 5.00/5 (100.00%) 4 голос(ов)

Понравилась статья - расскажи друзьям! :)

23 комментария к записи
  • Саматакая

    Это всегда актуально сделать красивый и информационный слайдер на сайт, особенно это касается HTLM5. Большое Вам человеческое спасибо за то, что всё буквально «разжевали», осталось только переменить. Жду Ваших новых новостей! 😎

     
    • Юрий

      Спасибо! Я писал так, чтобы каждый смог разобраться в этом. 🙂

       
  • Sania

    довольно познавательно! раньше об этом не слышал! спасибо!)

     
  • laimisk

    Всем привет! Да, в HTML5Maker все удобно и даже понятно. Ради интереса из одного шаблона сделал для сайта баннер, но когда поставил на сайт на нем краснеется логотип или линк HTML5Maker.

    Что не приемлемо! Так я понимаю чтобы не было их линка надо за месяц использивания сервиса заплатить. Вроде не дорого. Но есть вопрос?
    После истечения месяца они будут поддерживать баннер?(понимаю что картинки хоронятся на ихнем сервисе)
    Можно конечно и загрузить все на комп , но там много файлов и где их разместить на сайте?

     
    • Юрий

      Здравствуйте. Вряд ли они будут хранить Ваши файлы на сервере, поэтому лучше их сохранить в формате HMTL5/CSS3/JS и в случае чего загрузить проект заново для редактирования.

       
  • laimisk

    Да, вариант… только интересно с такими украшательствами не будет перегруз сайта , сервера,думаю время загрузки.

     
    • Юрий

      Сейчас скорости интернета растут с каждым днём, поэтому у большинства пользователей всё будет отлично загружаться!

       
  • Владимир

    Поясните, пожалуйста, а можно ли в ролик, созданный с помощью HTML5Maker вставлять музыку и редактировать музыкальные треки внутри этого редактора?

     
    • Юрий

      Здравствуйте, Владимир. В данном сервисе нельзя вставлять музыку.

       
  • ВЛАДИМИР

    Здравствуйте! Мой сайт на html. Смогу ли я разместить на нём анимацию? Спасибо! Владимир.

     
    • Юрий

      Здравствуйте, Владимир!

      Да, Вы можете смело размещать на нем анимацию.

       
      • ВЛАДИМИР

        Юрий, добрый вечер! Беда в том, что кнопка "скопировать embed код" не активируется. Копирование кода в рамке не к чему не приводит. А жаль. С уважением Владимир.

         
  • Тимур

    А скачать почему то нельзя на компьютер!

     
    • Юрий

      Тимур, здравствуйте!

      Для этого необходимо купить Premium аккаунт.

       
  • JournetCom

    Видел много интересных блогов, но этот самый лучший, автору респект, много статей, много пользы

     
  • Алексей

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

     
    • Юрий Немец

      Здравствуйте, Алексей!

      Что значит "просвечивает наружу"?

       
      • Алексей

        Через картинку видно сайт. Точнее то что нужно скрыть на сайте.

         
        • Юрий Немец

          Если хотите чтобы я помог, дайте более подробную информацию.

           
          • Алексей

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

             
            • Юрий Немец

              Смотря куда Вы ее вставляете.

               
  • Вероника

    Приложение удобное, понравилось. Единственное, не могу убрать рекламную ссылку со своего баннера. Не подскажите как это можно сделать?

     
    • Юрий Немец

      Вероника, здравствуйте. На платном тарифе рекламной ссылки нет.

       

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *