Эффект для изображений с помощью Canvas
Создавая свой сайт вы, наверное, не раз задумывались над тем, как красиво можно оформить элементы на будущем ресурсе необходимым образом, чтобы пользователю было все предельно понятно но при этом не загромождало визуально взор. В данном случае вам не нужно строить велосипед, и мучатся создавая то, что до вас уже было изобретено. В данном уроке мы рассмотрим как можно оформить изображения с помощью элемента canvas. Который позволит визуально выделить ваши изображения придав при этом им особую изюминку.
Идея состоит в том, что серая «копия» изображения будет создаваться элементом canvas, а визуальное преобразование при наведении курсора будет выполняться трансформациями CSS3. И так, приступим.
Шаг 1. HTML
Разметка очень простая. Каждый элемент галереи является пунктом неупорядоченного списка.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
Эффект для изображений с помощью Canvas | Демонстрация для сайта RUDEBOX <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> </pre> <div id="wrap"> <ul id="gallery"> <li><a href="#" rel="nofollow" target="_blank"><img src="images/flo1.jpg" alt="" /></a> <div>Описание картинки</div></li> <li><a href="#" rel="nofollow" target="_blank"><img src="images/flo3.jpg" alt="" /></a> <div>Описание картинки</div></li> <li><a href="#" rel="nofollow" target="_blank"><img src="images/flo2.jpg" alt="" /></a> <div>Описание картинки</div></li> </ul> <span style="color: white;">Фотографии от </span><a href="#" rel="nofollow" target="_blank">Pinkonhead</a></div> <pre> |
Как вы заметили-разметка достаточно простая, по этому более детально на ней останавливаться не стоит, перейдем к следующему шагу.
Шаг 2. CSS
Для начала рассмотрим набор стилей простого сброса:
1 2 3 4 5 6 7 |
html, body, div, span, h1, h2, p, a, ul, li, img {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%;background: transparent;} ul {list-style: none;} :focus {outline: 0;} a {text-decoration:none;} |
Мы используем изображения размером 300px x 300px. Основной контейнер #wrap
центрируется по высоте (margin: 0 auto) и получает ширину 1020px (=340 x 3). Пункт списка получает свойство float : left и позиционируется относительно.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
#wrap { width: 1020px; margin: 0 auto; } li { float:left; position:relative; display:inline-block; width:300px; height:300px; margin:10px; padding:10px; background:#fff; box-shadow:0 0 5px rgba(0,0,0,.35); } li div { position:absolute; height:0; width:280px; background:rgba(0,0,0,.45); overflow:hidden; bottom:10px; left:10px; padding: 0 10px; line-height:50px; color:#fff; transition:height 1s; } li:hover div { height:50px; } |
Заголовок изображения оборачивается в элемент div
, который будет выдвигаться вверх при наведении курсора мыши на изображение. Для создания визуальных эффектов используется переход css3.
Добавим стили для элемента canvas.
1 2 3 4 5 6 7 8 9 10 |
canvas { opacity:1; position:absolute; top:10px; left:10px; transition:opacity 1s .2s; } li:hover canvas { opacity:0; } |
Шаг 3. Canvas
Теперь приступим к использованию элемента HTML5 canvas
, для формирования серой версии изображения.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
$(window).load(function() { $('#gallery img').each(function() { createCanvas(this); }); function createCanvas(image) { var canvas = document.createElement('canvas'); if (canvas.getContext) { var ctx = canvas.getContext("2d"); // Определяем размер элемента canvas canvas.width = image.width; canvas.height = image.height; // Как только мы получили объект исходного изображения, можно использовать метод drawImage(reference, x, y) для вывода его в элемент canvas. // x, y - координаты, где должно размещаться изображение. ctx.drawImage(image, 0, 0); // Получаем данные изображения и сохраняем его в массиве imageData. // Данные о точках получаем с помощью метода getImageData(). // Данные включают цвет точки (десятичное, RGB значение) и прозрачность (значение альфа канала). // Каждый цвет представлен целым значением в диапазоне 0 и 255. // imageData.da содержит данных объемом (высота x width x 4) байт с индексом в диапазоне от 0 до (высота x ширина x 4)-1. var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height), pixelData = imageData.data; // Цикл по всем точкам в массиве imageData // и модификация значений цветов. for (var y = 0; y < canvas.height; y++) { for (var x = 0; x < canvas.width; x++) { // Вычисляем индекс нужной точки (x,y): var i = (y * 4 * canvas.width) + (x * 4); // Получаем значение RGB. var red = pixelData[i]; var green = pixelData[i + 1]; var blue = pixelData[i + 2]; // Переводим цвет в серую шкалу. Одна из формул конвертации: var grayScale = (red * 0.3) + (green * 0.59) + (blue * .11); pixelData[i] = grayScale; pixelData[i + 1] = grayScale; pixelData[i + 2] = grayScale; } } // Помещаем модифицированные данные imageData обратно в элемент canvas. ctx.putImageData(imageData, 0, 0, 0, 0, imageData.width, imageData.height); // Вставляем элемент canvas в DOM, перед изображением: image.parentNode.insertBefore(canvas, image); } } }); |
Функция createCanvas
создает элемент, получает копию изображения, выполняет конвертацию и выводит результат в элемент canvas
, а затем вставляет его в структуру DOM. С помощью метода .each()
функция createCanvas
выполняет итерации по всем изображениям в списке #gallery
.
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Опубликовал Cooper 08.08.2012 в 10:55, в категории Веб-дизайн. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |