оригинальный спойлер для BLOGGER

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

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

Сегодня в копилку вот такой необычный и оригинальный спойлер. 

Чтобы посмотреть работу такого скрытого текста скопируйте код целиком и установите его в этом редакторе.

<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>

Чтобы реализовать такое, в редакторе сообщения пишем нужный текст. Допустим -

"Отгадайте загадку. Крестьянин купил на базаре козу, кочан капусты и волка. По дороге домой надо было переправиться через реку. У крестьянина была маленькая лодка, в которую кроме него могла поместится только одна из его покупок. Как ему переправить все товары через реку, если нельзя оставлять козу наедине с капустой и волка наедине с козой?" 

А потом переходите в режим HTML и устанавливаем сам код. В нём меняйте текст, который будет скрыт от глаз посетителя на нужный. Я отметила всё жёлтым шрифтом. Сейчас опять можно перейти в обычный режим и продолжить, если есть что, ваше сообщение. Сам эффект появится после публикации поста.

Если нужно на одной странице установить ещё такой же, просто поменяйте везде в кодах

spoiler на spoiler1 и так далее.

Вместо скрытого текста можно вставить что угодно - картинку, код, галерею и прочее.

<div class="spoiler">
Вставляем что хотим
</div>

Вот такая фишка сегодня получилась. Всем удачи и до встречи.

Получайте новые сообщения с блога прямо на почту

Введите Ваш email