Заменяем аватар на цветной кружок с буквой с помощью JavaScript
Новый тренд в дизайне - милые цветные кружочки (квадратики) различного цвета с первой или двумя первыми буквами имени. Так сейчас делают все: браузер Сафари, почтовые клиенты, социальные сети.
Здесь я покажу как это сделать с помощью JavaScript. Главный вопрос – подбор цвета?
Цвет мы будет генерировать из строки с именем. На самом деле подойдет абсолютно любая строка, но так как и букву мы берем из имени, то и цвет будет генерировать из него же.
Вот так будет выглядеть наш HTML:
<div class="user-info">
<div class="user-info-avatar" id="avatar"></div>
<div class="user-info-name" id="name"></div>
</div>Добавим немного CSS-стилей:
.user-info-avatar {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 15px;
text-align: center;
margin-right: 10px;
color: white;
}
.user-info-name {
display: inline-block;
}А теперь JavaScript:
var stringToColor = function stringToColor(str) {
var hash = 0;
var color = '#';
var i;
var value;
var strLength;
if(!str) {
return color + '333333';
}
strLength = str.length;
for (i = 0; i < strLength; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
}
for (i = 0; i < 3; i++) {
value = (hash >> (i * 8)) & 0xFF;
color += ('00' + value.toString(16)).substr(-2);
}
return color;
};
var name = 'Михаил';
var letter = name.substr(0, 1);
var backgroundColor = stringToColor(name);
var elementAvatar = document.getElementById('avatar');
var elementName = document.getElementById('name');
elementName.innerHTML = name;
elementAvatar.innerHTML = letter;
elementAvatar.style.backgroundColor = backgroundColor;За генерирование цвета отвечает функция stringToColor. Она принимает строку с именем (любую строку), переводит ее в биты и уже из них в HEX-цвет. Если мы не передадим в функцию ничего, то получим в ответ цвет по умолчанию – в данном примере, #333333.
Вот таким нехитрым образом можно делать такое модное нынче оформление при отсутствии аватара.
