• Страница 1 из 1
  • 1
Форум » Веб-разработка » Коды сайта HTML » Создать анимация при вводе текста на CSS и JS (Эффект анимации при вводе описание или текста в CSS и JS)
Создать анимация при вводе текста на CSS и JS
Kosten
Дата: Суббота, 2021-05-15, 20:55 | Сообщение 1
Оффлайн
Администраторы
Сообщений:36965
Награды: 65


Красивый и простой по своим действиям анимация для текста, которое появляется при открытие сайта или перезагрузки. Ведь сама анимация с эффектом заключается в том, что идет печатаный текста, где вы сами задаете скорость. Сам анимационный эффект заключается на стильной анимации при задействование текста HTML, CSS и JS.

Пример появление знаков:



Установка:

HEAD

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

HTML

Код
<div class="opisaniye-smorodin"></div>

CSS

Код
html {
  height: 100%;
}
body {
    display: flex;
    height: 100%;
    background-color: #2b2828;
}
.opisaniye-smorodin {
  margin: auto;
  color: white;
  font: 700 normal 2.5em 'tahoma';
  text-shadow: 5px 2px #242525, 2px 4px #282829, 3px 5px #151515;
}

JS

Код
var words = ['Интересные решения для вебмастера в создание'],
    part,
    i = 0,
    offset = 0,
    len = words.length,
    forwards = true,
    skip_count = 0,
    skip_delay = 15,
    speed = 70;
var wordflick = function () {
  setInterval(function () {
    if (forwards) {
      if (offset >= words[i].length) {
        ++skip_count;
        if (skip_count == skip_delay) {
          forwards = false;
          skip_count = 0;
        }
      }
    }
    else {
      if (offset == 0) {
        forwards = true;
        i++;
        offset = 0;
        if (i >= len) {
          i = 0;
        }
      }
    }
    part = words[i].substr(0, offset);
    if (skip_count == 0) {
      if (forwards) {
        offset++;
      }
      else {
        offset--;
      }
    }
    $('.opisaniye-smorodin').text(part);
  },speed);
};

$(document).ready(function () {
  wordflick();
});

Описание прописываем в прикрепленном JS, которое идет большим описанием или заголовком.

Демонстрация
Прикрепления: 0943898.png(15.6 Kb) · effect-html-css.zip(3.4 Kb)
Страна: (RU)
Форум » Веб-разработка » Коды сайта HTML » Создать анимация при вводе текста на CSS и JS (Эффект анимации при вводе описание или текста в CSS и JS)
  • Страница 1 из 1
  • 1
Поиск: