ZorNet.Ru — сайт для вебмастера » HTML и CSS » Слайдер с автоматическим текстом на CSS3

Слайдер с автоматическим текстом на CSS3

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

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

Текстовой слайдер на чистом CSS

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

Установка:

HTML

Код

Советы по удаленному управлению проектами для работы из дома.

Что такое удаленное управление проектами?

Улучшите стратегию SEO с помощью этих четырех инструментов

CSS

Код

.tekstovoye_opisaniye_1,
.tekstovoye_opisaniye_2,
.tekstovoye_opisaniye_3 {
  position: absolute;
  display: block;
  top: 2em;

  width: 60%;

  font-size: 2em;

  animation-duration: 20s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.tekstovoye_opisaniye_1{
  animation-name: anim-1;
}

.tekstovoye_opisaniye_2{
  animation-name: anim-2;
}

.tekstovoye_opisaniye_3{
  animation-name: anim-3;
}

@keyframes anim-1 {
  0%, 8.3% { left: -100%; opacity: 0; }
  8.3%,25% { left: 25%; opacity: 1; }
  33.33%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-2 {
  0%, 33.33% { left: -100%; opacity: 0; }
  41.63%, 58.29% { left: 25%; opacity: 1; }
  66.66%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-3 {
  0%, 66.66% { left: -100%; opacity: 0; }
  74.96%, 91.62% { left: 25%; opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

Как заметили, что на данном корпусе нет стрелок для переключения слайдов по обе стороны, а также нижних переключателей, что совершенно здесь они будут лишними. Здесь написанная текстура будет меняться автоматически в скользящем движении.

В стилях присутствует @Keyframes, что в большинстве контролирует большую часть анимации. Ведь в начинки функций не задействуем Javascript, поэтому вам не нужно беспокоиться о кодах, где самостоятельно выстроить скоростной режим или поменять на свою палитру цветов.

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

26 Сентября 2021 Загрузок: 6 Просмотров: 2298 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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