EHappy
@EHappy
HTML/CSS/Photoshop

Как сделать похожие анимации и элементы?

Доброго времени суток гуру своего дела, и просто хорошие люди :)
Накопилось немного вопросов, вот решил разом их задать..

Делается сайт в минимализме, на WordPress. Как пример буду показывать или указывать нужные фичи на другом сайте - сайт не мой sketchapp.me/. Сразу скажу, в JS знаний у меня нет.

1) При наведении в правом верхнем углу на круглую иконку профиля/человечка, он меняет цвет с белого на зеленый и обратно. Думал сделать так сам, но вот подгружается этот файл fa fa-user откуда то с другого места, ибо в теме его нет (либо я не нашел). Как сделать такую анимацию?

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

3) В шапке (справа) и в подвале (справа) есть элемент подписки. Буду делать такой же, собственно при наведении мышки на кнопку Подписки, так же проигрывается анимация (небольшое засветление). Как сделать так же?

4) На главной странице под надписью Новые записи мы видим у записей теги - они белые, при наведении у них появляется зеленая обводка рамки и текста. Когда открываем пост и видим наверху тег, он так же белый и при наведении окрашивается. Пробовал делать так же в обоих случаях - увы, у меня просто тег, который заполнен цветом, сама надпись белого цвета. Как сделать так же?

5) Если мы нажимаем на любую запись, то мы видим под меню хлебные крошки, и они окрашиваются в цвета, при том сама запись без цвета, а вот путь который она прошла - окрашивается зеленым. И если с крошками я надеюсь еще как то разобраться, то вот с цветом...снова проблема. Как сделать так же?

Извините за сумбурность и возможно наглость, но оформление нравится, поэтому некоторые элементы хотел бы перенять. Просьба не ругаться и не флудить, тапками не кидаться :)
  • Вопрос задан
  • 446 просмотров
Решения вопроса 1
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
На все пункты ответ один.
Открывай консоль разработчика и смотри, как и что сделано.
В хроме и мозилле это открывается клавишами ctrl+shift+i.

Не вижу смысла подсказывать что-то конкретно.
Всё видно в коде.

PS: Не всё там требуется JS, обычные CSS эффекты.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы