А если без JavaScript? / Хабр
В нашем мире без JavaScript никуда! Куча фреймворков, библиотек и прочей радости! jQuery плотно вошел в нашу жизнь. React с Angular пробивают дорогу к светлому будущему. Да и не за горами поддержка браузерами ES6 без Babel.
Но если тема заходит об обычном сайте со стандартным функционалом, не редки случаи, когда JavaScript начинают “злоупотрелять”. И все, в принципе, нормально… Но порой задаешься вопросом: «А если без JavaScript?».
Поэтому хочу поделиться с Вами вариантами реализации того или иного функционала, используя только html и css. Возможно, какие-то Вы уже видели, или даже используете в своих проектах, но здесь я решил собрать все полезные (и не очень) наработки, которые могут заменить js.
Все примеры адаптивные и легко расширяемые. Логика работы построена на checkbox и radiobutton, с которыми связаны label по id. Id можно генерировать на стороне сервера.
Но сразу хочу заметить, что данный код служит лишь примером реализации, и я не добавлял к свойствам вендорных префиксов.
Пойдем от простых решений к более интересным.
1. Табы / вкладки
label — вкладка;
p — контейнер для текста (можно заменить на div, к примеру).
Чтобы добавить новую вкладку, надо добавить в html теги input+label+p.
2. Аккордеон
Работает по такому же принципу, как и 1 пример.
3. Модальное окно
Модальное окно открыто, когда input:checked.
Теперь в любом месте в документе можно разместить кнопку label[for=zayavka], нажатие на которую будет открывать модальное окно. «zayavka» — это id модального окна, а точнее id input’а, который его «открывает». Т.е. что бы добавить еще 1 модальное окно, надо скопировать input+div.modal и заменить id input’а и for у label, которые с ним связаны.
4. Навигация / меню
Это вариант реализации мобильного меню с подпунктами.
Можно, естественно, адаптировать через медиа-запросы до десктопной версии.
5. Слайдер с превью изображений
Размер слайдера и количество изображений в нем можно сделать любое. Чтобы добавить новое изображение, нужно скопировать конструкцию input+(.item>img)+label>img (опять же, это можно генерировать автоматически на стороне сервера). Первый img — это основное изображение, второй img — превью. При желании, flex можно заменить на inline-block или float.
6. Карусель с «ленивой» загрузкой изображений
Размер карусели и количество изображений в ней можно сделать любое. Также можно доработать css и сделать отображение нескольких изображений в ряд. «Ленивая» загрузка здесь достигается путем того, что изображения прописываются в background-image для div, а в css есть строка, которая перебивает это свойство для div, которые не отображены на экране. В итоге, изображения загрузятся только тогда, когда пользователь начнет листать карусель.
Div с background-image можно заменить на обычный <img>, но тогда ленивая загрузка работать не будет. Чтобы добавить новое изображение, надо добавить в html теги input+div>label+.item. Причем, for у label должен вести на input перед предыдущим изображением (пример см. в коде выше).
Итог
Все примеры не привязаны к id элементов и их количеству! Т.е. не надо лезть в css при добавлении слайда в карусель, или новой вкладки таба. Id элементов можно задавать любые — все будет работать!
Так же хочу добавить, что, например, «прилипание» меню к верхней части экрана при скроллинге можно сделать, установив свойство position: sticky для меню. Но это свойство поддерживается не всеми браузерами.
Надеюсь, данная статья оказалась полезна для Вас! Таким образом можно реализовать еще много различных элементов на сайте без JavaScript. Один из плюс таких реализаций — это работа в браузерах с выключенным JavaScript (если в наше время кто-то таким пользуется).
Спасибо за внимание!
Слайдер на CSS3 (без JS*), подстраивающийся под разрешение — CSS-LIVE
Великолепнейший слайдер на чистом CSS сделал Йэн Хансон. Уникальность этого слайдера в том, что, во-первых, такие вещи, ранее делались только на JavaScript, а во-вторых, для чистого CSS, он чрезмерно функционален. В частности он может менять свои размеры, при разных разрешений экрана, ну и конечно же соответствет настоящему слайдеру, плавно меняя свои кадры, при нажатии на кнопочки или нажатию на специальные стрелочки по бокам самого слайдера.
В общем что говорить, это нужно увидеть!
Создан Йэном Ханссоном (@teapoted)
Рисунки Брендана Забараускаса (@bjzaba_).
Иконки из набора iconSweets.
Поддержка браузеров:
Лучшая по тестам: Firefox (производительность плавных переходов)
Полная поддержка: Chrome, Firefox, Opera, Safari (последние версии)
Частичная поддержка: IE9 (работает, но не поддерживает плавные переходы)
*JS не нужен для функциональности самого слайдера, но есть 1 фикс для совместимости с его использованием
Устройства на iOS не обрабатывают label-ы как надо.
В смысле когда кликаешь на label, он должен активировать объект, на который указывает его атрибут for. Я добавил яваскриптовый фикс для этого. Я мог бы переделать всё решение с использованием :target вместо :checked, что тоже должно было бы «починить» проблему, но это значило бы, что я мог бы использовать лишь 1 слайдер на странице. Я еще покопаюсь с этим.
Страничку без JS-фикса для iOS можно посмотреть здесь.
Как это работает?
Слайдер во многом похож на все JS-слайдеры. Его контентные области (статьи) «плавают» рядом друг с другом. Излишки скрываются с помощью overflow. Потом мы можем анимировать margin внутреннего дива, так, если у нас 5 статей, левый маргин -100% покажет нам вторую статью.
Чтобы сохранить наш выбор, мы используем радиокнопки. Как отмечено выше, можно использовать :target и ссылки с якорями, но это не дает полной замены яваскрипту, т.к. можно обработать лишь одно действие за раз, клики запоминаются в истории браузера и загаживают ее (кнопка «назад» браузера будет долго перематывать слайдер обратно), к тому же такое уже делали раньше.
Мы ставим радиокнопки в самом верху, так что, когда они в состоянии :checked, мы можем использовать обобщенный соседский селектор (~) для переключения слайдера.
#slide1:checked ~ #slides .inner { margin-left:0; }
#slide2:checked ~ #slides .inner { margin-left:-100%; }
#slide3:checked ~ #slides .inner { margin-left:-200%; }
#slide4:checked ~ #slides .inner { margin-left:-300%; }
#slide5:checked ~ #slides .inner { margin-left:-400%; }
Это вся функциональная часть CSS, остальное служит лишь для украшения и анимации.
Создано Йэном Ханссоном (@teapoted), февраль 2012.
Ссылка на оригинал
Скачать архив
P.S. Это тоже может быть интересно:
- CSS
Flexslider WordPress Slider Toolkit от WooThemes
Начните работу с FlexSlider, выполнив 3 простых шага!
Шаг 1. Связывание файлов
Добавьте эти элементы в
вашего документа.
Это свяжет jQuery и основные файлы CSS/JS FlexSlider с вашей веб-страницей. Вы также можете разместить jQuery на своем собственном сервере, но Google достаточно любезен, чтобы позаботиться об этом за нас!Шаг 2. Добавьте разметку
Разметка FlexSlider проста и понятна. Во-первых, начните с одного содержащего элемента, в этом примере
- . Важно использовать этот класс, потому что ползунок нацелен именно на этот класс. Поместите свои изображения и все, что вам нужно, в каждый
- , и вы готовы к работе.
Шаг 3. Подключите ползунок
Наконец, добавьте следующие строки Javascript в
вашего документа под ссылками из шага 1. $(window).load() требуется для обеспечения содержимого страницы загружается до инициализации плагина.…и вуаля! Это завершает самую простую установку FlexSlider на вашу веб-страницу.
Шаг 4. Настройка в соответствии с вашими потребностями
Ниже перечислены все параметры, доступные для настройки FlexSlider в соответствии с вашими потребностями, а также их значения по умолчанию.
Примеры использования этих свойств для расширенных настроек см. в разделе «Дополнительные параметры».Немного информации о FlexSlider
О FlexSlider
FlexSlider был создан, чтобы обслуживать лучший адаптивный слайдер jQuery. Я создал несколько реализаций адаптивных ползунков в разных клиентских проектах и заметил, что в этой концепции существует очевидная дыра для поддержки плагинов. Я хотел создать плагин, который обслуживал бы самых новых новичков, в то же время предоставляя опытным разработчикам инструмент, который они могли бы использовать с уверенностью. Что получилось, так это FlexSlider. Я планирую поддерживать этот плагин и оказывать поддержку пользователям, внедряющим FlexSlider на свои сайты. Адаптивный веб-дизайн может быть сложным, но я надеюсь, что FlexSlider немного упростит этот процесс.
Поддержка браузера
FlexSlider был проверен в Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+ и IE7+. Также поддерживаются устройства iOS и Android.
Поддерживаются версии jQuery 1.3+.Будущие цели
- Поддержка нескольких ползунков (поддерживается начиная с версии 1.6)
- Жесты смахивания iOS (поддерживаются начиная с версии 1.2)
- API обратного вызова (поддерживается начиная с версии 1.7)
- Переходы CSS3 (поддерживается с версии 1.8)
- Добавление параметров карусели (видимые слайды, количество слайдов для перемещения при анимации и т. д.)
- Поддержка пользовательских конфигураций для наименьших возможных размеров файлов.
- Дополнительные параметры темы
Известные проблемы
- На данный момент известных проблем нет. Не стесняйтесь регистрировать проблему в репозитории Github.
Список изменений
- v1.8 : 22 октября 2011 г. — Добавлена поддержка CSS3 transform3d для браузеров webkit в сочетании с прокруткой 1 к 1. Весь опыт касания был значительно улучшен по сравнению с предыдущими версиями.
— Добавлено свойство «mousewheel» для поддержки прокрутки элементов слайда с помощью колесика мыши.
— Добавлен «slider.manualPause», который задается элементом pausePlay и может быть установлен через API обратного вызова. Это предотвратит возобновление pauseOnHover при выходе из режима наведения.
— Убрано свойство «touchswipe» в качестве настраиваемых параметров.
— Исправлено поведение слайдов только с двумя слайдами. Прокрутка должна происходить так, как задумано.
— исправлена привязка элемента pausePlay для запуска как сенсорного запуска, так и щелчка.
— Примечание. В основной файл плагина добавлена функция уничтожения, но она закомментирована и исключена из уменьшенной версии.
Желающие могут найти функцию и документацию для реализации пользовательской функции уничтожения на основе своих собственных потребностей/триггеров событий. - v1.7 : 10 сентября 2011 г. — Функции API обратного вызова с параметрами start(), before(), after() и end(). Все функции должны включать один параметр для элемента слайдера. (например, start: function(slider) {}) – кроссфейд был введен с помощью новых методов CSS – добавлено свойство pausePlay для поддержки динамического элемента паузы/воспроизведения.
— добавлено свойство animationLoop для поддержки незацикленных ползунков
— Дальнейшее улучшение CSS FlexSlider, включая взломы IE для повышения целостности кросс-браузерного дизайна
- v1.6 : 30 августа 2011 г. — Значительные улучшения в архитектуре плагинов — Теперь возможно несколько экземпляров FlexSlider. (Пожалуйста, подумайте о своей аудитории, прежде чем сходить с ума по этому поводу) — Удалена опция «показать» анимацию в интересах других вещей.
— CSS FlexSlider обновлен. Используйте таблицу стилей v1.6!
- v1.5 : 27 августа 2011 г. — Улучшена поддержка мобильных устройств за счет добавления «touchstart» к связанным событиям — Реализовано решение для отсутствия резервного копирования javascript (зависит от пользователя и готовится к классам шаблона/модернизации html5)
- v1.4 : 23 августа 2011 г. — Добавлено свойство «manualControls», позволяющее настраивать настраиваемую нединамическую навигацию по элементам управления. — Добавлена анимация «показать», позволяющая мгновенно переходить между слайдами.
- v1.3 : 18 августа 2011 г. — Сделана анимация слайдов с эффектом непрерывной прокрутки, а не переход назад к началу/концу. — Убран код и созданы лучшие тестовые примеры для различных сценариев слайдера. С этим обновлением ползунок стал намного более пуленепробиваемым.
- v1. 2 : 16 августа 2011 г. — Исправлены некоторые избыточности кода — Добавлено свойство «randomize» для рандомизации порядка слайдов на странице. но должно работать)
— Исправлены мелкие ошибки в jQuery 1.3.2, из-за которых навигация не добавлялась правильно.
— исправлена серьезная ошибка в jQuery 1.3.2, из-за которой анимация слайдов не скользила
- v1.0 — Первоначальный выпуск под лицензией MIT.
Участники
Управление этим проектом занимает значительную часть моего времени вне работы, поэтому я хотел бы выразить искреннюю благодарность тем, кто поддерживал FlexSlider:
- Эндрю Фененбок
- Николай Фрота
- Датч Хейвен
- Эмбер Вайнберг
- Дэниел и Эвелина Барри
- Джастин Майерс – Zero Signal Productions
- Рут Эллиот – EDU Designs
- Тим Хайд — Хайд Интернет
- Шломи Атар
- Кортни Кертис
- Саймон Клейсон
- Мартин Гартнер
- Знак – Дизайн Хильды/Нельсона
- Йерун Вирсма
Легкий, гибкий и доступный слайдер/карусель
Обогатите свой следующий проект впечатляющими эффектами перехода от Splide и WebGL (three.
js).Доступно в репозитории только для спонсоров!
Примеры
По умолчанию
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
Side Padding
- 08
- 09
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 01
- 02
Multiple Slides
1 Slide Per Move
- 04
- 05
- 06
- 07
- 08
- 09
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 01
- 02
- 03
- 04
- 05
- 06
Нет пейджинговой связи
Требуется версия 4.1.0 или новее.
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 08
- 09
Примеры использования этих свойств для расширенных настроек см. в разделе «Дополнительные параметры».
Поддерживаются версии jQuery 1.3+.
2 : 16 августа 2011 г. — Исправлены некоторые избыточности кода — Добавлено свойство «randomize» для рандомизации порядка слайдов на странице. но должно работать)
js).Центр фокусировки
Drag Free
Drag Free Snap
Carousel Progress
Вертикальный ползунок
Для вертикального ползунка требуется параметр height или heightRatio для определения высоты ползунка.
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
true или укажите продолжительность wheelSleep .Автоматическая ширина/высота
Ширина каждого слайда определяется самой шириной его элемента.
Автовоспроизведение
Вы можете добавить индикатор выполнения и кнопки воспроизведения/паузы, предоставив дополнительный HTML-код. Кроме того, вы можете включить автовоспроизведение только тогда, когда ползунок находится в окне просмотра, используя расширение Intersection.
Плавный переход
Плавный переход не поддерживает несколько слайдов.
Справа налево
Вложенный ползунок
Точки останова
Вы можете обновить некоторые параметры с помощью медиа-запроса. Измените размер окна, чтобы увидеть, как это работает.
Добавить/удалить
Вы можете динамически добавлять/удалять слайды через API.
Ленивая загрузка
Ленивая загрузка откладывает загрузку изображений, чтобы сократить время первоначальной загрузки и потребление памяти/пропускной способности. Проверьте инструмент разработки вашего браузера, чтобы увидеть, как он работает.
Миниатюры
Ползунки Splide могут быть синхронизированы друг с другом. Используя это, вы можете создать галерею с навигацией по эскизам.
Auto Scroll*
Расширение AutoScroll непрерывно прокручивает ползунок (требуется расширение AutoScroll). Это совместимо с расширением Intersection.
Video*
Расширение Video назначает слайдам видео HTML, YouTube и Vimeo (требуется расширение Video). Это совместимо с расширением Intersection.
Grid*
Расширение Grid создает строки и столбцы в ползунке (требуется расширение Grid).
Навигация по URL-адресу*
Расширение URL Hash позволяет синхронизировать слайдер с хешем URL и обновлять хеш при изменении активного слайда (требуется расширение URL Hash).
О Splide
Splide — гибкий, легкий и доступный слайдер, написанный на TypeScript. Это поможет вам создавать различные типы ползунков, просто изменяя параметры, такие как несколько слайдов, миниатюры, вложенные ползунки, вертикальное направление и многое другое. Кроме того, вы можете расширить возможности ползунка, используя API-интерфейсы или создав расширения.
- Записано в TypeScript
- Не требует зависимости
- Легкий вес, 29 КБ (12 КБ GZIPPOD)
- Гибкие и расширяемые
- SLIDESERSERSEARSE
- Многочисленные SLIDES
- SLIDE OR FADE TRANSIO
- Принимает относительные единицы CSS
- Нет необходимости обрезать изображения
- Автовоспроизведение с индикатором выполнения и кнопками воспроизведения/паузы
- RTL и вертикальное направление
- Перетаскивание мышью и касание
- Бесплатный режим перетаскивания
- Навигация на колесах мыши
- Внутренний слайдер
- Ленивая загрузка
- Миремат.
