Открывающийся текст (спойлер) на CSS и JavaScript
Открывающийся текст (спойлер) на CSS и JavaScript
Слово "спойлер" в современном интернете чаще всего используется в значении некой информации, которая заранее раскрывает важный сюжетный поворот или какую-то ключевую суть повествования. В публикациях спойлеры обычно делают в виде раскрывающегося текста, "аккордеона", с использованием тегов <details> / <summary> и другими способами. Сейчас в мессенджерах и на многих информационных сайтах спойлеры оформляют в виде размытого текста, который открывается при клике на него. Давайте тоже сделаем что-нибудь подобное.
Спойлер с размытым текстом
Первый вариант спойлера - размытый текст. Такой эффект достигается за счет применения элементу filter: blur(4.0px). В таблице стилей правило описывается примерно так:
Code (HTML) : Убрать нумерацию
- <style type="text/css">
- .my_text_spoiler {
- filter: blur(4.0px);
- cursor: pointer!important;
- }
- </style>
Спойлер с графическим фоном
Второй вариант спойлера - графический фон из точек вкупе с прозрачным текстом. В мессенджере Telegram этот фон еще и анимированный. Выглядит эффектно, реализуется следующим набором правил CSS:
Code (HTML) : Убрать нумерацию
- <style type="text/css">
- .my_img_spoiler {
- background: url('back.png') repeat no-repeat;
- background-position: center;
- cursor: pointer!important;
- color: transparent!important;
- }
- .my_img_spoiler::selection {
- background: #000;
- }
- .my_img_spoiler::-moz-selection {
- background: #000;
- }
- </style>
Верстка в общих чертах будет выглядеть следующим образом:
Code (HTML) : Убрать нумерацию
- Spoiler: <span class="my_spoiler my_img_spoiler">hidden text</span>
Теперь реализуем интерактивную часть спойлеров, точнее их раскрытие при нажатии. Для этого воспользуемся следующим кодом на JavaScript:
Code (JavaScript) : Убрать нумерацию
- <script type="text/javascript">
- var el=document.getElementsByClassName('my_spoiler');
- if (el.length) {
- for(var i=0; i<el.length; i++) {
- el[i].addEventListener('click',
- function() {
- var re = /\s?my_[a-z]+_spoiler/;
- this.className=this.className.replace(re, '');
- }
- );
- }
- }
- </script>
Готовые примеры спойлеров, описанных в статье, можно посмотреть на демонстрационной странице.
Просмотров: 746 | Комментариев: 1
Комментарии
Отзывы посетителей сайта о статье
Добавить комментарий
Заполните форму для добавления комментария
А на форумах спойлеры обычно в подобие аккордеона заворачиваются.