Здравствуйте уважаемые читатели XoZblogа! В этом уроке мы создадим фотогалерею для сайта с использованием HTML5 Canvas и CSS3. Смотрите демо-версию, чтобы оценить эффект при наведении на изображение. Оттенки серой «копии» основного изображения создаются с помощью Canvas, а также с CSS3 для плавного изменения «копии» на основное изображение. Советую также ознакомиться с уроком Галерея изображений на jQuery. Коротко о том, что такое Canvas. Спецификация HTML5 включает множество новых тегов, одним из которых является canvas. HTML5 Canvas — предоставляет простой и хороший способ работы с графикой и рисованием с использованием JavaScript. Следует также знать, что рисование ведется в растровой форме, таким образом, нарисовав на Canvas какую-либо фигуру, её нельзя будет редактировать или удалить отдельно, можно только стереть целую область Canvas.
Шаг 1: HTML разметка
Давайте начнем с простой HTML разметки, каждый элемент (Изображение) галереи является элементом маркированного списка.
1 2 3 4 5 6 7 8 9 10 11 | <div id="wrap"> <h1>Фотогалерея</h1> <ul id="gallery"> <li><a href="#"><img src="images/flo1.jpg"><div>Весенние цветы 1</div></a></li> <li><a href="#"><img src="images/lights2.jpg"><div>Городские огни 1</div></a></li> <li><a href="#"><img src="images/flo3.jpg"><div>Весенние цветы 2</div></a></li> <li><a href="#"><img src="images/lights1.jpg"><div>Городские огни 2</div></a></li> <li><a href="#"><img src="images/flo2.jpg"><div>Весенние цветы 3</div></a></li> <li><a href="#"><img src="images/lights3.jpg"><div>Городские огни 3</div></a></li> </ul> </div> |
Шаг 2: Стили CSS
Мы будем использовать изображение 300px на 300px. Элемент списка, которым является изображение в фотогалерее, принимает значение left для свойства float и позицию relative. Название изображения, завернутый в DIV элемент, который скользит вверх при наведении курсора мыши. Для достижения плавного эффекта появления названия, мы применяем CSS3.
(Все файлы данного урока Вы сможете скачать одним архивом «Исходники» — кнопка выше).
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 | /* Стили для фотогалереи */ #wrap {width: 1020px; margin: 0 auto;} h1 {font-size:3em;margin:0 0 20px 20px;text-shadow:0 1px 0 #fff;} /* Стили для каждого элемента маркированного списка */ li { float:left; position:relative; display:inline-block; width:300px; height:300px; margin:10px; padding:10px; background:#fff; -webkit-box-shadow:0 0 5px rgba(0,0,0,.35); -moz-boz-shadow: 0 0 5px rgba(0,0,0,.35); box-shadow:0 0 5px rgba(0,0,0,.35); } /* Стили для блока DIV в котором находится название изображения */ li div { position:absolute; height:0; width:280px; background:rgba(0,0,0,.45); overflow:hidden; bottom:10px; left:10px; padding: 0 10px; -webkit-transition:height 1s; -moz-transition:height 1s; -o-transition:height 1s; -ms-transition:height 1s; transition:height 1s; color:#fff; line-height:50px; font-size:1.2em; } li:hover div {height:50px;} |
Шаг 3: Canvas
Теперь мы будем использовать элемент HTML5 Canvas для рисования оттенков серой версии нашего изображения. Внизу вы найдете createCanvas пользовательские функции, которые создают Canvas элемент, делают копию изображения, выполняют преобразование и выводят его на холст и, наконец, вставляют холст в DOM дерево документа. С помощью .each() метода функция createCanvas повторяется для всех изображений в списке галереи.
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 | $(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.width = image.width; canvas.height = image.height; // Как только мы получим ссылку на объект исходного изображения, мы можем использовать DrawImage(ссылка, х, у), чтобы сделать ее Canvas. // х, у являются координатами на целевом холсте, куда изображение должно быть помещено. ctx.drawImage(image, 0, 0); // Принимаем данные изображения и храним их в массиве ImageData. Вы можете узнать данные Канвас с помощью метода getImageData (). Данные изображения включают в себя цвет пикселя (в десятичной системе, RGB значения) и прозрачности (альфа-значение). Каждый цветовой компонент представляет целое число от 0 до 255. imageData.data содержит высота y ширина х 4 байта данных, с индексом в диапазоне от 0 до (высота y ширина х 4) -1. var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height), pixelData = imageData.data; // Цикл по всем пикселям в массиве ImageData, RGB знаяения цвета. for (var y = 0; y < canvas.height; y++) { for (var x = 0; x < canvas.width; x++) { // Вы можете получить доступ к цвету значения (х, у) пикселя следующим образом: var i = (y * 4 * canvas.width) + (x * 4); // Получить RGB значения. var red = pixelData[i]; var green = pixelData[i + 1]; var blue = pixelData[i + 2]; // Преобразовать в оттенки серого. Одна из формул преобразования (например, вы могли бы попробовать простой средней (красный + зеленый + синий) / 3) var grayScale = (red * 0.3) + (green * 0.59) + (blue * .11); pixelData[i] = grayScale; pixelData[i + 1] = grayScale; pixelData[i + 2] = grayScale; } } // Ввод изменений ImageData обратно на холст. ctx.putImageData(imageData, 0, 0, 0, 0, imageData.width, imageData.height); // Установка полотна в DOM: image.parentNode.insertBefore(canvas, image); } } }); |
Шаг 4: Стили для Canvas
Давайте рассмотрим стили для настройки работы Canvas. Определим, что происходит по умолчанию и при наведении курсора мыши:
1 2 3 4 5 6 7 8 9 10 11 12 | canvas { opacity:1; position:absolute; top:10px; left:10px; -webkit-transition:opacity 1s .2s; -moz-transition:opacity 1s .2s; -o-transition:opacity 1s .2s; -ms-transition:opacity 1s .2s; transition:opacity 1s .2s; } li:hover canvas {opacity:0;} |
Вот и все готово! Эта фотогалерея не будет работать в версиях Internet Explorer ниже 9. Вы могли бы сделать альтернативные решения с использованием оттенков серого фильтра и добавить некоторые JQuery эффекты, применяемые при наведении курсора мыши. Также хочу добавить, что фотогалерея работает только на сервере (в том числе и локальном).
Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или следите за мной в Twitter. Не забывайте оставлять комментарии к статьям и урокам. Если урок Вам понравился и пригодился сделайте tweet или like — тем самым Вы выразите свою благодарность. До связи!
P.S.: Все о работе в интернете на блоге http://kartashenkov.ru/
Источник статьи/урока: https://xozblog.ru
По материалам: http://pehaa.com/2012/02/create-your-portfolio-gallery-using-html5-canvas-tutorial/