Третья часть из серии руководств "Анимируй это"
Часть первая
Часть вторая
По ссылкам выше я рассказывал - как с помощью простого CSS анимировать форму входа и регистрации и как анимировать мобильное меню.
В третьей части руководства я вам расскажу секреты анимации рейтинга от плагина WP-Recall. Все видели как в твиттере лайк анимируется? Вот и у меня для вас припасено два варианта анимации для сердечка (тип рейтинга "Мне нравится") и анимация палец вверх и палец вниз (тип рейтинга "Плюс/Минус"). Я хотел назвать эту статью анимируем шрифт FontAwesome, но 2 примера из трех к нему не будут иметь отношения. Мы заменим иконки от этого шрифта на свои.
Никаких скриптов. Только чистый css. Поэтому все примеры вставляйте в ваш стилевой файл style.css. Начнем с простого.
Анимация рейтинга "Плюс/Минус"
Вставьте следующие стили в ваш style.css
/* анимация для типа рейтинга "Плюс/Минус" */ .rcl-rating-box .user-vote.vote-plus .fa-thumbs-up, .rcl-rating-box .user-vote.vote-minus .fa-thumbs-down { animation-duration: 0.7s; animation-fill-mode: both; } .rcl-rating-box .user-vote.vote-plus .fa-thumbs-up { animation-name: fadeThumbsUp; } .rcl-rating-box .user-vote.vote-minus .fa-thumbs-down { animation-name: fadeThumbsDown; } @keyframes fadeThumbsUp { 0% { opacity: 0; transform: translate3d(0px, -100%, 0px) scale(1.5) rotate(-25deg); } 100% { opacity: 1; transform: none; } } @keyframes fadeThumbsDown { 0% { opacity: 0; transform: translate3d(0px, 100%, 0px) scale(1.5) rotate(25deg); } 100% { opacity: 1; transform: none; } }
В результате получим:
Анимация рейтинга "Мне нравится"
Вариант 1.
Оригинал я взял отсюда
С использованием css спрайта. Данный способ не нов. Заранее подготовленная картинка с кадрами передвигается каждые n-секунд на позицию. Указывается кол-во кадров. Все просто
- Для этого вам надо скачать спрайт по ссылке
- Залить его к себе на сайт в нужную папку
- Вписать путь к этому файлу в background url в стили
Сами стили эффекта:
/* анимация для типа рейтинга "Мне нравится" */ .rcl-rating-box .rating-wrapper .vote-heart { position: relative; vertical-align: middle; } .rcl-rating-box .fa.fa-heart::before { content: ""; } .rcl-rating-box .fa.fa-heart { background: rgba(0, 0, 0, 0) url("http://ваш-сайт/путь-к-картинке/heart.png") no-repeat scroll 0 0; height: 50px; left: -30px; position: absolute; top: -16px; transition: background-position 1s steps(28); transition-duration: 0s; width: 50px; } .rcl-rating-box .user-vote .fa.fa-heart { transition-duration: 1s; background-position: -1400px 0; }
В результате получим анимацию как в Twitter
Вариант 2.
Продвинутый вариант используя svg. SVG - векторный файл, а это значит что на ретина дисплеях он выглядит максимально четко. Оригинал взят отсюда.
Анимация будет когда ставится и снимается рейтинг.
Ваши шаги:
- Для этого вам надо скачать svg-файл по ссылке
- Залить его к себе на сайт в нужную папку (по FTP - т.к. медиабиблиотека ВП не пропустит этот тип файла)
- Вписать путь к этому файлу в background url в стили
Сами стили эффекта:
/* анимация для типа рейтинга "Мне нравится" */ .rcl-rating-box .rating-wrapper .vote-heart { position: relative; vertical-align: middle; } .rcl-rating-box .fa.fa-heart { animation: heartUnlike 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; left: -20px; position: absolute; top: 0; } .rcl-rating-box .user-vote .fa.fa-heart { animation: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s normal both 1 running heartFloatMain-1; background: rgba(0, 0, 0, 0) url("http://share.wojtek.im/ajKY+") no-repeat scroll center center / 100% auto; height: 18px; left: -13px; position: absolute; top: 0; width: 16px; } .rcl-rating-box .user-vote .fa.fa-heart::before, .rcl-rating-box .user-vote .fa.fa-heart::after{ background: inherit; background-size: 100%; content: ''; display: inherit; height: 10px; left: inherit; opacity: 0; position: relative; top: inherit; visibility: hidden; width: 12px; } .rcl-rating-box .user-vote .fa.fa-heart::before{ animation: heartFloatSub-1 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; opacity: .6; } .rcl-rating-box .user-vote .fa.fa-heart::after{ animation: heartFloatSub-2 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; opacity: .75; } @keyframes heartUnlike { 50% { transform: scale(0.75); } } @keyframes heartFloatMain-1 { 0% { opacity: 0; transform: translate(0) rotate(0); } 50% { opacity: 1; transform: translate(0, -25px) rotate(-20deg); } } @keyframes heartFloatSub-1 { 0% { visibility: hidden; transform: translate(0) rotate(0); } 50% { visibility: visible; transform: translate(13px, -13px) rotate(30deg); } } @keyframes heartFloatSub-2 { 0% { visibility: hidden; transform: translate(0) rotate(0); } 50% { visibility: visible; transform: translate(18px, -10px) rotate(55deg); } }
В результате получим такую анимацию:
В этом примере svg файл уже расположен на хостинге - но в целях безопасности рекомендуют все svg-файлы держать на своем сервере - т.к. в теории владелец того хоста может внутрь svg закинуть зловред. Сейчас там ничего лишнего. Но вы предупреждены.
Такими вот нехитрыми трюками вы можете выделить свой сайт на фоне других сайтов, а работа с плагином WP-Recall приносит одно удовольствие.
Здорово! Прям CSS-магия))) 😳
Точно: "Да я Отшельник, маг и волшебник..."
Какая анимация понравилась? Применишь на свой сайт?
https://prnt.sc/fj751x
(за офтоп сильно не пинайте))) )
Уже))) Меня хлебом не корми, дай в css чего-нибудь засунуть
Правда, кто бы еще читал внимательно код... Засунул код в стили, смотрю и думаю: "чет у меня рейтинг перестал работать?..". Посмотрел код: ваш-сайт/путь-к-картинке/heart.png
PS Забыл написать, что внедрил 1-й вариант
- точно. Та самая обложка с альбома Арии. Мощные были песни. Да простит меня администрация за оффтоп ))
- да ктож его читает)) Да, я не стал картинку с своего сайта урл оставлять, а то мой сервак как хостинг использовали. Мне он самому пригодится весь. А оригинал спрайта в интернете в 2 раза больше. Я ее уменьшал.
анимация смотрится отлично 8) , деффчонкам понравится
Девчонки толпами будут ходить на сайт с такой анимацией. Админы, подумайте - ведь всем нужны девчонки? 😉
А меня не любят девчонки не ходят ко мне на сайт я курящий потому что, только спамеры, а им до анимации и делов нет 🙂
Отличная статья спасибо! 🙂
С такими сердечками они закроют на это глаза ))
А когда увидят администратора закроют сайт на своем устройстве
Извините за оф топ, но Вам уже пора систему скидок делать постоянным покупателям, за потраченные суммы 🙂
Подобные предложения и темы надо поднимать на форуме сервиса https://codeseller.ru/forum/forum-group/servis-codeseller.ru
p.s. лично у меня вы не купили ниодного товара. К чему в этой теме тогда подобное предложение?
Ты же маг и волшебник для чего тебе нужны деньги? 😉
Спасибо за уроки автору и хорошее настроение!
Отлично как всегда!
Я тут по работе своей, недавно делал кейсы рекламные для одного достаточно известного беби форума. Там понятно одна практически женская половина. После 10 минут посещения форума в глазах все начинает рябить от аватарок дергающихся и блестящих, моргалок, фенечек и эффектов разных. В общем деФченкам точно в самый раз.
Кстати очень прикольно смотрится в небольших количествах и именно с такими наводящими эффектами на любых сайтах.
Главное если понравится пользователю, не тыкал ради развлекухи туда и сюда 🙂
А еще японцы любят все моргающее и с самыми пестрыми цветами 🙂
Все должно быть в пределах разумного. Но когда аудитория требует - тут не откажешь. Иначе разбегутся
Супер! Очень красиво! Спасибо вам! 8)
Спасибо за спасибо))
Я подобного эффекта не замечал на других ресурсах (а как потом искать начал - народ с 2012 года уже предлагал решения). Тут недавно лайкнул в твиттере пост и увидел эффект. Подумал - "а для нашего горячо любимого реколл тоже так можно". Ну и нашел реализации и применил их к плагину.
А я по 2-му способу сделала сердечко. Нравится. Это оригинально смотрится. Все эти "плюшки и фенечки" придают сайту привлекательный вид. В интернете, как и в реале - приятно, когда тебя окружает красота и настроение поднимается от милых забавных (пусть даже и по-детски наивных) вещей. Не зависимо от пола человека 🙂 Спасибо, Владимир! 8)