Автоматическая смена цвета у блока

443
16 марта 2017, 22:30

Мне очень нравится фишка с сайта Артемия Лебедева, где в шапке у них логотип. Так вот этот логотип со временем медленно меняет свой цвет, а при наведении курсора меняет на другой сразу и, что немаловажно, не меняется обратно (как бывает с типичными скриптами).

Помогите, пожалуйста, понять процесс создания оного (хотя бы одной из этих двух фишек)! Что это, JS или Jquery?

Answer 1

Там на 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>

Answer 2

Вот так можно:

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>

READ ALSO
Кириллица в Unicode

Кириллица в Unicode

Написал функцию, которая шифрует текст по методу ЦезаряРаботает она по методу превращения каждого символа в числовое значение Юникода:

347
Как подключится к комнате в socket.io?

Как подключится к комнате в socket.io?

Следуя гайду на оффицаильном сайте socketio я сделал простенький чат

622
Получение GET переменной из URL&#39;а в JS

Получение GET переменной из URL'а в JS

Как с помощью JS считать GET переменную которая находится в URL'е? Например: http://siteru?data=value

301