Как называется или как сделать такой эффект?

Question

[prrrrrrr]

Подскажите, как называется или как сделать такой эффект в тексте как здесь, а именно в шапке: «Представляем IRON BANK» или под ней — «IRON BANK — это уникальная престижная металлическая карта»?

Answer 1

[Ivan Bogachev]

Они используют CSS-градиенты и свойство backgrond-clip:

А перемещают эти градиенты нехитрой анимацией:

Также это можно делать на SVG-масках. Будет более кроссбраузерно.
Ну и на канвасе можно, по тому же принципу, что и с масками.

Comments

[prrrrrrr]

копипастом не работает. можно пример на codepen?

[Ivan Bogachev]

prrrrrrr,

копипастом не работает

Научитесь пользоваться инструментами разработчика - это будет экономить вам кучу времени.

[alex-1917]

А перемещают эти градиенты нехитрой анимацией:

а потом посетитель сайта в ярости разбивает зависший планшет о свою голову...

https://habr.com/ru/post/243909/
https://habr.com/ru/post/450484/

[Ivan Bogachev]

alex-1917, приятно видеть ссылку на свою же статью в комментариях :)

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

Answer 2

[Ирина Чернова]

<h1 id="title">IRON BANK — это уникальная престижная металлическая карта</h1>

#title{
    font-size: 2em;
    background-image: linear-gradient(to right,#f7797d,#fbd786 25%,#c6ffdd 50%,#fbd786 75%,#f7797d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    padding: 0.3em 0.6em;
    animation: background 3s infinite alternate;
}

@-webkit-keyframes name-background {
    0% {
    background-position: 0 3200px;
    }
    10% {
    background-position: 3200px 0;
    }
   }