Вы ведете форум или что-то связанное, где пользователи могут публиковать мнения, учебные пособия и т. Д. Об играх, фильмах, книгах и т. Д.? Вы не можете, Вы обязаны разрешить издателям скрывать контент, содержащий конфиденциальную информацию (спойлеры) о какой-либо теме. В противном случае люди, которые посещают ваш сайт, вероятно, никогда не вернутся, если обнаружат, что настоящая личность Бэтмен — это Брюс Уэйн, возможно не с чем-то банальным, но важными темами.
В Интернете есть много решений для такой проблемы, однако большинство из них слишком агрессивны и довольно ужасны. Используя простой CSS, когда вы наводите указатель мыши на элемент, содержащий спойлер, вы уже можете знать, что в нем происходит, даже не желая этого. Вот почему в этой статье мы покажем вам, как скрыть спойлеры с помощью размытия с помощью плагина JavaScript, который прекрасно справляется с этой функцией.
1. Загрузите и включите оповещение о спойлере
Для достижения цели мы рекомендуем использовать плагин Spoiler Alert. Этот плагин позволяет скрывать текст и изображения с небольшим размытием SVG. При наведении курсора ваш пользователь получит подсказку о спойлере и узнает, что это такое, одним щелчком мыши. Таким образом, с помощью JavaScript и некоторого размытия контент вашего сайта защитит знания вашего посетителя.
Загрузите копию скрипта Spoiler Alert из официального репозитория, либо минимизированный или же полная версия здесь. В качестве альтернативы вы можете использовать бесплатный CDN. Затем включите его в документ, используя простой тег сценария:
До даты плагин не был настроен для работы с модулем-компоновщиком, например, browserify или webpack (используя require), так как он создает глобальную переменную в окне, а именно spoilerAlert, Для получения дополнительной информации об этом плагине, пожалуйста, посетите официальный репозиторий на Github здесь.
2. Использование плагина
Как уже упоминалось ранее, плагин глобально выставлен в spoilerAlert переменная. Эта переменная является функцией, которая ожидает до 2 аргументов. Первый аргумент — строка селектора запроса, которая выбирает все нужные элементы, к которым будет применено размытие. Этот запрос будет использоваться внутри document.querySelectorAll(your selector) функция. В следующем примере показано, как размыть теги и элементы спойлера с помощью класса spoiler:
The secret identity of Bruce Wayne is Batman
Listen to me carefully, Mark David Chapman killed John Lennon because he had a lot of psychological issues, one of them being that he literally heard voices in his head.
spoilerAlert("spoiler, .spoiler");
Это означает, что вы можете размыть любой элемент в вашем документе (если не весь HTML-документ). Второй аргумент является необязательным и должен быть объектом с двумя свойствами, а именно max а также partial, Эти значения являются желаемым значением размытия для элемента на каждой фазе (частичное при наведении мыши и максимальное при отсутствии мыши рядом), по умолчанию, если этот аргумент не предоставлен, spoilerAlert будет использовать 4 для параметра max и 2 для частичного:
The secret identity of Bruce Wayne is Batman
Listen to me carefully, Mark David Chapman killed John Lennon because he had a lot of psychological issues, one of them being that he literally heard voices in his head.
spoilerAlert("spoiler, .spoiler", {
max: 10,
partial: 5
});
После выполнения этой функции ваши элементы будут иметь эффект размытия, предотвращающий чтение спойлеров.
Счастливого предотвращения спойлера!
