• Для скачивания ресурсов Форума пользователь должен написать не менее 5 полезных сообщений и получить 5 симпатий.
    Если Вы не хотите выполнять условия, Вы должны купить переход в группу "Работяга" или любое наше дополнение и сможете скачивать ресурсы, перевод происходит по email, который указывается при оплате.
Оригинальная анимация текста

Разработка Оригинальная анимация текста

Нет прав для скачивания
Оригинальная анимация текста.
Пишем код HTML:
HTML:
<h1 id="heading" class="show-text" data-splitting>hello world!</h1>
<button id="trigger">Run Animation</button>
Пишем стиль:
SCSS:
@import url('https://fonts.googleapis.com/css?family=News+Cycle:700');

* { box-sizing: border-box; }

%tile-props {
  font-family: 'News Cycle', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: rgba(white, 0.5) 1px 1px 0;
  color: #333333;
  background-color: #EBCC99;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/225363/Melamine-wood-001.png);
  border: none;
  border-radius: 0.5vmin;
  box-shadow:
    inset rgba(black, 0.2) -4px -4px 24px,
    inset #CFB58B 0 -4px 0,
    rgba(black, 0.15) 0 6px 6px -3px;
}

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

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: enter;
  margin: auto;
}

button {
  @extend %tile-props;
  margin-top: 2rem;
  padding: 0.5rem 1.5rem 0.75rem;
  font-size: 0.8rem;
  line-height: 1;
 
  &:active {
    transform: translateY(2px);
  }
}

.splitting .word {
  display: flex;
  align-content: center;
  justify-content: center;
  font-size: 6vmin;
  line-height: 1.45;
}

.splitting .char {
  @extend %tile-props;
  display: flex;
  justify-content: center;
  margin: 1vmin;
  width: 10vmin;
  height: 10vmin;
 
  &:nth-child(odd) {
    transform: translateY(-50%) rotate(25deg);
    opacity: 0;
  }
  &:nth-child(even) {
    transform: translateY(50%) rotate(-25deg);
    opacity: 0;
  }
}

.show-text .char {
  animation-delay: calc(40ms * var(--char-index));
  animation-direction: alternate;
  animation-duration: 800ms;
  animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  animation-fill-mode: both;
 
  &:nth-child(odd)  {
    animation-name: slide-in-1;
  }
  &:nth-child(even) {
    animation-name: slide-in-2;
  }
}

@keyframes slide-in-1 {
  to {
    transform: translateY(0) rotate(-1deg);
    opacity: 1;
  }
}

@keyframes slide-in-2 {
  to {
    transform: translateY(0) rotate(2deg);
    opacity: 1;
  }
}
Пишем скрипт для динамики:
JavaScript:
const button  = document.getElementById('trigger');
const heading = document.getElementById('heading');

Splitting();

button.addEventListener('click', () => {
  heading.classList.remove('show-text');
  setTimeout(() => heading.classList.add('show-text'), 100);
})
Смотрим результат:
45w18.gif
Автор
baltun
Скачиваний
0
Просмотры
262
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

Ещё ресурсы от baltun

  • Font Awesome Manager
    Font Awesome Manager
    Позволяет использовать только шрифты которые необходимы XenForo.
  • [OzzModz] Badges
    [OzzModz] Badges
    покажите всем что пользователь онлайн или оффлайн выставив этот статус на полэкрана в постбит.
  • [Liam W.] Conversation Folders
    [Liam W.] Conversation Folders
    Папки для переписок.
  • s9e Media Sites
    s9e Media Sites
    Пак BB-кодов для вставки медиа контента.
  • Watermarker
    Бета Watermarker
    Водяные знаки для изображений.
Верх Низ