Горизонтальное портфолио с анимацией на jQuery | RUDEBOXВ этом уроке мы собираемся создать горизонтальное расположение галереи для портфолио с красочными эффектами перекатывания созданные при вдохновении креативных иллюстраций Гийа Томази. Кроме этого мы добавим небольшой эффект при наведении на изображение, идея состоит в том, что картинка будет уменьшаться при этом под ним появится таблица с подписью к изображению все это будет реализовано с помощью jQuery и трансформаций CSS. При прокрутке страницы будет создаваться эффект падающих изображений. 

Художественные работы, используемые в этой демо-версии использованы с разрешения их владельца Влад Герасимов . Вы можете найти оригинальные изображения / обои и многое другое на его сайте VladStudio.com . И так, давайте приступим.

Шаг 1. HTML

Разметка достаточно простая, у нас будет контейнер, в котором будут содержаться изображения, контейнер будет помечен классом item:

С разметкой мы разобрались, теперь перейдем к следующему шагу.

Шаг 2. CSS

Давайте начнем с основных стилей для элементов, прежде чем мы перейдем к анимации и эффектов при наведении.

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

Горизонтальное портфолио с анимацией на jQuery | RUDEBOX

Figcaption с метаданными будет позиционироваться абсолютно, и будет невидимым на первый позиции, поэтому он получает значение непрозрачности равно 0.

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

Также при наведении курсора мыши, дата теги скользят вниз, подвал показан и метаданные скользят на дюйм:

Теперь создаем кроссбраузерною прокрутку:

Это все что нам необходимо со стилей, теперь перейдем к следующему шагу.

Шаг 3. JavaScript

Мы начнем с определения функции прокрутки которая сначала проверить позицию элемента на экране:

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

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

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: