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

Question

[Vladimir]

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

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

Comments

[posters]

делается это через абсолютное позиционирование и з-индекс

Answer 1

[Вадим]

Итак, для этого вам понадобится:

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. Профит
   

Answer 2

[vjufvufcgyf]

смотри:

function magic(){
let img = document.getElementById('/* id картинки*/');
img.style.zIndex = 3;
}

<span style="z-index: -1;" onclick="magic();">Али</span>

получается, что сначала картинка спрятана от глаз, при нажатии на span картинка выносится на передний план. готово! потом можешь через несколько сек её убрать через js:

let img = document.getElementById('/* id картинки*/');
img.style.zIndex = -1;