ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимированный фоновый заголовок сайта

Анимированный фоновый заголовок сайта

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

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

Так смотрится при установки:

как сделать анимированные заголовки с использованием текста

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

HTML

Код

<div class="container prosmotru">
  <div class="content">
  <div id="large-header" class="krasavoya-animatsiya">
  <canvas id="demo-canvas"></canvas>
  <h1 class="opisaniye-materiala"><span class="thin">Сайт</span> ZorNet.Ru</h1>
  </div>
  </div>
</div>

Код

CSS

Код

.krasavoya-animatsiya {
  position: relative;
  width: 100%;
  background: #292626;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  z-index: 1;
}

.prosmotru .krasavoya-animatsiya {
  background-image: url("http://zornet.ru/ABVUN/Aba/detunis/demo-bg.jpg");
}

.opisaniye-materiala {
  position: absolute;
  margin: 0;
  padding: 0;
  color: #f5f0eb;
  text-align: center;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}

.prosmotru .opisaniye-materiala {
  text-transform: uppercase;
  font-size: 4.2em;
  letter-spacing: 0.1em;
}

.opisaniye-materiala .thin {
  font-weight: 200;
}

@media only screen and (max-width: 768px) {
  .prosmotru .opisaniye-materiala {
  font-size: 3em;
  }
}

При работе с анимированными заголовками веб-сайтов необходимо учитывать несколько проблем с производительностью:

Постарайтесь ограничить количество вычислений и интенсивных операций процессора, которые вы помещаете в цикл анимации, это обеспечит плавную частоту кадров.

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

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

Как дополнение идет радужная сетка:

See the Pen
Rainbow Grid by Kocsten (@kocsten)
on CodePen.

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

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

СКАЧАТЬ

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

Kosten

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