Публикация в группе: Otshelnik-Fm - мои работы (код, плагины, дополнения, статьи и руководства)

Категории группы: Работаем с Wp-Recall

Добавлено в закладки: 3

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

В третьей части руководства я вам расскажу секреты анимации рейтинга от плагина WP-Recall. Все видели как в твиттере лайк анимируется? Вот и у меня для вас припасено два варианта анимации для сердечка (тип рейтинга "Мне нравится") и анимация палец вверх и палец вниз (тип рейтинга "Плюс/Минус"). Я хотел назвать эту статью анимируем шрифт FontAwesome, но 2 примера из трех к нему не будут иметь отношения. Мы заменим иконки от этого шрифта на свои.

Никаких скриптов. Только чистый css. Поэтому все примеры вставляйте в ваш стилевой файл style.css. Начнем с простого.

Анимация рейтинга "Плюс/Минус"

Вставьте следующие стили в ваш style.css

В результате получим:

Анимация рейтинга "Мне нравится"

Вариант 1.

Оригинал я взял отсюда

С использованием css спрайта. Данный способ не нов. Заранее подготовленная картинка с кадрами передвигается каждые n-секунд на позицию. Указывается кол-во кадров. Все просто

  1. Для этого вам надо скачать спрайт по ссылке
  2. Залить его к себе на сайт в нужную папку
  3. Вписать путь к этому файлу в background url в стили

Сами стили эффекта:

В результате получим анимацию как в Twitter

Вариант 2.

Продвинутый вариант используя svg. SVG - векторный файл, а это значит что на ретина дисплеях он выглядит максимально четко. Оригинал взят отсюда.

Анимация будет когда ставится и снимается рейтинг.

Ваши шаги:

  1. Для этого вам надо скачать svg-файл по ссылке
  2. Залить его к себе на сайт в нужную папку (по FTP - т.к. медиабиблиотека ВП не пропустит этот тип файла)
  3. Вписать путь к этому файлу в background url в стили

Сами стили эффекта:

В результате получим такую анимацию:

В этом примере svg файл уже расположен на хостинге - но в целях безопасности рекомендуют все svg-файлы держать на своем сервере - т.к. в теории владелец того хоста может внутрь svg закинуть зловред. Сейчас там ничего лишнего. Но вы предупреждены.

 

Такими вот нехитрыми трюками вы можете выделить свой сайт на фоне других сайтов, а работа с плагином WP-Recall приносит одно удовольствие.

5

Автор публикации

339

Вся лента по разработке здесь: http://across-ocean.otshelnik-fm.ru/?note-link=2353

http://across-ocean.otshelnik-fm.ru/ - список моих работ к плагину WP-Recall

Комментарии: 1059Публикации: 122Регистрация: 27-01-2013Продаж/Покупок: 5589/121