BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Эффекты для сайта » Шумящий эффект для картинки при наведении

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

2017-10-16 / Вр:22:50 / просмотров: 393

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

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

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

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);

}());

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

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

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

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

Subscribe without commenting

Метки: , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 781
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4278