/CSS_achievements

Яндекс. Школа разработки интерфейсов. Шаблон для списка ачивок

Primary LanguageJavaScript

Шаблон для списка ачивок

Макет на 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;
}