Как реализовать всплывающий блок со дна страницы?

Question

[Jedi]

Доброе утро, ТОСТЕР!

Как мне реализовать такой же всплывающий блок, как это сделано в Instagram (вот ссылка)?


Она появляется на 2-3 секунды, а потом опять опускается в бездну.

Я сам как-то попробовал, но у меня почему-то скролл появился.

Comments

[Lord_Dantes]

Делаете блок фиксированным снизу, по дефолту задаете - 10 процентов в низ страницы чтобы не было видно. Далее делаете на jq функцию добавления класса и этому классу даете всплывающую анимацию, и добавляете класс на 3 секунды после чего убираете его.

Answer 1

[svetlov97]

Потому что нужно использовать к блоку display: fixed

Answer 2

[MamaLuyba]

опускание и всплытие - это через transition или анимацию запиливается.
типа так:

#block {
 position: absolute;
 animation: pop 2s linear;
}

 @keyframes pop {
  0% {
   bottom: -100px;
}

  10% {
   bottom: 0px;
}

 100% {
   bottom: -100px;
}
}

Comments

[Jedi]

Спасибо!