меню слайдер на css

CSS слайдер

С развитием CSS3, возможности верстки растут экспоненциально. Всё больше функционала можно реализовать на «чистом» CSS. В этом посте показан процесс разработки интерактивного циклического слайдера без единой строчки JavaScript. Автоматическая ротация, выбор любого слайда с плавным переходом – на «чистом» CSS. Пример в действии

Общая информация.

Стандарты и префиксы

Свойства transition, animation и transform уже давно, в том или ином виде, реализованы во всех популярных браузерах. 6 июня 2012 года W3C объявил, что эта часть разрабатываемого стандарта CSS 3.0 кардинально меняться не будет, и рекомендовал реализовать её всем браузерам уже сегодня.

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

Устаревшие версии Internet Explorer, к которым скоро можно будет отнести даже 9 версию, не поддерживают transition, animation и transform ни в каком виде. Но их доля всё ещё превышает 10%.Для IE7-9 предлагается js-«заглушка», а эффекта плавного переключения между слайдами – ничего.

Почему CSS, а не JS?

Есть множество задач, которые можно решить при помощи CSS: интерактивные галереи, многоуровневые выпадающие меню, построение и анимация трёхмерных диаграмм… Зачем же использовать CSS, когда можно все сделать на JS, особенно учитывая массу готовых наработок? Основные аргументы могут быть такими:

Реализация

Итак, для именования CSS классов использовалась методология Блок Элемент Модификатор (БЭМ). Суть в том, что вёрстка основана на компоновке страницы из независимых блоков. Согласно БЭМ у блока могут быть элементы, но только внутри блока.

Анимация

Анимационная последовательность по ключевым кадрам для трёх слайдов выглядит следующим образом:

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

Такой подход позволяет серьезно сократить объем кода, ведь все анимации пока ещё приходится дублировать их префиксными версиями (@-webkit-keyframes, @-moz-keyframes и @-o-keyframes), а каждую такую «стопку» правил надо отдельно описывать для каждого требуемого (заказчиком) числа слайдов. Если отдельно описывать анимацию ещё и для каждого слайда, то объем кода может составить десятки килобайт.

Чтобы этого избежать, но последовательно анимировать все слайды и кнопки при помощи одной анимации, достаточно расставить смещение начала анимации во времени для каждой пары слайд + кнопка:

Для первой пары остаётся значение по-умолчанию – нулевое смещение.

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

В итоге плавный анимированный переход между слайдами выглядит так:

Пауза при наведении курсора

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

Переключение по клику

Есть целый ряд CSS «событий», переключающих состояние html элемента. Если говорить о клике мыши, то это появление псевдоклассов :focus, :target, или :checked у одного из элементов страницы. Псевдокласс :focus может быть не более чем у одного элемента на страницу единовременно; псевдокласс :target засоряет историю браузера и требует наличие тега «a»; псевдокласс :checked запоминает состояние до ухода со страницы, плюс, в случае радиокнопок, является дискретным переключателем, когда выбран может быть только один элемент конкретной группы – то, что нужно.

В селекторах ниже уровня 4 переключить состояние произвольного элемента (например, opacity слайда) можно только в связке с радиокнопкой, при помощи селекторов соседей + и

. Переключить можно как стили соседа, так и стили потомков соседа, но в любом случае сосед должен находиться после радиокнопки.

Было использовано переключение opacity слайда – контейнера, который содержит картинку. Это более универсальный способ, чем переключение свойств картинки, поскольку в div-контейнер, в отличие от пустого элемента img, можно поместить любую дополнительную информацию (например, название слайда, или связанное описание, включая ссылки).
Для слайдов указаны свойства transition, которые позволяют сделать переключение между ними плавным.

Остановка ротации при выборе слайда

Поскольку анимация, пусть и одинаковая по структуре, есть у каждого слайда, а выключать надо анимацию всех слайдов (иначе в плавном переходе будут участвовать три слайда), все радиокнопки надо располагать до первого слайда.

Более того, все кнопки (лейблы радиокнопок) надо группировать в отдельном блоке и помещать после радиокнопок, иначе могут возникнуть проблемы с универсальным позиционированием лейблов для произвольного числа слайдов.

Остановка анимации всех слайдов и кнопок при выборе любого слайда задаётся следующим образом:

Произвольное число слайдов

Сделать универсальный слайдер под любое число слайдов невозможно, потому что под каждое число требуется своя «стопка» CSS-правил анимации. Каждую такую «стопку» (если она описана) можно подключать через модификатор блока slider:

где X – число слайдов.

Для поддержки некоторых старых браузеров первый слайд не анимируется. По этой причине контейнер первой картинки имеет opacity всегда равный 1.0. Возникает проблема: при плавном переключении двух других слайдов между собой, первый просвечивает (это может быть и background родителя блока slider). Для удаления эффекта просвечивания устанавливается задержка transition-delay для всех слайдов, кроме выбранного; для выбранного же устанавливается z-index больше, чем у всех остальных:

Чтобы слайды не конфликтовали с другими элементами сайта (например, не перекрывали выпадающее меню с z-index менее или равным 6), создаём свой контекст (stacking context) для блока путём задания минимально, необходимого для видимости, z-index`а:

Уже сегодня, без навыков программирования и специализированных библиотек, до своей окончательной стандартизации, CSS 3.0 позволяет реализовывать сложные и интересные задачи. Описанный интерактивный слайдер, на текущий момент, полностью работоспособно у 80% пользователей рунета. Для большей части оставшихся пользователей, а именно для пользователей браузеров IE7-9, можно использовать js-«заглушку», которая реализует основной функционал слайдера.

Источник

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

Netflix Show Carousel

Эта карусель отличается уникальными эффектами анимации наведения и увеличения. Ее легко адаптировать для работы с видео.

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

Annotated Linear Carousel

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

В ней нет стрелок и точек навигации. Просто кликните по правой или левой стороне карусели, и вы сразу перейдете к следующему слайду.

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

Fading Carousel

Аккуратная карусель с эффектом затухания и небольшими элементами навигации: точки и стрелки с обеих сторон. Карусель контролируется с помощью CSS, стрелки работают как переключатели.

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

Responsive Slideshow

Слайдер с добавлением подписей, управляемый с помощью CSS. Он полностью адаптивен и работает в любом современном браузере.

Все стили CSS написаны на Sass. Слайдер использует библиотеку миксинов Bourbon для реализации дополнительного функционала. Анимация скольжения движется влево или вправо в зависимости от направления перемещения.

CSS3 Testimonials Slider

Этот слайдер отзывов легко реализовать.Он компактный и использует для анимации чистый CSS.

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

Picture Frame

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

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

Dark UI

Для привлечения внимания слайдер использует ярко-зеленые блики и красивые анимированные подписи.

Простой слайдер на CSS прост в использовании. А тот факт, что он работает на чистом CSS3, впечатляет.

CSS Image Carousel

Эту карусель изображений можно настроить, изменив всего несколько строк кода. Она использует CSS для создания небольшой рамки вокруг фотографий.

Все это работает на коде, состоящем из 100 строк CSS, и без Sass. Поэтому код легко скопировать и вставить в любой макет.

Pure CSS3 Carousel

Шаблон для создания слайдера фиксированными размерами от Элио Маркондеса. В нем с помощью очень простой анимации можно перелистывать каждый фон вместе с текстом.

Слайдер на чистом CSS, это один из самых простых шаблонов.

Text Carousel

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

Каждый блок текста имеет свой цикл анимации. Вы можете увеличить или уменьшить количество слайдов, добавив / удалив классы CSS.

Дайте знать, что вы думаете по этой теме в комментариях. За комментарии, подписки, дизлайки, отклики, лайки низкий вам поклон!

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

Источник

Слайдер на чистом CSS — как сверстать

Всем привет!
Сегодня мы разберемся, как сверстать слайдер на чистом CSS, без использования JavaScript, без использования плагинов. Все сами своими руками. Заглянем под капот, разберемся в конструкции от и до. Посмотрим, какие свойства в CSS дают возможность нам сделать это.

Я покажу слайдер, который делается на основе использования свойства visibility. Такой слайдер действует по следующему принципу: все слайды помещаются в одно место, но каждый раз отображается только один из них, нужный нам. Все остальные же в этот момент просто невидимы (свойство visibility у них hidden). Меняя видимость слайдов, мы переключаем слайдер с одного слайда на другой.
Есть и другие способы создания слайдера, но общий принцип работы механизма у них похож.
Вот, что должно у нас получиться.

Начало работы.

Подготавливаем html-документ для начала работы, подбираем картинки для слайдера, все размещаем по нужным папкам, создаем и подключаем документ стилей. Кроме того, в слайдере будут использоваться стрелки, у меня, к примеру, это иконки из font awesome, поэтому необходимо скачать его, и тоже поместить в наш проект. Теперь мы готовы начать. Здесь можно скачать исходники для начала работы.
Создаем в нашем документе контейнер для будущего слайдера.

В CSS задаем размеры слайдера, выравниваем его на странице, и указываем position relative для того, чтобы потом задать абсолютное позиционирование для самих слайдов внутри контейнера.

Помещаем в контейнер все наши картинки, обернутые в div-блоки с присвоенным каждому блоку id.

Задаем у слайдеров высоту и ширину в 100% от нашего контейнера, абсолютное позиционирование, чтобы они оказались все на одном месте, и visibility: hidden. То есть изначально все слайды спрятаны.

Создаем механизм

Теперь пришло время для создания основного механизма нашего слайдера, с помощью чего мы вообще будем слайды переключать. Работать все будет на основе флажков (input типа radio). Указываем эти флажки по количеству наших слайдов, каждому прописываем свой id, и на одном из слайдов, тому который должен будет показываться по умолчанию при загрузке задаем значение checked (обычно это самый первый слайд). Переключением значения checked и будут переключаться наши слайды.

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

Теперь нам нужно подготовить переключатели стрелочками для перелистывания слайдов вперед и назад. Делать мы их будем с помощью меток для нашего переключателя-радио. Создаем две группы меток — одна для перелистывания вперед, другая для перелистывания назад. В каждой группе по метке на каждый слайдер (на каждый наш инпут). У каждой метки обязательно указываем атрибут for для того, чтобы обозначить связь между этой меткой и флажком radio, к которому она относится. В этом атрибуте указывается id соответствующего инпута. В метки я вставила иконки font awesome для отображения стрелок.

Задаем им цвет, размер, позиционируем абсолютно, размещаем в нужном нам месте с помощью свойств top, left, right, и для начала их тоже прячем.

И последнее в структуре нашего слайдера — это переключатели-индикаторы, которые чаще всего размещают внизу в виде кружков. Они тоже будут сделаны как метки для соответствующего переключателя.

Задаем позиционирование, высоту и ширину контейнера для этих меток, и оформляем сами эти метки в виде кружков нужного нам размера, радиуса и цвета.

Заставляем механизм работать.

Теперь пришло время сделать так, чтобы наш слайдер заработал. В первую очередь будет использоваться псевдокласс checked в CSS. Этот псевдокласс обозначает применение какого-либо свойства только если у переключателя есть атрибут checked (то есть если он выбран).

Эта запись означает применение стилевых свойств к элементу с id first (первый наш слайд) в том случае, если у элемента с id img_1 (первый наш флажок) есть атрибут checked. Вообще, знак

обозначает родственные отношения между селекторами, т.е. те селекторы, которые являются близлежащими и имеют общего родителя. Таким образом, если у нас будет выбран первый флажок, то мы показываем первый наш слайд (меняем у него visibility с hidden на visible). Все остальные, напоминаю, в это время невидимы. По аналогии, если мы выбираем второй флажок, то должен показываться второй слайд, а когда выбираем третий флажок, то показывается третий слайд.

#third
<
visibility: visible;
>

В работе слайдера мы будем пользоваться еще одной хитростью. Дело в том, что флажки переключаются не только при непосредственном нажатии на соответствующий инпут. Это у нас не выйдет — мы их спрятали. Флажки еще можно переключать при нажатии на метку, соответствующую им. Это то, что как раз нам нужно!
Наши индикаторы уже работают, если по ним пощелкать. Теперь только осталось выделить как-то тот индикатор, который соответствует своему слайду. Для этого вновь воспользуемся псевдоклассом checked

div #switcher1,
#img_2:checked

div #switcher2,
#img_3:checked

div #switcher3
<
background: #F08080;
>

Будем закрашивать нужный индикатор (то есть изменять нужную метку), когда будет выбран соответствующий ему флажок.
Наконец, давайте заставим работать стрелочки. И опять мы будем делать это с помощью нашего сегодняшнего помощника, псевдокласса checked. Нам опять необходимо, чтобы для каждого слайда у нас показывалась одна стрелка вперед, и одна назад (а всего у нас их, напоминаю, три вперед, и три назад, только изначально они все спрятаны).

Эта запись означает, что когда выбран первый флажок, показывается вторая по счету (псевдокласс nth-child с указанием элемента по счету) метка с иконкой «вперед». То есть та, при нажатии на которую будет у нас показываться второй слайд. То, что нужно! Соответственно, при показе второго слайда будет показываться стрелка, ведущая на третий слайд, а при показе третьего — стрелка, ведущая на первый.

#arrow_next label:nth-child(2),
#img_2:checked

#arrow_next label:nth-child(3),
#img_3:checked

#arrow_next label:nth-child(1)
<
visibility: visible;
>

Тоже самое делаем и для стрелки «назад», только там метки указываем в обратном порядке.

#arrow_prev label:nth-child(3),
#img_2:checked

#arrow_prev label:nth-child(1),
#img_3:checked

#arrow_prev label:nth-child(2)
<
visibility: visible;
>

Теперь слайдер готов и полностью функционирует.

Добавляем немного плавности

Подробно сейчас на свойстве transition останавливаться не буду, это отдельная большая тема. Если пока не знаете о нем, вставьте, как у меня.

#third
<
visibility: visible;
opacity: 1;
>

Все! Наш слайдер на чистом CSS готов!
При желании, можете скачать код готового слайдера.

Источник

Интересный и одновременно простой слайдер на чистом CSS3

1. Верстаем основу

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

Здесь мы видим, что общий блок «wrapper» содержит в себе блок «slider» с 5-ю слайдами, внутри которых можно поместить любой html-код, который будет располагаться на слайде. Перед общим блоком находятся радио-кнопки, которые впоследствии будут скрыты, чтобы создать для них собственную панель навигации по слайдам, с которой нам помогут лейблы в блоке «controls».

2. Оформляем слайдер

Здесь мы остановимся и немного рассмотрим css. Обратите внимание, что для некоторых свойств проставлены кроссбраузерные префиксы, чтобы все современные браузеры могли их понимать.

С оформлением фона и общими стилями всё понятно.

Общий блок и блок с слайдером имеют одинаковые размеры, чтобы идеально контролировать положение слайдера на странице. Пока отсутствуют слайды, слайдер мы временно покрасили в светло-серый цвет.

Радио-кнопки скрываем. Они нам понадобятся позже.

Результат на данный момент такой:

3. Оформляем слайды

Здесь мы пропишем общие стили для слайдов и каждый слайд отдельно:

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

4. Делаем навигацию по слайдам

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

Навигацию мы делаем классической. Каждая кнопка представляет собой область в виде круга, внутри которого при активном слайде пустая область частично окрасится. Пока же у нас следующий результат:

5. Учим кнопки нажиматься

Пришло время научить слайдер переключать слайды по нажатию на определённую кнопку:

В оформленные кнопки навигации добавляем плавное окрашивание внутри них. Также добавляем условия, при которых активная кнопка и кнопка, на которую навели курсор, будет плавно окрашиваться. Наши собственные радио-кнопки готовы:

6. Оживляем слайдер

Ну, а теперь делаем так, чтобы слайды наконец-то переключались:

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

Далее мы приписываем условие, при котором, в зависимости от активной кнопки навигации, в окне слайдера появлялся необходимый слайд.

Результат можно посмотреть здесь: демка слайдера.

Слайдер не требует js. Пускай он не умеет сам переключаться, но любому, кто знает основы CSS, transition и transform, будет легко придумать свои эффекты для переключения слайдов.

Источник

Слайдер на CSS

Хочу рассказать простой способ создания слайдера, без использования JS, при помощи анимации CSS.

1) Для начала напишем HTML, предположим что в слайдере будут сменять друг друга 4 изображения.

2) Далее оформим размеры блока, и еще несколько настроек, position: relative необходимо для того, чтобы создать контекст форматирования, дальше будет понятно зачем.

3) Также определим некоторые свойства для самих слайдов:

Как видно из CSS мы размещаем все слайды в верхнем левом углу слайдера, задавая, таким образом, одинаковую исходную позицию.

4) Далее нужно определить каким именно образом слайды будут сменять друг друга, не создавая разрывов – для каждого слайда я решил использовать следующую последовательность действий:

1. Слайд находится на исходной позиции, демонстрируется пользователю

2. Слайд двигается влево, пока полностью не выйдет за границу слайдера (у слайдера же, как выше указано, overflow: hidden, соответственно слайд не наезжает на окружающие объекты).

3. Далее слайд двигается наверх, пока нижняя граница слайда выйдет за верхнюю границу слайдера

4. Далее слайд двигается вправо, пока левая граница слайда, не выйдет за правую границу слайдера

5. Слайд спускается вниз на один уровень со слайдером

6. Слайд двигается на исходную позицию
Иначе говоря (кадры пока назову согласно номерам из списка выше):

5) Итак, стало понятно, как выглядит траектория слайда. Каждый слайд «объезжает» вокруг своего контейнера – слайдера – и возвращается на исходную. Таким образом мы можем бесконечно крутить любое количество слайдов. Но остался один нюанс, который является самым важным в этой схеме – время. Нужно правильно рассчитать раскадровку анимации по времени и установить правильную задержку для каждого слайда, чтобы не все одновременно ринулись анимироваться. Для того чтобы понять, как правильно выставит задержку и рассчитать время анимации, я пошел нижеописанным путем.

Давайте возьмем обозначения шагов из предыдущего пункта и разберемся что же происходит в каждом шаге. По сути, шаги №1, 2 и 6 – это те шаги, в которых слайд заходит в видимую область. Из того, что слайды должны двигаться неразрывно и, как бы, выталкивать друг друга из слайдера, можно заключить, что длительность шагов 2 и 6 должна быть равна. Сразу оговорюсь, что мне удалось удачно работать эту конструкцию только при том условии, что длительность первого шага также равна длительности 2-го и 6-го. То, что происходит во время шагов 3,4 и 5 – по сути, технические нужды, и для простоты, давайте объединим эти три шага в 1.

После упрощения имеем:

1. Шаг – слайдер демонстрируется на исходной
2. Шаг – слайдер сдвигается вправо
3. Шаг – слайдер совершает технические перемещения
4. Шаг – слайдер сдвигается влево, возвращаясь на исходную позицию

Для обеспечения безразрывного показа слайдов, в момент, когда слайд приступает к шагу 2, следующий слайд должен приступить к шагу 4.

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

Если время, на круг всей анимации – t;
Кол-во слайдов – n;
Длительность 3 шага – y;
Длительность шагов 1,2 и 4 – x;
Шаг задержки анимации для n-слайда – z;
То:

y = (100 * n — 150)/n;
x = (100 – y) / 3;
x и y необходимо перевести в проценты, и тогда:
z = 2 * x * t;

Для случая, когда n = 4, как в примере выше, получаем:

3-ий шаг – 62,5%, 1, 2 и 4-ый — по 12,5%. Шаг задержки анимации для каждого последующего слайда – 25%.

Какие интервалы будут между этапами внутри третьего шага – не имеет значения.

6) Теперь, когда мы все посчитали и знаем все величины можно привести финальный код.

Общий CSS для всех слайдов:

Вот, собственно и все! Спасибо всем, кто дочитал до конца.

Источник