Бывает, что возникает необходимость скрыть часть текста под спойлером, но при этом, дать возможность пользователю легко получить к нему доступ. Чтобы все было максимально удобно для читателя.
Вариантов скрытого текста очень много. Я совсем недавно публиковала пост как сделать спойлер с кнопкой в блоге и совсем простой спойлер, как вариант. Если вы перейдёте по этим ссылкам, в постах ещё будут предложены другие способы скрыть текст.
Сегодня в копилку вот такой необычный и оригинальный спойлер.

Чтобы посмотреть работу такого скрытого текста скопируйте код целиком и установите его в этом редакторе.
<div class="spoiler">
Сначала перевезти на другой берег козу. Затем вернуться за капустой, привезти ее на берег к козе, поменять их местами (капусту оставить на берегу, а козу к себе в лодку), с козой в лодке отправиться на другой берег к волку. Высадить козу и взять на борт волка, отвезти волка к капусте на другой берег. Съездить и привезти козу.
Задача решена.
</div>
<style>
p {
text-align: justify;
}
.spoiler {
position: relative;
color: transparent;
text-shadow: 0 0 20px #55657a;
cursor: help;
}
.spoiler::before, .spoiler::after {
display: block;
position: absolute;
line-height: 1;
font-family: 'Fjalla One', sans-serif;
color: #872e27;
text-align: center;
text-shadow: none;
}
.spoiler::before {
top: 36px;
left: 0;
right: 0;
font-size: 25px;
content: 'А здесь ответ';
}
.spoiler::after {
opacity: 0;
top: 84px;
left: calc(50% - 36px);
width: 60px;
font-size: 60px;
line-height: 72px;
text-align: center;
clip: rect(0, 72px, 72px, 0);
content: '3 2 1';
}
.spoiler:hover {
color: #55657a;
text-shadow: 0 0 0 transparent;
transition: all 1s;
transition-delay: 4s;
}
.spoiler:hover::before {
animation: countdown-before 5s forwards;
}
.spoiler:hover::after {
animation: countdown-after 5s forwards;
}
@keyframes countdown-before {
25% {
transform: translateY(-24px);
}
75% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(-24px);
}
}
@keyframes countdown-after {
25% {
opacity: 1;
clip: rect(0, 72px, 72px, 0);
transform: translateY(0);
animation-timing-function: steps(1, start);
}
50% {
clip: rect(72px, 72px, 144px, 0);
transform: translateY(-72px);
animation-timing-function: steps(1, start);
}
75% {
opacity: 1;
clip: rect(144px, 72px, 216px, 0);
transform: translateY(-144px);
}
100% {
opacity: 0;
clip: rect(144px, 72px, 216px, 0);
transform: translateY(-144px);
}
}
</style>
Сначала перевезти на другой берег козу. Затем вернуться за капустой, привезти ее на берег к козе, поменять их местами (капусту оставить на берегу, а козу к себе в лодку), с козой в лодке отправиться на другой берег к волку. Высадить козу и взять на борт волка, отвезти волка к капусте на другой берег. Съездить и привезти козу.
Задача решена.
</div>
<style>
p {
text-align: justify;
}
.spoiler {
position: relative;
color: transparent;
text-shadow: 0 0 20px #55657a;
cursor: help;
}
.spoiler::before, .spoiler::after {
display: block;
position: absolute;
line-height: 1;
font-family: 'Fjalla One', sans-serif;
color: #872e27;
text-align: center;
text-shadow: none;
}
.spoiler::before {
top: 36px;
left: 0;
right: 0;
font-size: 25px;
content: 'А здесь ответ';
}
.spoiler::after {
opacity: 0;
top: 84px;
left: calc(50% - 36px);
width: 60px;
font-size: 60px;
line-height: 72px;
text-align: center;
clip: rect(0, 72px, 72px, 0);
content: '3 2 1';
}
.spoiler:hover {
color: #55657a;
text-shadow: 0 0 0 transparent;
transition: all 1s;
transition-delay: 4s;
}
.spoiler:hover::before {
animation: countdown-before 5s forwards;
}
.spoiler:hover::after {
animation: countdown-after 5s forwards;
}
@keyframes countdown-before {
25% {
transform: translateY(-24px);
}
75% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(-24px);
}
}
@keyframes countdown-after {
25% {
opacity: 1;
clip: rect(0, 72px, 72px, 0);
transform: translateY(0);
animation-timing-function: steps(1, start);
}
50% {
clip: rect(72px, 72px, 144px, 0);
transform: translateY(-72px);
animation-timing-function: steps(1, start);
}
75% {
opacity: 1;
clip: rect(144px, 72px, 216px, 0);
transform: translateY(-144px);
}
100% {
opacity: 0;
clip: rect(144px, 72px, 216px, 0);
transform: translateY(-144px);
}
}
</style>
Чтобы реализовать такое, в редакторе сообщения пишем нужный текст. Допустим -
"Отгадайте загадку. Крестьянин купил на базаре козу, кочан капусты и волка. По дороге домой надо было переправиться через реку. У крестьянина была маленькая лодка, в которую кроме него могла поместится только одна из его покупок. Как ему переправить все товары через реку, если нельзя оставлять козу наедине с капустой и волка наедине с козой?"
А потом переходите в режим HTML и устанавливаем сам код. В нём меняйте текст, который будет скрыт от глаз посетителя на нужный. Я отметила всё жёлтым шрифтом. Сейчас опять можно перейти в обычный режим и продолжить, если есть что, ваше сообщение. Сам эффект появится после публикации поста.
Если нужно на одной странице установить ещё такой же, просто поменяйте везде в кодах
spoiler на spoiler1 и так далее.
Вместо скрытого текста можно вставить что угодно - картинку, код, галерею и прочее.
<div class="spoiler">
Вставляем что хотим
</div>
Вот такая фишка сегодня получилась. Всем удачи и до встречи.
Получайте новые сообщения с блога прямо на почту
Спасибо за полезный совет! Подумаю, как его можно применить к блогу )))
ОтветитьУдалитьПрименить можно где угодно. Обычно это или какая -то интрижка или сюрприз. Некоторые ставят такие спойлеры, когда текст длинный
УдалитьИнтересный спойлер, как и все в твоих шпаргалках, Виктория!
ОтветитьУдалитьИрина, спасибо. попробуй применить когда загадки будешь постить. Здорово смотрится.
Удалитьочередное, Вам, спасибо
ОтветитьУдалитьСемён, благодарю за отзыв.
УдалитьИнтересный, необычный, не видела еще такого спойлера
ОтветитьУдалитьда, Наташа получилось оригинально. Прятать туда можно что угодно. Да и любопытного читателя немного задержит на странице. Тоже плюс.
ОтветитьУдалитьКлассный! для статьи понадобился и на глаза в поисковике сразу попался. Спасибо.
ОтветитьУдалитьСпасибо Наталья. Я уже про него забыла, он мне тоже нравится.
ОтветитьУдалить