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

 

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

Гибкие слайды с эффектом параллакса на CSS3

Шаг 1. HTML

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

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

Гибкие слайды с эффектом параллакса на CSS3

Шаг 2. CSS

Теперь перейдем к самому главному, ведь основная работа у нас будет возлагаться именно на css, для начала определяем общие параметры:

Затем добавляем подписи и скругляем края, также добавим немного теней:

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

Шаг 3. JS

Нам нужно будет добавить немного магии, а именно активировать функцию нажатия на блоки и их активации, поможет нам в этом немного кода js:

В результате такой замечательный слайдер с эффектом параллакса у нас получился. Спасибо Zed Dash за реализацию данного слайдера.

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