О компании
  • Партнеры
  • Наши клиенты
  • Лицензии и сертификаты
  • Реквизиты
  • Вакансии
  • Отзывы
Новости
Услуги
  • Медийная реклама
    • Размещение рекламы на Mail.ru
    • Размещение рекламы в Одноклассниках на ok.ru
    • Реклама в социальных сетях
  • Контекстная реклама
    • Настройка Яндекс Директ
    • Настройка Google Adwords
    • Ведение Google Adwords
    • Ведение Яндекс Директ
  • Создание сайтов и техническая поддержка
    • Разработка и создание сайтов
    • Техническая поддержка, ускорение и доработка сайтов
  • Поисковая оптимизация сайтов (SEO)
    • SEO оптимизация сайтов и LandingPage
    • Аудит сайта
  • Внедрение CRM
    • Купить CRM Битрикс24
Проекты
  • Интернет-магазины
  • Интернет витрины
  • Медицинские сайты
  • Строительство
  • Финансы
  • Landing Page
Еще
  • Партнерам
  • Рекламодателям
    • ТЗ на баннеры
      • ТЗ для разработки рекламных баннеров
  • Полезная информация
Контакты
Ещё
    Маркетинговое агентство Viarda
    +7 (861) 205-05-25
    Звоните с 9:00 до 18:00
    Обратный звонок
    Маркетинговое агентство Viarda
    О компании
    • Партнеры
    • Наши клиенты
    • Лицензии и сертификаты
    • Реквизиты
    • Вакансии
    • Отзывы
    Новости
    Услуги
    • Медийная реклама
      • Размещение рекламы на Mail.ru
      • Размещение рекламы в Одноклассниках на ok.ru
      • Реклама в социальных сетях
    • Контекстная реклама
      • Настройка Яндекс Директ
      • Настройка Google Adwords
      • Ведение Google Adwords
      • Ведение Яндекс Директ
    • Создание сайтов и техническая поддержка
      • Разработка и создание сайтов
      • Техническая поддержка, ускорение и доработка сайтов
    • Поисковая оптимизация сайтов (SEO)
      • SEO оптимизация сайтов и LandingPage
      • Аудит сайта
    • Внедрение CRM
      • Купить CRM Битрикс24
    Проекты
    • Интернет-магазины
    • Интернет витрины
    • Медицинские сайты
    • Строительство
    • Финансы
    • Landing Page
    Еще
    • Партнерам
    • Рекламодателям
      • ТЗ на баннеры
        • ТЗ для разработки рекламных баннеров
    • Полезная информация
    Контакты
    Ещё
      Маркетинговое агентство Viarda
      • О компании
        • Назад
        • О компании
        • Партнеры
        • Наши клиенты
        • Лицензии и сертификаты
        • Реквизиты
        • Вакансии
        • Отзывы
      • Новости
      • Услуги
        • Назад
        • Услуги
        • Медийная реклама
          • Назад
          • Медийная реклама
          • Размещение рекламы на Mail.ru
          • Размещение рекламы в Одноклассниках на ok.ru
          • Реклама в социальных сетях
        • Контекстная реклама
          • Назад
          • Контекстная реклама
          • Настройка Яндекс Директ
          • Настройка Google Adwords
          • Ведение Google Adwords
          • Ведение Яндекс Директ
        • Создание сайтов и техническая поддержка
          • Назад
          • Создание сайтов и техническая поддержка
          • Разработка и создание сайтов
          • Техническая поддержка, ускорение и доработка сайтов
        • Поисковая оптимизация сайтов (SEO)
          • Назад
          • Поисковая оптимизация сайтов (SEO)
          • SEO оптимизация сайтов и LandingPage
          • Аудит сайта
        • Внедрение CRM
          • Назад
          • Внедрение CRM
          • Купить CRM Битрикс24
      • Проекты
        • Назад
        • Проекты
        • Интернет-магазины
        • Интернет витрины
        • Медицинские сайты
        • Строительство
        • Финансы
        • Landing Page
      • Еще
        • Назад
        • Еще
        • Партнерам
        • Рекламодателям
          • Назад
          • Рекламодателям
          • ТЗ на баннеры
            • Назад
            • ТЗ на баннеры
            • ТЗ для разработки рекламных баннеров
        • Полезная информация
      • Контакты
      • +7 (861) 205-05-25
      Будьте на связи
      Краснодар, ул. Северная, 490, офис 602
      sale@viarda.ru
      • Вконтакте
      • YouTube

      Набор анимации для вашего сайта 2019

      Главная
      Еще
      Полезная информация
      Эффекты и анимация
      Набор анимации для вашего сайта 2019
      Категории
      • Настройка сервера3
      • Эффекты и анимация1
      • Разное1
      Полезная информация для клиентов и партнеров

      Обновления согласно последним трендам – одно из условий для успешной работы сайта. Важно постоянно отслеживать, выявлять, что способствует, а что останавливает развитие ресурса.

      Чтобы красиво сложить сайт требуются знания и применение множества технических аспектов. Если хотите добавить «изюминку» и сделать страницы интереснее – используйте последние обновления стилей CSS. Они помогут изменить внешний вид ресурса - сделать его привлекательным для пользователей.

      В нашей статье мы представим новый набор анимаций, который поможет разнообразить ваш ресурс - сделать его современней, увлекательней.

      Рассмотрим набор анимации элементов animate.css.

      Чтобы начать работу с набором css классов, установите на сайт стили, далее подключайте к необходимым блокам понравившиеся эффекты.

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

      Примеры анимации:

      Animation

      Выберите анимацию:

      Установка

      Необходимо загрузить стили на ресурс. Подключить их в head: animate.css

      <link rel="stylesheet" href="/animate.css" />

      Использование

      После подключения css классов – можно приступать к анимированию элементов. Для этого добавьте к нему класс animated и нужный вам эффект из представленной таблицы:

      Название класса
      bounce flash pulse rubberBand
      shake headShake swing tada
      wobble jello bounceIn bounceInDown
      bounceInLeft bounceInRight bounceInUp bounceOut
      bounceOutDown bounceOutLeft bounceOutRight bounceOutUp
      fadeIn fadeInDown fadeInDownBig fadeInLeft
      fadeInLeftBig fadeInRight fadeInRightBig fadeInUp
      fadeInUpBig fadeOut fadeOutDown fadeOutDownBig
      fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig
      fadeOutUp fadeOutUpBig flipInX flipInY
      flipOutX flipOutY lightSpeedIn lightSpeedOut
      rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft
      rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight
      rotateOutUpLeft rotateOutUpRight hinge jackInTheBox
      rollIn rollOut zoomIn zoomInDown
      zoomInLeft zoomInRight zoomInUp zoomOut
      zoomOutDown zoomOutLeft zoomOutRight zoomOutUp
      slideInDown slideInLeft slideInRight slideInUp
      slideOutDown slideOutLeft slideOutRight slideOutUp
      heartBeat

      Можно также добавить класс infinite для бесконечного цикла, задержку и продолжительность эффекта:

      Задержка:

      Название класса Время задержки
      delay-2s 2s
      delay-3s 3s
      delay-4s 4s
      delay-5s 5s

      Продолжительность:

      Название класса Скорость
      slow 2s
      slower 3s
      fast 800ms
      faster 500ms

      Пример:

      <div class="animated infinite bounce delay-5s slower">Пример</div>

      Пример

      Если Вам нужно самостоятельно изменить время, задержку анимации, количество воспроизведений – добавьте такие стили:

      .yourElement {
         animation-duration: 3s;
         animation-delay: 2s;
         animation-iteration-count: infinite;
      }

      Если Вы никогда не работали с применением css стилей для создания анимации, то обязательно примените данные обновления к Вашему ресурсу. Воспользуйтесь ещё одним методом привлечение внимания пользователей к вашему сайту.


      Поделиться
      Назад к списку
      Офис в Краснодаре


      +7 (861) 205-05-25
      Краснодар, ул. Северная, 490, офис 602
      sale@viarda.ru
      Офис в Иркутске


      +7 (3952) 56-24-36
      Иркутск, ул. Октябрьской Революции, 5, офис 25
      sale@viarda.ru
      © Viarda, 2014-2023
      Политика конфиденциальности
      • Вконтакте
      • YouTube