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

Исчезновение CSS текста при прокрутке

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

Ведь все можно расположить на отдельной страницы, также в архиве представлена полноценная страница, а здесь идет чисто эффект, который вы можете внедрить в описание. Как поняли, что само решение состоит из CSS-текста с исчезновением при эффекте прокрутки. Может быть знаете об эффекте затухания, как обозначение перехода при котором объект медленно исчезает.

Тот же эффект мы можем применить к текстам на веб-странице, где для затухания будет работать прокрутка, как вверх или вниз, чтобы прочитать полностью описание или статью, где можете использовать это на своем сайте или в блоге. Здесь задействовали CSS Text Fade Out на эффекте прокрутки, где применен чистый CSS-эффект затухания текста, который работает только с прокруткой страницы.

Проверено на тестовой площадке:

В материале узнали о создании эффекта плавного перехода для текстов или абзацев. Это не сложно создать или понять, это очень короткая программа с меньшим количеством кодов. На самом деле, этот эффект исчезновения основан на свойствах background-clip и background-attachment в CSS.

Приступаем к установке:

HTML

Код

<div class="kische_ayushchiy_tekst">
Первое описание по тематике.
Второе описание по материалу.
Здесь можно разместить мануал и написать подробно по теме.
Также описание идет, если статья большая.
Вы самостоятельно можете создавать абзац, то количество, которое нужно для раскрытие темы.
</div>

CSS

Код

html {
  height: 100%;
  display: grid;
}

body {
  width: 75%;
  max-width: 19em;
  padding: 23vh 1em;
  margin: auto;
}
body :last-child {
  margin-bottom: 0;
}

html {
  background: #2d2b2b;
  background-image: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/vredsam.jpg);
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  color: #f3f0f0;
  font-family: 'Bahianita', cursive;
  font-weight: 500;
  font-size: 3.5vw;
}

.kische_ayushchiy_tekst {
  background-image: linear-gradient(transparent 8%, currentColor 29%, currentColor 68%, transparent 87%);
  -webkit-background-clip: text;
  background-clip: text;
  background-attachment: fixed;
  }
  .kische_ayushchiy_tekst > * {
  color: transparent;
  }

@media (min-width: 860px) {
  html {
  font-size: 27px;
  }
}

Эффект производится в то время когда пользователь начнет прокручивать страницу вниз, чтобы прочитать статью, текст переходит на верхнюю сторону с эффектом постепенного исчезновения

Если вы сейчас думаете о том, каков на самом деле эффект затухания текста, посмотрите предварительный просмотр, приведенный ниже на demo странице.

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

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

01 Июля 2019 Загрузок: 1 Просмотров: 2151 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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