ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Удивительные текстовые эффекты на CSS

Удивительные текстовые эффекты на CSS

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

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

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

Цветовая анимация для текста на HTML + CSS



HTML

Код
<h1 class="samiledsan">ZORNET.RU</h1>

CSS

Код
.samiledsan {
  font-size: 125px;
  font-family: 'sonos-logoregular';
  text-align: center;
  background: -webkit-linear-gradient(left, #311e61, #bd1a20, #d8692f, #671836, #392c5a);
  background: linear-gradient(left, #311e61, #bd1a20, #d8692f, #671836, #392c5a);
  background-size: 3200px 200px;
  margin-top: 20vh;
  color: rgb(0 0 0 / 0%);
  -webkit-background-clip: text;
  -webkit-animation: animate-logo;
  -webkit-animation-delay: 0;
  -webkit-animation-duration: 7s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-fill-mode: forwards;
  transition: font-size 500ms ease-in-out;
}
}
@media only screen and (min-width: 40.063em) {
  .samiledsan {
  margin-top: 28vh;
  font-size: 76px;
  }
}
@media only screen and (min-width: 64.063em) {
  .samiledsan {
  margin-top: 25vh;
  font-size: 80px;
  }
}
@media only screen and (min-width: 90.063em) {
  .samiledsan {
  margin-top: 20vh;
  font-size: 80px;
  }
}
@media only screen and (min-width: 120.063em) {
  .samiledsan {
  margin-top: 15vh;
  font-size: 80px;
  }
}
@-webkit-keyframes animate-logo {
  0% {
  background-position: 0 3200px;
  }
  100% {
  background-position: 3200px 0;
  }
}

Цветовая гамма подобрана под темный фон, где основная анимации плавной смены цвета текста реализован на чистом CSS.

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

Текстовая анимация в оригинальном виде



HTML

Код
<div id="three-container"></div>

CSS

Код
body {
  margin: 0;
  overflow: hidden;
}

JS



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

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

Шрифт анимированной графики на HTML + CSS

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

HTML

Код
<canvas id="canvas" style="position:absolute; top:0; left:0;"></canvas>
  <div id="buffer" style="display:none;">

CSS

Код
* {margin:0;}
body {background:#000000;}

Оба следующих примера являются абстрактными, основаны на геометрических манипуляциях и выглядят высокотехнологично, что в некотором смысле они даже немного странные.

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

Второй вариант анимированной графики

Во втором случае каждый символ состоит из примитивных многоугольников, таких как треугольники, квадраты и прямоугольники, которые приводятся в движение.

HTML

Код
<canvas id="canvas"></canvas>

CSS

Код
* {margin:0;}

Такое ощущение, что чья-то цифровая рука сплетает все это воедино.

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

CSS Motion Typography: взрывающийся текст

В отличие от предыдущих примеров, где за красотой решений стоят передовые технологии, здесь движение на основе CSS управляет всем. Дадли Стори применяет анимацию ключевых кадров CSS, переходы, JavaScript, SVG и немного волшебства Adobe Illustrator.

HTML


CSS

Код
.svg-container {  
  display: inline-block; position: relative;  
  width: 100%; padding-bottom: 38%;  
  vertical-align: middle; overflow: hidden;  
  background: #000;  
}
body { background: #000; }
svg#heavy path {  
  fill: white; stroke: white;
  transition: 12s 1.6s cubic-bezier(0, 1, 0, 1);  
}
svg#heavy {  
  display: inline-block;  
  position: absolute; top: 0; left: 0;  
}

@keyframes shake {  
0% { transform: translate(3px,5px); }
5% { transform: translate(8px,-5px); }
10% { transform: translate(-3px,2px); }
20% { transform: translate(0px,-5px); }
25% { transform: translate(2px,-5px); }
30% { transform: translate(-3px,-3px); }
30% { transform: translate(0px,0px); }
40% { transform: translate(2px,2px); }
55% { transform: translate(6px,-5px); }
68% { transform: translate(4px,-3px); }
80% { transform: translate(-4px,2px); }
85% { transform: translate(2px,-5px); }
90% { transform: translate(-8px,5px); }
100% { transform: translate(7px,6px); }
}
figure.svg-container { margin: 0; }
figure.svg-container figcaption { position: absolute; bottom: 0; background: #fff; width: 100%; }
figure.svg-container:hover svg { animation: shake 1s linear; }

JS

Код
$( document ).ready(function() {
var heavy = document.getElementById("heavy"),
dim = heavy.getBBox(),
heavyCenterX = dim.width/2,
heavyCenterY = dim.height/2,
heavyPieces = document.querySelectorAll("svg#heavy path");
for(var i=0;i<heavyPieces.length;i++){
var force = 8,
min = -2.5,
max = 2.5,
randomRot = Math.floor(Math.random() * (max - min + 1)) + min,
piece = heavyPieces[i];
piece.id = "fragment"+i;
var bbox = piece.getBBox(),
pieceCenterX = bbox.x + (bbox.width/2),
pieceCenterY = bbox.y + (bbox.height/2),
distanceX = Math.abs(heavyCenterX - pieceCenterX),
distanceY = Math.abs(heavyCenterY - pieceCenterY);
if (pieceCenterX > heavyCenterX) {
var moveX = distanceX/force+"px";
} else {
moveX = "-"+distanceX/force+"px";
}
if (pieceCenterY > heavyCenterY) {
var moveY = distanceY/force+"px";
} else {
moveY = "-"+distanceY/force+"px";
}
document.styleSheets[0].insertRule("svg#heavy:hover #fragment"+i+" { -webkit-transform: translate("+moveX+","+moveY+") rotate("+randomRot+"deg); transform: translate("+moveX+","+moveY+") rotate("+randomRot+"deg) }",1);
}
var paths = document.getElementsByTagName('path')[0];
heavy.onclick = function() {
  paths.onhover.call(paths);
};
});

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

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

Многие иконки в 3D с использованием Three.js

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

Эффект Tryggvi Gylfason

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

HTML

Код
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:200" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:100" rel="stylesheet">

<body>
  <main>
  <div class="marker"></div>
  <h1>P</h1>
  <h1 class="r">R</h1>
  <h1 class="e1">E</h1>
  <h1 class="s1">S</h1>
  <h1 class="s2">S</h1>
  <h1 class="e2">E</h1>
  <h1>D</h1>
  </main>
</body>

CSS


Установка завершена.

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

Эффект с текстом Think

Здесь идет цикличная анимацию, в которой слова выделяются по очереди. Это отличный способ вести пользователей от одного слова к другому.

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

Безусловно есть очень много такой похожей анимации, и они разделяются на несколько категорий. Где если брать первую, то она будет срабатывать при открытии страницы, что основном такой трюк можно увидеть на главной страницы.

Также можно множество эффектов найти, которые зависят от клика курсора, но в большинстве все они отлично смотрятся, каждый трюк по своему оригинальному решению.
2020-09-02 Загрузок: 2 Просмотров: 318 Комментарий: (0)

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

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

Оставь свой отзыв

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