Lecaw

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

 
 

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

(392)
(0)
 
 

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

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

(195)
(3)
 
 

Сегодня я хотел бы показать, как создать удивительную анимацию вращения, используя CSS transform и дополнительные свойства CSS анимации, не используя JavaScript. Можете посмотреть на другие удивительные эффекты CSS3 background animation и pure CSS3 logo and icons.

Идея состоит в том, чтобы создать 3D галерею в виде 'куба'. Небольшие кубы расположены друг с другом, в каждом отдельная часть изображения, вместе они создают один большой куб с одним изображением. Один за другим они будут поворачиваться с различной задержкой. Этот процесс повторяется несколько раз, как цикл.

(322)
(0)

В этом уроке мы собираемся создать несколько простых, но довольно необычных эффектов наведения на картинки с помощью CSS transition. Методы которые здесь включены, такие как псевдо-класс :hover используются в CSS3 transition.

(254)
(1)
Страница 3 из 14