Эффекты css для сайта: 8 простых, но полезных CSS-эффектов для вашего сайта

Как использовать анимационные эффекты на веб-сайтах Конструктор сайтов

На веб-сайте анимация может решить несколько конкретных задач. Один из них — заполнить время, в течение которого пользователь должен ждать загрузки страницы. Смотреть на статичную страницу не так интересно, как на красивую анимацию. В результате те пользователи, которые могли покинуть сайт, остаются на нем — и в результате повышается конверсия. Анимация помогает вашим приложениям стать удобными для пользователя и налаживать связи между контентом и пользователями.

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

Д.), Применяемые к элементам веб-сайта при наведении на них курсора мыши.

Анимацию веб-дизайна также можно использовать для приветствия и создания нужного настроения — для этого подходят, например, фоновые видеоролики. Кроме того, анимация отлично подходит для повествования — ее можно использовать, чтобы быстро рассказать историю или показать, как работает продукт, без большого количества изображений или текста. Инструментов для создания веб-анимации много, но лучше всего брать готовые версии и пользоваться ими. Анимацию загрузки следует использовать, когда у нас есть длительное время загрузки для открытия веб-сайта, документа PDF, карты, видео или другого содержимого. Благодаря этим эффектам пользовательский опыт веб-сайта становится более разнообразным, особенно когда эти загрузочные анимации меняют дизайн пользовательского интерфейса и пользовательского интерфейса.

Еще одна важная цель анимации — сделать сайт более удобным для пользователя, дизайн мобильных приложений более креативным и оптимизировать взаимодействие с веб-страницей. Например, карусель с изображениями намного удобнее, чем длинный список картинок с подписями. В свою очередь, анимированные боковые меню могут позволить вам сразу получить больше информации, например, о продукте, без необходимости прокрутки. Определенные типы анимации веб-сайта на целевой странице позволяют привлечь внимание посетителей, заинтересовать их, убедить их остаться на странице и, как следствие, выполнить действие-конверсию. Правильно размещенная анимация мягко «продвигает» пользователя по всей странице, не давая ему заскучать. Анимация плавно появляющихся элементов при загрузке страницы. Такая динамика на странице позволяет лучше представить важную информацию. Самый популярный метод анимации — это «счетчик», потому что обычные числовые значения (например, количество довольных клиентов компании) вряд ли привлекут такое внимание.

Каркасные экраны — это пустые страницы, которые постепенно заполняются содержимым, таким как текст и изображения, по мере их появления (когда позволяет задержка в сети).

Фигуры, заполненные серым или нейтральным цветом, обычно называемые заполнителями (заполнителями), появляются сразу после того, как пользователь взаимодействует с призывом к действию или ссылкой. Затем заполнители (называемые «костями» скелета) заменяются фактическим содержимым сайта, и иллюзия завершается. Именно это и делают фреймворки — они создают иллюзию мгновенного перехода. Вы можете демонстрировать модели, панели и другие интерактивные скрытые компоненты, чтобы дать веб-сайтам новое ощущение взаимодействия. Первые эмоции пользователя имеют большой смысл, и создание красивой анимации приветствия может помочь вам заинтересовать ваших пользователей с самого начала. Креативная веб-анимация будет отлично смотреться на презентационных сайтах. В этом случае приветственные анимации — отличная возможность привлечь новых посетителей.

Другой часто используемый эффект называется Параллакс. Этот эффект заставляет нас видеть объекты в объеме, воспринимать глубину и понимать, что ближе, а что дальше. На веб-сайтах изображения плоские, и дизайнер может только создать иллюзию объема. Эффект параллакса может помочь. Чтобы создать эффект параллакса, вам нужно разделить изображение на несколько слоев и установить для них разные скорости и диапазоны движения в зависимости от прокрутки или движения курсора. В 2022 году использование такого эффекта, как движение жидкости, стало тенденцией. Он привлекает внимание и течет, как вода или любая другая жидкость. Его особенность в том, что он добавляет интерактивности макету сайта. Благодаря этому эффекту ваш сайт может двигаться медленно, плавно, пульсирующе или плавно. Вы можете заставить его реагировать на наведение курсора мыши или активировать его при прокрутке. Кто угодно может спросить, как сделать мой веб-дизайн круче, однозначного ответа нет, но эффекты анимации вам помогут.

Как создать эффект пишущей машинки на CSS для вашего веб-сайта?

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

Эффект пишущей машинки заключается в том, что текст раскрывается постепенно, как будто он печатается на ваших глазах.

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

Содержание

1. Эффект пишущей машинки создать легко
2. Создание веб-страницы для нашего эффекта набора текста
3. Стилизация контейнера для текста пишущей машинки
4. Создание анимации раскрытия текста
5. Добавление шагов для достижения эффекта пишущей машинки
6. Регулировка шагов для более длительного эффекта набора текста
7. Регулировка шагов для более короткого эффекта набора текста
8. Создание и стилизация анимации мигающего курсора
9. Настройка кода для эффекта мигающего набора текста
10. Объединение элементов анимации текста пишущей машинки
11. Эффект набора портфолио
12. Эффект ввода API
13. Эффект набора целевой страницы продукта
14. Заключение

Эффект пишущей машинки создать легко

Его легко создать, и все, что вам понадобится для понимания этого урока, — это базовые знания CSS и анимации CSS.

Вот как будет работать эффект пишущей машинки:

• Анимация пишущей машинки покажет наш текстовый элемент, изменив его ширину от 0 до 100%, шаг за шагом, с помощью steps()функции CSS.
• Анимация мигания будет анимировать курсор, который «печатает» текст.

Создание веб-страницы для нашего эффекта набора текста

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

контейнер для текста нашей пишущей машинки с классом typed-out:

<!doctype html>
<html>
  <head>
    <title>Typewriter effect</title>
    <style>
      body{
        background: navajowhite;
        background-size: cover;
        font-family: 'Trebuchet MS', sans-serif; 
      }
  </style>
  </head>
  <body>
    <div>
      <div>Web Developer</div>
    </div>
  </body>
</html>

Стилизация контейнера для текста пишущей машинки

Теперь, когда у нас есть макет веб-страницы, давайте стилизуем ее

с помощью «типизированного» класса:

. typed-out {
  overflow: hidden;
  border-right: .15em solid orange;
  font-size: 1.6rem;
  width: ;
}

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

• «overflow: hidden;«и a «width: 0;», чтобы убедиться, что текстовое содержимое не отображается до тех пор, пока не начнется эффект набора текста.
• «border-right:.15em solid orange;», чтобы создать курсор пишущей машинки.

Перед созданием эффекта набора текста, чтобы остановить курсор на последней букве typed-outэлемента после того, как он был полностью напечатан, как на пишущей машинке (или на самом деле текстовый процессор), мы создадим контейнер для typed-outэлемента и добавить display: inline-block;:

.container {
  display: inline-block;
}

Создание анимации раскрытия текста

Анимация пишущей машинки будет создавать эффект текста внутри печатаемого typed-outэлемента, буква за буквой. Воспользуемся @keyframesправилом анимации CSS:

@keyframes typing {
  from { width:  }
  to { width: 100% }
}

Как видите, вся эта анимация меняет ширину элемента от 0 до 100%.

Теперь мы включим эту анимацию в наш typed-outкласс и установим направление ее анимации, forwardsчтобы убедиться, что текстовый элемент не вернется к нему width: 0после завершения анимации:

.typed-out{
    overflow: hidden;
    border-right: .15em solid orange;
    white-space: nowrap;
    font-size: 1.6rem;
    width: ;
    animation: typing 1s forwards;
}

Наш текстовый элемент просто откроется одним плавным шагом слева направо:

body{
  background: navajowhite;
  background-size: cover;
  font-family: 'Trebuchet MS', sans-serif; 
}
.container{
  display: inline-block;
}
.typed-out{
  overflow: hidden;
  border-right: .  15em solid orange;
  white-space: nowrap;
  animation: 
    typing 1s forwards;
  font-size: 1.6rem;
  width: ;
}
@keyframes typing {
  from { width:  }
  to { width: 100% }
}

Добавление шагов для достижения эффекта пишущей машинки

Пока что наш текст раскрывается, но плавно, не раскрывая текст по буквам. Это начало, но, очевидно, это не то, как выглядит эффект пишущей машинки.

Чтобы эта анимация отображала наш текстовый элемент буква за буквой или поэтапно, как на пишущей машинке, нам нужно разделить typingанимацию, включенную typed-outклассом, на шаги, чтобы она выглядела так, как будто она печатается. Здесь на steps()помощь приходит функция CSS:

.typed-out{
  overflow: hidden;
  border-right: .15em solid orange;
  white-space: nowrap;
  font-size: 1.6rem;
  width: ;
  animation: 
    typing 1s steps(20, end) forwards;
}

Как видите, мы разделили typingанимацию на 20 шагов с помощью steps()функции CSS. Вот что мы видим сейчас:

Вот наш полный код:

<html>
  <head>
    <title>Typewriter effect</title>
  </head>
  <style>body{
      background: navajowhite;
      background-size: cover;
      font-family: 'Trebuchet MS', sans-serif; 
    }
    .container{
      display: inline-block;
    }
    .typed-out{
      overflow: hidden;
      border-right: .15em solid orange;
      white-space: nowrap;
      animation: 
      typing 1s steps(20, end) forwards;
      font-size: 1.6rem;
      width: ;
    }
    @keyframes typing {
      from { width:  }
      to { width: 100% }
    }</style>
<body>
<h2>I'm Matt, I'm a</h2>
<div>
  <div>Web Developer</div>
</div>
</body>
</html>

Регулировка шагов для более длительного эффекта набора текста

Чтобы настроить более длинные фрагменты текста, вам нужно увеличить шаги и продолжительность анимации набора текста:

body{
  background: navajowhite;
  background-size: cover;
  font-family: 'Trebuchet MS', sans-serif; 
}
. container{
  display: inline-block;
}
.typed-out{
  overflow: hidden;
  border-right: .15em solid orange;
  white-space: nowrap;
  animation: typing 2.5s steps(50, end) forwards;
  font-size: 1.6rem;
  width: ;
}
@keyframes typing {
  from { width:  }
  to { width: 100% }
}

Регулировка шагов для более короткого эффекта набора текста

А чтобы настроить более короткие фрагменты текста, вам нужно уменьшить шаги и продолжительность анимации набора текста:

body{
  background: navajowhite;
  background-size: cover;
  font-family: 'Trebuchet MS', sans-serif; 
}
.container{
  display: inline-block;
}
.typed-out{
  overflow: hidden;
  border-right: .15em solid orange;
  white-space: nowrap;
  animation: typing 0.4s steps(8, end) forwards;
  font-size: 1.6rem;
  width: ;
}
@keyframes typing {
  from { width:  }
  to { width: 100% }
}

Создание и стилизация анимации мигающего курсора

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

Чтобы добавить анимацию мигающего курсора к нашей анимации пишущей машинки, мы сначала создадим blinkанимацию:

@keyframes blink {
  from { border-color: transparent }
  to { border-color: orange; }
}

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

Мы включим эту анимацию в typed-outправила класса и установим его свойство направления анимации, infiniteчтобы курсор исчезал и появлялся снова и снова.8s:

.typed-out{
    overflow: hidden;
    border-right: .15em solid orange;
    white-space: nowrap;
    font-size: 1.6rem;
    width: ;
    animation: 
      typing 1s steps(20, end) forwards,
      blink .8s infinite;
}

body{
  background: navajowhite;
  background-size: cover;
  font-family: 'Trebuchet MS', sans-serif; 
}
. container{
  display: inline-block;
}
.typed-out{
  overflow: hidden;
  border-right: .15em solid orange;
  white-space: nowrap;
  animation: typing 1s steps(20, end) forwards, blinking .8s infinite;
  font-size: 1.6rem;
  width: ;
}
@keyframes typing {
  from { width:  }
  to { width: 100% }
}
@keyframes blinking {
  from { border-color: transparent }
  to { border-color: orange; }
}

Настройка кода для эффекта мигающего набора текста

Мы можем сделать курсор тоньше или толще, настроив его border-right:.15em solid orange;свойство, или вы можете изменить цвет курсора, присвоить ему радиус границы, настроить частоту его эффекта мигания и многое другое.

body{
      background: navajowhite;
      background-size: cover;
      font-family: 'Trebuchet MS', sans-serif; 
    }
    .container{
        display: inline-block;
    }
    . typed-out{
        overflow: hidden;
        border-right: .30em solid orange;
        border-radius: 4px;
        white-space: nowrap;
        animation: 
          typing 1s steps(20, end) forwards,
          blinking 1.2s infinite;
        font-size: 1.6rem;
        width: ;
    }
    @keyframes typing {
      from { width:  }
      to { width: 100% }
    }
    @keyframes blinking {
      from { border-color: transparent }
      to { border-color: green; }
    }

Вы можете поэкспериментировать с этими свойствами в демонстрации CodePen и посмотреть, что еще вы можете придумать!

Объединение элементов анимации текста пишущей машинки

Теперь, когда вы знаете, как создать эффект пишущей машинки в CSS, мне пора продемонстрировать некоторые практические и актуальные варианты использования этого эффекта печати.

Эффект набора портфолио

Вот пример личного портфолио. Эффекты пишущей машинки могут выделить ваше веб-резюме / личный веб-сайт и сделать его более привлекательным.

Вы можете поиграть с этой демонстрацией портфолио на CodePen.

Эффект ввода API

Вот пример целевой страницы API.

Вы можете поиграть с этой демонстрацией API на CodePen.

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

Эффект набора целевой страницы продукта

Вот пример целевой страницы SaaS / продукта.

Вы можете поиграть с этой демонстрацией страницы продукта SaaS на CodePen.

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

Заключение

В этой статье мы увидели, насколько просто использовать CSS для создания анимированного «пишущего» текста. Этот эффект набора текста определенно может добавить интерес и восхищение вашим веб-страницам.

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

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

Анимации CSS

❮ Назад Далее ❯

---

Анимация CSS

CSS позволяет анимировать элементы HTML без использования JavaScript или Flash!

CSS

В этой главе вы узнаете о следующих свойствах:

• @keyframes
• имя-анимации
• продолжительность анимации
• анимация-задержка
• количество итераций анимации
• направление анимации
• функция синхронизации анимации
• режим анимации-заполнения
• анимация

---

Поддержка анимации браузером

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Недвижимость
@ключевые кадры	43,0	10,0	16,0	9,0	30,0
имя-анимации	43,0	10,0	16,0	9,0	30,0
продолжительность анимации	43,0	10,0	16,0	9,0	30,0
задержка анимации	43,0	10,0	16,0	9,0	30,0
количество итераций анимации	43,0	10,0	16,0	9,0	30,0
анимация-направление	43,0	10,0	16,0	9,0	30,0
функция синхронизации анимации	43,0	10,0	16,0	9,0	30,0
режим анимации-заполнения	43,0	10,0	16,0	9,0	30,0
анимация	43,0	10,0	16,0	9,0	30,0

---

Что такое анимация CSS?

Анимация позволяет элементу постепенно переходить из одного стиля в другой.

Вы можете изменить столько свойств CSS, сколько захотите, столько раз, сколько захотите.

Чтобы использовать анимацию CSS, необходимо сначала указать несколько ключевых кадров для анимация.

Ключевые кадры содержат стили, которые элемент будет иметь в определенное время.

---

Правило @keyframes

При указании стилей CSS внутри @keyframes правило, анимация будет постепенно меняться от текущего стиля к новому стилю в определенное время.

Чтобы заставить анимацию работать, вы должны привязать анимацию к элементу.

В следующем примере анимация «пример» привязывается к элементу