оригинальный спойлер для 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


8 комментариев:

  1. Спасибо за полезный совет! Подумаю, как его можно применить к блогу )))

    ОтветитьУдалить
    Ответы
    1. Применить можно где угодно. Обычно это или какая -то интрижка или сюрприз. Некоторые ставят такие спойлеры, когда текст длинный

      Удалить
  2. Интересный спойлер, как и все в твоих шпаргалках, Виктория!

    ОтветитьУдалить
    Ответы
    1. Ирина, спасибо. попробуй применить когда загадки будешь постить. Здорово смотрится.

      Удалить
  3. очередное, Вам, спасибо

    ОтветитьУдалить
  4. Интересный, необычный, не видела еще такого спойлера

    ОтветитьУдалить
  5. да, Наташа получилось оригинально. Прятать туда можно что угодно. Да и любопытного читателя немного задержит на странице. Тоже плюс.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск