Шумящий эффект для картинки при наведении

Хочу вам предложить эффект для сайта, а точнее для изображения – шумящая картинка. Тяжело объяснить, как это будет выглядеть. Проще, наверное, выложить код с демонстрацией, чтобы вы могли сами посмотреть вид этого эффекта.
В демонстрации эффекта пробуйте навести на изображение мышкой.

[ демонстрация эффекта ]

А вот и сам код:

CSS:

canvas {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
cursor: move;
}

HTML:

<canvas id='canv'></canvas>

JS:

document.ready(function(){
var c = document.getElementById('canv');
var $ = c.getContext('2d');
c.width = 600; c.height = 400; //размеры картинки
var ms = false;
var w = 0, h = 0;

var img = new Image();
img.src = 'ВАША-КАРТИНКА.jpg'; //тут вставьте картинку

var set = function(){
var run, _h, _w, dx, a;
w = img.width;
h = img.height;
$.translate(50, 50);
a = 20; //настройка шума
dx = 0;
_w = w + 50;
_h = h + 50;
return (run = function() {
var inc, i, j;
$.clearRect(-a, -a, _w, _h);
inc = ms === true ? 0.5 : 0.18;
for (j=0; j <= h; i = 0 <= h ? ++j : --j) {
dx = ~~(inc * (Math.random() - 0.5) * a);
$.drawImage(img, 0, i, w, 1, dx, i, w, 1);
}
window.requestAnimationFrame(run);
})();
};
img.onload = function(){
return set();
};
c.addEventListener('mouseover', function(){
return ms = true;
}, false);
c.addEventListener('mouseout', function(){
return ms = false;
}, false);

}());

В коде я закомментировал, что настраивать и куда вставлять.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

3 Ответов на комментарий - Шумящий эффект для картинки при наведении

1. Кирилл

   14.01.2018 в 12:02

   Какой классный эффект! Спасибо за наводку
2. Степан => автор блога

   14.01.2018 в 16:06

   Пожалуйста, Кирилл!!!
3. Виталий

   16.02.2020 в 11:31

   Здравствуйте, Степан. Спасибо Вам за Ваш блог.
   Я извиняюсь, а не могли бы Вы привести пример кода, которым шум картинки будет не от наведения курсора мыши, а по времени. Например, каждые двадцать секунд пятисекундный шум картинки.
   И возможно ли это сделать без js, c помощью css animate и transform?

Добавить комментарий

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: Вебмастеру, для сайта, эффекты для сайта