Blog. Just Blog

Открывающийся текст (спойлер) на CSS и JavaScript

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Открывающийся текст (спойлер) на CSS и JavaScript
Открывающийся текст (спойлер) на CSS и JavaScript

Слово "спойлер" в современном интернете чаще всего используется в значении некой информации, которая заранее раскрывает важный сюжетный поворот или какую-то ключевую суть повествования. В публикациях спойлеры обычно делают в виде раскрывающегося текста, "аккордеона", с использованием тегов <details> / <summary> и другими способами. Сейчас в мессенджерах и на многих информационных сайтах спойлеры оформляют в виде размытого текста, который открывается при клике на него. Давайте тоже сделаем что-нибудь подобное.

Спойлер с размытым текстом
Спойлер с размытым текстом

Первый вариант спойлера - размытый текст. Такой эффект достигается за счет применения элементу filter: blur(4.0px). В таблице стилей правило описывается примерно так:
  1. <style type="text/css">
  2. .my_text_spoiler {
  3.     filterblur(4.0px);
  4.     cursorpointer!important;
  5. }
  6. </style>
Курсор принудительно меняется на указатель, чтобы обозначить доступную область нажатия. При относительной простоте реализации, большим минусом такого способа является плохая поддержка стиля filter старыми браузерами. Впрочем, современные "веб-мастера" о кроссбраузерности и обратной совместимости имеют весьма слабое представление, так что не стесняйтесь, лепите.

Спойлер с графическим фоном
Спойлер с графическим фоном

Второй вариант спойлера - графический фон из точек вкупе с прозрачным текстом. В мессенджере Telegram этот фон еще и анимированный. Выглядит эффектно, реализуется следующим набором правил CSS:
  1. <style type="text/css">
  2. .my_img_spoiler {
  3.     backgroundurl('back.png'repeat no-repeat;
  4.     background-positioncenter;
  5.     cursorpointer!important;
  6.     colortransparent!important;
  7. }
  8. .my_img_spoiler::selection {
  9.     background#000;
  10. }
  11. .my_img_spoiler::-moz-selection {
  12.     background#000;
  13. }
  14. </style>
Фоновое изображение представляет собой рисунок из точек в случайном порядке. Если сделать анимированную GIF-ку, то эффект из мессенджеров можно будет воспроизвести и на сайте. Черный цвет фона задается для того, чтобы текст спойлера нельзя было посмотреть при его выделении. Фоновые картинки в архиве ниже.

Фоновые картинкиФоновые картинки

Spoiler.Backgrounds.zip (1,076 bytes)

Верстка в общих чертах будет выглядеть следующим образом:
  1. Spoiler: <span class="my_spoiler my_img_spoiler">hidden text</span>
Дополнительный класс "my_spoiler" введен для того, чтобы можно было одним запросом выбрать все виды спойлеров, если на странице их используется несколько видов.

Теперь реализуем интерактивную часть спойлеров, точнее их раскрытие при нажатии. Для этого воспользуемся следующим кодом на JavaScript:
  1. <script type="text/javascript">
  2. var el=document.getElementsByClassName('my_spoiler');
  3. if (el.length) {
  4.     for(var i=0i<el.lengthi++) {
  5.         el[i].addEventListener('click',
  6.             function() {
  7.                 var re = /\s?my_[a-z]+_spoiler/;
  8.                 this.className=this.className.replace(re'');
  9.             }
  10.         );
  11.     }
  12. }
  13. </script>
По вспомогательному названию класса выбираются все спойлеры, затем им добавляется обработчик события click. При клике с элемента удаляется класс спойлера, тем самым убирая все маскирующие элементы.

Готовые примеры спойлеров, описанных в статье, можно посмотреть на демонстрационной странице.

Поделиться ссылкой ВКонтакте
Просмотров: 746 | Комментариев: 1

Комментарии

Отзывы посетителей сайта о статье
Petya (04.03.2024 в 16:44):
Такое можно и без JS сделать, если поколдовать с псевдоклассами (:active, :checked, :target, :hover в зависимости от желаемого поведения).
А на форумах спойлеры обычно в подобие аккордеона заворачиваются.

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.08 сек. / MySQL: 2 (0.003 сек.) / Память: 4.5 Mb
Наверх