ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Простой спойлер для сайта на CSS + JS

Простой спойлер для сайта на CSS + JS

Если вы ищите оригинальный по дизайн на спойлер для сайта, который создан на html, то попали именно туда, ведь здесь представлен размытый текст. Если кратко, что такое спойлер и какие функции он выполняет на сайте, то здесь можно сказать одно. Это если вам нужно что-то скрыть, но будет доступно для пользователей и гостей, так как весь материал находится в каркасе, который красиво оформлен.

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

Какие спойлеры бывают?

По своему дизайну они все разные, но стоит выделить 2 варианта:

1. Спойлер на html
2. Спойлер на javascript

При открытие сайта или страницы идет по умолчанию:

При наведение клика начинается отчет, как только уберете клик, то автоматически станет мутным.

Установочный процесс:

HTML

Код

<p class="avtomat-spoyler">
Здесь идет скрытый материал или описание
</p>

CSS

Код

.avtomat-spoyler {
  position: relative;
  color: transparent;
  text-shadow: 0 0 20px #55657a;
  cursor: help;
}

.avtomat-spoyler::before, .avtomat-spoyler::after {
  display: block;
  position: absolute;
  line-height: 1;
  font-family: 'Fjalla One', sans-serif;
  color: #872e27;
  text-align: center;
  text-shadow: none;
}

.avtomat-spoyler::before {
  top: 36px;
  left: 0;
  right: 0;
  font-size: 72px;
  content: 'СПОЙЛЕР';
}

.avtomat-spoyler::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';
}

.avtomat-spoyler:hover {
  color: #55657a;
  text-shadow: 0 0 0 transparent;
  transition: all 1s;
  transition-delay: 4s;
}

.avtomat-spoyler:hover::before {
  animation: countdown-before 5s forwards;
}

.avtomat-spoyler: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);
  }
}

Его прямое назначение, это использование для экономии места на странице, что по умолчанию идут кнопки, но здесь есть возможность поменять на совершенно другой стиль, что подойдет под любую тематику.

Демонстрация

Цвет тени под размытый текст,это единственная видимая вещь, поэтому убедитесь, что она достаточно контрастна, чтобы ее можно было увидеть. Стили CSS не подходит ни для одной из этих вещей, где использовать JavaScript.

Второй вариант:

Красивый эффект для спойлера на чистом CSS

Этот вариант работает от библиотеки:

Код

HTML

Код

<div class="kovesith-nougalem devas">
Здесь изначально скрываем описание или материал к нему.
</div>

CSS

Код

.kovesith-nougalem{
width: 50%;
margin: 0 auto;
cursor: pointer;
position: relative;
font-size: .9em;
}

.kovesith-nougalem.devas{
color: rgba(0,0,0,0);
text-shadow: 0 0 10px #000;
}

.kovesith-nougalem.devas:before{
content: 'Показать текст спойлера';
position: absolute;
text-shadow: none;
color: #fff;
width: 180px;
height: 28px;
line-height: 28px;
text-align: center;
left: 50%;
top: 50%;
background-color: #233870;
margin-left: -70px;
margin-top: -14px;
}

Код

$(document).ready(function () {

  $(document).on('click', '.kovesith-nougalem', function() {
  $(this).removeClass('devas');
  });
});

Определение оповещения о спойлере - это сообщение перед презентацией, фильмом, книгой, статьей, в нашем направление идет онлайн-публикация, дающее читателю понять, что будут раскрыты важные части сюжета.

Демонстрация

13 Сентября 2019 Загрузок: 1 Просмотров: 1512 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0