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

 

Для начала нам необходимо подключить скрипты, разместив их между тегами <head></head>:

 После этого создаем HTML-разметку, которая будет иметь следующий вид:

Обратите внимание, что «navigation» (вкладки) находятся над ячейками с контентом. С отключенным CSS это все будет выглядеть как список навигации. Значения href этих сcылок ведут к определенным ID ячеек с информацией.

Как создать анимированные вкладки на jQuery

Затем мы используем стили CSS, в них будем применять простые границы и фоны, специальное состояние для текущей вкладки «current»

Теперь применяем тень div #box-wrapper. C помощью данного эффекта у нас получается иллюзия, как будто текущая вкладка находится над другими, а все другие находятся за ней.

важной особенностью является то, что у #box-wrapper и overflow hidden  четко заданная высота. Колонки во всех ячейках с контентом, которые на данный момент не активны спрятаны с помощью выталкивания их значения top на 350 пикселей.

Теперь создаем колонки:

jQuery. Нам необходимо присвоить колонкам с контентом в текущей ячейке позицию top = 0 

Теперь будем использовать атрибут delegate для событий при нажатиях на вкладки.

Обратим внимание на анимацию вкладок, когда пользователь нажимает на ссылку смена вкладок происходит только, если текущая вкладка не имеет статус «current».

И последняя , но не менее важная функция, это скорость прокрути контента внутри вкладок, для каждой вкладки можно установить свою скорость прокрутки.

speedOne = Math.floor(Math.random()*1000) + 500;
speedTwo = Math.floor(Math.random()*1000) + 500;
speedThree = Math.floor(Math.random()*1000) + 500;

На этом урок закончен, вкладки легко редактировать, у Вас не должно возникнуть проблем при добавлении новых функций и вкладок.