Мне очень нравится фишка с сайта Артемия Лебедева, где в шапке у них логотип. Так вот этот логотип со временем медленно меняет свой цвет, а при наведении курсора меняет на другой сразу и, что немаловажно, не меняется обратно (как бывает с типичными скриптами).
Помогите, пожалуйста, понять процесс создания оного (хотя бы одной из этих двух фишек)! Что это, JS или Jquery?
Там на JS, лучше заюзать CSS-анимацию:
let logo = document.querySelector('#logo');
// Генерируем и устанавливаем рандомный фон
const setRandomBg = _ => logo.style.background = Array(...Array(6)).reduce(_ => _ += '0123456789ABCDEF'[Math.floor(Math.random() * 16)], '#');
// При наведении курсора на объект
logo.addEventListener('mouseenter', _ => {
// Ставим новый цвет
setRandomBg();
// Перезапускаем анимацию (да, на хак похоже, но увы, пока что есть)
logo.classList.remove('anim');
setTimeout(_ => logo.classList.add('anim'), 10);
});
// По окончании итерации анимации, меняем фон
logo.addEventListener('animationiteration', _ => setRandomBg());
setRandomBg();
#logo{
display: inline-block;
padding: 10px;
width: 100px;
height: 70px;
}
.anim{
animation: bs 5s infinite;
}
@keyframes bs{
0%{
filter: brightness(1);
}
100%{
filter: brightness(.6);
}
}
<div id='logo' class='anim'></div>
Вот так можно:
let logo = document.getElementById('als-logo');
function changeBackground(color) {
logo.style.backgroundColor = color;
}
function getRandomColor () {
var hex = Math.floor(Math.random() * 0xFFFFFF);
return "#" + ("000000" + hex.toString(16)).substr(-6);
}
logo.addEventListener('mouseenter', () => {
logo.classList.remove('trs');
console.log('1')
changeBackground(getRandomColor());
setTimeout(() => {logo.classList.add('trs');},100);
});
setInterval(() => {
changeBackground(getRandomColor());
}, 1000);
#als-logo {
background: url('https://img.artlebedev.ru/svalka/logo-v5/als-logo-01.png') top left no-repeat #f90710;
width: 90px;
height: 30px;
background-size: 90px 30px;
}
.trs {
transition: 7s;
}
<div id="als-logo" class='trs' style="background-color: rgb(149, 151, 16);"></div>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Написал функцию, которая шифрует текст по методу ЦезаряРаботает она по методу превращения каждого символа в числовое значение Юникода:
Доброго времени суток!
Следуя гайду на оффицаильном сайте socketio я сделал простенький чат
Как с помощью JS считать GET переменную которая находится в URL'е? Например: http://siteru?data=value