Lecaw

Учимся создавать Web-сайты

Сегодня я хочу рассказать Вам про еще один 3D-эксперимент: 3D CSS галерея в виде комнаты. Идея состоит в том, чтобы создать реалистичную выставку изображений с использованием CSS 3D transforms. Изображения "повешены" вдоль стены, которая будет заканчиваться спустя определенное количество изображений. Как только дойдем до конца стены, будет происходить вращение и мы будем перемещены к следующей стене с другими изображениями. Чтобы добавить реальное ощущение пребывания в комнате, создадим только четыре стены. У каждого изображения будет тег title, используем небольшой размер шрифта и при нажатии на описание, отобразим полно размерное изображение в нижней части.

(409)
(1)
 
 

В нашем новом учебном руководстве я хотел бы показать, как создать jQuery галерею изображений с CSS transition. Я буду использовать готовый jQuery плагин – jqFancyTransitions. Это простой и эффективный jQuery плагин, предназначенный для того, чтобы вывести на экран фотографии, как слайд-шоу, с необычными эффектами css transition. Есть много способов настройки плагина. Все возможные варианты будут опубликованы в конце этой статьи.

(1288)
(2)
 
 

CSS transitions позволяет браузеру анимировать HTML элементы через изменение свойств CSS. Другими словами, мы можем создать анимации на веб-странице без JavaScript, но с чистым CSS.

Сегодня я покажу, как использовать это удивительное свойство CSS transitions для создания необычной галереи изображений. Используемые методы являются, главным образом, CSS transitions, который объединен с псевдо-классом :hover в CSS. Конечно, мы также будем использовать и другие свойства CSS для достижения поставленной цели!

(745)
(3)

Итак, сегодня мы собираемся создать CSS галерею изображений, в которой изображения уменьшаются в масштабе по щелчку. Также добавим кнопку "закрыть" для закрытия изображения после того как оно было уменьшено. Для всего этого мы будем использовать простой CSS!

(523)
(0)
Страница 1 из 2