Макет на github pages.
Также можно протестировать шаблон на сохраненной странице
Павла Дурова в социальной сети ВКонтакте.
<link rel="stylesheet" href="achievements.css">
Также необходимо добавить
<div id="container"></div>
в тело HTML.
Для демонстрации скрипт achievements.js добавляет новую ачивку
каждую секунду и останавливается после десятой. На каждой ачивке
присутствует номер, генерируемый CSS (псевдокласс ::before и counter/counter-increment).
Внешний вид ачивок можно менять добавлением класса к DOM-элементам,
т.к. ачивки рендерятся исключительно средствами CSS.
Можно также изменять размер ачивок и счетчика.
.circ{
width: 90px;
height: 90px;
}
#container{
font-size: 24px;
}
Растровые картинки (64x64) для демонстрации хранятся здесь.
Поступающие ачивки образуют стек и выравнивается при помощи display: flex.
Ачивки рендерятся поверх основного контента страницы.
#container{
z-index:10000;
}