Вы, наверное, много слышали о новых элементах HTML5 Саnvas. Это специальный элемент, который позволяет нам создавать и изменять некоторую графику. Кроме этого мы можем использовать этот элемент в сочетании с jQuery. По этому в сегодняшнем уроке будет идти речь именно о создании замечательного слайдера контента с применением данных эффектов, который, как и многие другие слайдеры такого типа, можно использовать с различным контентом, давайте посмотрим, как это выглядит..

 

Данный слайдер является кроссбраузерным, что позволит наслаждаться его применением с различных браузерах, идея в том, что с помощью JavaScript, мы собираемся применить специальные фильтры для каждого изображения в слайд-шоу. Мы создадим новую версию изображения, с более высокой контрастностью и более яркими цветами.

Когда пользователь переходит к другому слайду, то изображения сменяются с анимацией FadeIn, создавая плавный эффект освещения.

Первым шагом в  слайд-шоу, является создания HTML-разметки страницы:

html5-slideshow.html

Как видите, что разметка для слайдера очень проста. Все построено с применением #slideshow, который имеет неупорядоченный список который определяем как элемент LI.

Все стили для слайдера находятся в styles.css, по этому особых трудностей в изминении стилей не должно возникнуть, все достаточно просто.

Заметим, для того что бы изображения находилось на своем месте и пока было скрыто, мы будем использовать overflow:hidden

Переходя к последней части урока — JavaScript и JQuery код. Мы уже объяснили основные принципы, лежащие в действии слайдера, создав document.createElement (), мы можем создать любой элемент DOM, который нам нравится. Чтобы все браузеры могли поддерживать данные эффекты мы присвоим значение getContext().

script.js

Обратите внимание, подключая createCanvasOverlay функции (которую мы обсудим во второй части кода) заключаются в SetTimeout заявлении. Задав правильный SetTimeout, мы сможем ускорить загрузку эффектов, и сократить время вызова компонентов слайдера.

script.js – №2

Размер изображения можно изменить, по умолчанию слайдер использует размеры width=»620″ height=»320″. Для изменения стоит подправить размеры в файле index.html

На главную