Эффект летающих букв

Эффект летающих букв

02016-01-011239Денис Абдуллин

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

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

Код HTML

Code

<p>темный рыцарь</p>

Код CSS

Code

<style type="text/css">
@import url("http://fonts.googleapis.com/css?family=Syncopate");

html, body {
  -webkit-font-smoothing: antialiased;
  font-family: 'Syncopate', Helvetica, Arial;
  text-transform: uppercase;
  margin: 0;
  height: 100%;
  width: 100%;
  display: table;
}
html {
  /* subtlepatterns.com */
  background: #2B2B2B url("http://neilcarpenter.com/demos/asfalt.png") repeat;
}
body {
  overflow: hidden;
  background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0.44) 100%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.44))); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.44) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.44) 100%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.44) 100%); /* IE10+ */
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0.44) 100%); /* W3C */
}
p {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  font-size: 2em;
  line-height: 2em;
}
i {
  display: inline-block;
  font-style: normal;
  padding: 0 0.25em;
  -webkit-transform: scale(0) translate3d(0, -2000px, 0);
  -moz-transform: scale(0) translate3d(0, -2000px, 0);
  -ms-transform: scale(0) translate3d(0, -2000px, 0);
  -o-transform: scale(0) translate3d(0, -2000px, 0);
  transform: scale(0) translate3d(0, -2000px, 0);
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}
i.fly-in-out {
  -webkit-animation: fly-in-out 3s infinite ease-in-out;
  -moz-animation: fly-in-out 3s infinite ease-in-out;
  -o-animation: fly-in-out 3s infinite ease-in-out;
  animation: fly-in-out 3s infinite ease-in-out;
}

@-webkit-keyframes fly-in-out {
  0% {
  -webkit-transform: scale(0) translate3d(0, -1000px, 0);
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  }
  15%, 85% {
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  -webkit-transform: scale(1) translate3d(0, 0, 0);
  background: transparent;
  box-shadow: none;
  }
  100% {
  color: transparent;
  -webkit-transform: scale(0) translate3d(0, 1000px, 0);
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  }
}
@-moz-keyframes fly-in-out {
  0% {
  -moz-transform: scale(0) translate3d(0, -2000px, 0);
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  }
  15%, 85% {
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  -moz-transform: scale(1) translate3d(0, 0, 0);
  background: transparent;
  box-shadow: none;
  }
  100% {
  color: transparent;
  -moz-transform: scale(0) translate3d(0, 2000px, 0);
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  }
}
@-o-keyframes fly-in-out {
  0% {
  -o-transform: scale(0) translate3d(0, -2000px, 0);
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  }
  15%, 85% {
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  -o-transform: scale(1) translate3d(0, 0, 0);
  background: transparent;
  box-shadow: none;
  }
  100% {
  color: transparent;
  -o-transform: scale(0) translate3d(0, 2000px, 0);
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  }
}
@keyframes fly-in-out {
  0% {
  transform: scale(0) translate3d(0, -2000px, 0);
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  }
  15%, 85% {
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  transform: scale(1) translate3d(0, 0, 0);
  background: transparent;
  box-shadow: none;
  }
  100% {
  color: transparent;
  transform: scale(0) translate3d(0, 2000px, 0);
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  }
}
</style>

Код JavaScript

Code

<script type="text/javascript">
var paragraph = document.getElementsByTagName('p')[0];

function textEffect(animationName) {
  var text = paragraph.innerHTML,
  chars = text.length,
  newText = '',
  animation = animationName,
  char,
  i;

  for (i = 0; i < chars; i += 1) {
  newText += '<i>' + text.charAt(i) + '</i>';
  }

  paragraph.innerHTML = newText;

  var wrappedChars = document.getElementsByTagName('i'),
  wrappedCharsLen = wrappedChars.length,
  j = 0;

  function addEffect () {
  setTimeout(function () {
  wrappedChars[j].className = animation;
  j += 1;
  if (j < wrappedCharsLen) {
  addEffect();
  }
  }, 100)
  }

  addEffect();
};

textEffect('fly-in-out');
</script>

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!

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

Создать сайт
на uCoz бесплатно Обзор и отзывы

Конструктор сайтов

Рейтинг лучших сервисов для самостоятельного создания сайта.

Лучшие конструкторы

Создать свой сайт бесплатно?

Легко! Если пользоваться нашими советами.

Создать сайт