Задать вопрос
@lipskoy48
html

Как реализовать такой эффект?

Социальная сеть "ВКонтакте" сейчас сотрудничает с одним интернет магазином. Вообщем-то если создать пост с определенными словами, они подсветятся в красный цвет и при нажатии на слово справа снизу выпрыгнет анимированная картинка?

Вопрос - как такое можно реализовать на своем сайте? Чтобы просто картинка вылетала, можно даже без анимации5fa2c956375e6636962481.jpeg
  • Вопрос задан
  • 186 просмотров
1 комментарий
Подписаться 1 Средний 1 комментарий
Решение пользователя Вадим К ответам на вопрос (2)
MrDecoy
@MrDecoy Куратор тега CSS
Верставший фронтендер
Итак, для этого вам понадобится:
  1. Медиафайл, который доложен вот так вот выпрыгивать(картинка, анимация, да хоть видео)
  2. Добавить этот медиа на страницу. и обернём его в div с классом, какой вашей душе угодно. Но лучше чтобы название намекало на суть элемента - что это какой-то выскакивающий блок. Скажем, toast(как тост из тостера)
  3. Делаем ему position: fixed и размещаем с помощью right И bottom так, чтобы его не было видно на экране.(right и bottom - чтобы не зависеть от размера экрана и он всегда был в одном месте)
  4. Так же опишем класс модификатор, например, toast_active, в котором будут стили отвечающие за позиционирование. Так, чтобы элемент было видно. То есть toast_active должны содержать такие bottom и right, чтобы элемент был на экране.
  5. Ну и далее нужен элемент триггер - по нажатию который надо добавлять класс toast_active на наш элемент. Например, через js.
  6. Внутри обработчика сделать таймер(setTImeout) на нужное вам время, через которое нужно скрыть этот элемент снова. В функции таймера убрать класс toast_active.
  7. Если пропишете в классе .toast свойство transition для bottom, то будет ещё и плавно всплывать.
  8. Профит
Ответ написан
Комментировать
Комментировать