LIFEHACKOV.RU

Tilda Publishing

Крутая анимация текста в Tilda. 8 вариантов классной анимации

agadzhango Комментариев нет
1 604

Введение

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

В этой статье мы научим вас создавать 5 невероятных вариантов анимации текста в Tilda. Будем использовать как стандартные блоки, такие как zero block, так и сторонние скрипты для Тильды, написанные на html, css и js. Давайте приступим!

Shuffle letters анимация текста в Tilda

анимация текста в Tilda

Рассмотрим эффект «перестановки» текста в тильде.

Shuffle letters в Tilda — это процесс перестановки букв в слове или фразе в случайном порядке, сохраняя первую и последнюю буквы на своих местах. Это может быть использовано в различных целях, таких как создание загадочного эффекта или привлечение внимания к определенным словам или фразам.

Мы будем использовать этот эффект в качестве анимации для заголовков блоков. Для этого:

  1. Создайте несколько блоков.
  2. После каждого блока добавьте якорную ссылку. (Т173 Якорная ссылка)
  3. Нажмите на копку «Контент» в якорных блоках.
  4. В поле «Имя якорной ссылки» введите «anchor1» для первой якорной ссылки, «anchor2» для второй и так далее.
  5. После всех блоков на странице, добавьте «Т123 HTML-код».
  6. Нажмите на кнопку «Контент» и скопируйте туда следующий код:
<div id="shuffleblock" class="shuffleb">Lorem ipsum dolor</div>
<style>
.shuffleb{
   font-size: 62px;
    font-weight: 600;
    font-family: 'Roboto',Arial,sans-serif;
    color: #fff;
    margin-left: 150px;
    background-color: rgb(252, 180, 47);
    padding: 0 20px;
    border-radius: 30px;
    position: fixed;
    bottom: 15px;
    z-index: 999;
}

@media screen and (max-width: 800px){
  .shuffleb{
   font-size: 40px;
   bottom: 30px;
}
}
@media screen and (max-width: 500px){
  .shuffleb{
   font-size: 20px;
   bottom: 42px;
   margin-left: 100px;
   padding: 0 10px;
}
}
</style>
<script>
  function randomChar(type){
    var pool = "";
    if (type == "lowerLetter"){
        pool = "abcdefghijklmnopqrstuvwxyz0123456789";
    }
    else if (type == "upperLetter"){
        pool = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
    }
    else if (type == "symbol"){
        pool = ",.?/\\(^)![]{}*&^%$#'\"";
    }
    var arr = pool.split('');
    return arr[Math.floor(Math.random()*arr.length)];
}   
$.fn.shuffleLetters = function(prop){

    var options = $.extend({
        "step"  : 8,    // How many times should the letters be changed
        "fps"   : 25,   // Frames Per Second
        "text"  : ""    // Use this text instead of the contents
    },prop)
    return this.each(function(){
        var el = $(this),
            str = "";

        if(options.text) {
            str = options.text.split('');    }
        else {
            str = el.text().split('');    }
        var types = [],
            letters = [];
        for(var i=0;i<str.length;i++){
            var ch = str[i];
            if(ch == " "){
                types[i] = "space";
                continue;  }
            else if(/[a-z]/.test(ch)){
                types[i] = "lowerLetter";     }
            else if(/[A-Z]/.test(ch)){
                types[i] = "upperLetter";   }
            else {
                types[i] = "symbol";     }
            letters.push(i);     }
        el.html("");            
        (function shuffle(start){
            var i,
                len = letters.length,
                strCopy = str.slice(0); 
            if(start>len){  return;            }
            for(i=Math.max(start,0); i < len; i++){
                if( i < start+options.step){
                    strCopy[letters[i]] = randomChar(types[letters[i]]);
                }   else {   strCopy[letters[i]] = "";  }
            }
            el.text(strCopy.join(""));
            setTimeout(function(){ shuffle(start+1);},1000/options.fps);
        })(-options.step);
    });
};
</script>
<script>
$(document).ready(function(){   
var shuffleblock = $("#shuffleblock");
var $element1 = $('a[name="anchor1"]');   
var $element2 = $('a[name="anchor2"]');
var $element3 = $('a[name="anchor3"]');
var line1=true;
var line2=false;
var line3=false;
var line4=false;
function checkscR(){
  var scroll = $(window).scrollTop() + $(window).height();
  if (scroll < $element1.offset().top) {
     if (!line1) {shuffleblock.shuffleLetters({"text": "Главная"});line1=true;};
  }else{line1=false};
  if ( scroll > $element1.offset().top  &&  scroll < $element2.offset().top) {
     if (!line2) {shuffleblock.shuffleLetters({"text": "О нас"});line2=true;};
  }else{line2=false};
  if ( scroll > $element2.offset().top  &&  scroll < $element3.offset().top) {
     if (!line3) {shuffleblock.shuffleLetters({"text": "Галерея"});line3=true;};
  }else{line3=false}; 
  if ( scroll > $element3.offset().top) {
     if (!line4) {shuffleblock.shuffleLetters({"text": "Отзывы"});line4=true;};
  }else{line4=false};    
};
checkscR();
$(window).scroll(function() {checkscR()});
});
</script>

По умолчанию в коде предусмотрены только три якорные ссылки. Но вы можете увеличить их количество.

Градиентная анимация текста в Tilda

анимация текста в Tilda

Следующую анимацию мы будем создавать с помощью zero block. Zero block – это один из ключевых элементов в Tilda, который позволяет создавать свои собственные блоки с нуля. Зеро блок предоставляет широкие возможности для кастомизации дизайна вашего сайта и добавления функциональности.

  1. Создайте zero block.
  2. Уберите лишнее наполнение и добавьте текстовый блок для заголовка.
  3. Нажмите левой кнопкой мыши на ваш заголовок.
  4. В поле «TAG» выберите нужный вам вариант, например H2.

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

  1. Поле «TAG» оставьте без изменений.
  2. Нажмите на заголовок правой кнопкой мыши и выберите «Add css class name».
  3. Придумайте и пропишите класс для вашего заголовка.
  4. Сохраните изменения и выйдите из зеро блока.
  5. После всех блоков на странице, добавьте «Т123 HTML-код».
  6. Нажмите на кнопку «Контент» и скопируйте туда следующий код:
<style>
h2 {
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(to right , #BBB086 , #000000, #BBB086 60%); //В этой строке можно изменить цвета градиента
    background-position: 0 0;
    transition: all 0.8s ease-in-out;
}
 h2:hover {
    background-position: 500px !important;
}
</style>

В коде, вместо «h2» пропишите тег, который вы выбрали или класс, если вы его добавили. (Например: .gradienttitle)

После публикации вы получите градиентный анимированный заголовок, которые реагирует на курсор мыши.

Hover анимация текста в Tilda

анимация текста в Tilda

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

  1. Создайте zero block.
  2. Добавьте текстовый блок с заголовком.
  3. Продублируйте текстовый блок несколько раз и расположите их сверху вниз друг за другом. Текст можете оставить тот же, либо использовать разные заголовки.
  4. У каждого заголовка в поле «URL» укажите ссылки «#title1», «#title2» и так далее.
  5. Сохраните изменения и выйдите из зеро блока.
  6. После всех блоков на странице, добавьте «Т123 HTML-код».
  7. Нажмите на кнопку «Контент» и скопируйте туда следующий код:
<style>
/*Плавность эффекта для заголовков*/
.tn-atom{
    transition:all 0.5s cubic-bezier(0, 0, 0.8, 1.0);
}
/*Стиль с прозрачностью*/
.hovstyle{
    opacity:0.3;
}
.bgchange{
    transition:all 0.5s cubic-bezier(0, 0, 0.8, 1.0);  
}
    
</style>

<script>
 //Задаём переменной ID нашего ZeroBlock    
 var blockZeroID = '#rec276036440';
 var blockZeroBG = blockZeroID + " " + ".t396__carrier" ;
 //Добавляем класс к нашим заголовкас-ссылкам
 $(blockZeroID + " "+ "a").addClass("hovtitle");
 //Класс для фона
 $(blockZeroBG).addClass("bgchange");
 
//При наведении на любой заголовок в нашем ZeroBlock 
 $('.hovtitle').hover(
function(){
     //Добавляем всем заголовком класс с прозрачностью
     $(".hovtitle").addClass("hovstyle");
     //Делаем непрозрачным заголовок на который навели
     $(this).removeClass("hovstyle");
//Ссылки на изображения     
if ($(this).attr('href') == "#title1"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9BMy)') };
if ($(this).attr('href') == "#title2"){$(blockZeroBG).css('backgroundImage', 'url(https://storge.pic2.me/cm/2560x1440/510/029.jpg)') };
if ($(this).attr('href') == "#title3"){$(blockZeroBG).css('backgroundImage', 'url(https://wallpapershome.ru/images/wallpapers/poligon-2560x1440-4k-hd-3d-fon-241.jpg)') };
if ($(this).attr('href') == "#title4"){$(blockZeroBG).css('backgroundImage', 'url(https://cs4.pikabu.ru/post_img/big/2016/08/16/11/147137174019542083.jpg)') };
if ($(this).attr('href') == "#title5"){$(blockZeroBG).css('backgroundImage', 'url(https://bipbap.ru/wp-content/uploads/2017/06/1366_768_20141203081214493035-optimized.jpg)') };
if ($(this).attr('href') == "#title6"){$(blockZeroBG).css('backgroundImage', 'url(https://c.wallhere.com/photos/36/2f/New_Retro_Wave_synthwave_1980s_neon_DeLorean_car_retro_games-90975.jpg!d)') };
if ($(this).attr('href') == "#title7"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9Bu8)') };
if ($(this).attr('href') == "#title8"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9BuQ)') };
if ($(this).attr('href') == "#title9"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9Buv)') };
if ($(this).attr('href') == "#title10"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9BvH)') };
},
function(){
    //Когда на заголовки не наводим, удаляем класс с прозрачностью
     $(".hovtitle").removeClass("hovstyle");
    //Когда не наводим на заголовки делаем такой фон 
     $(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9BFu)');
});
</script>
  1. Сохраните изменения и закройте блок.
  2. Скопируйте ID зеро блока с заголовками и вставьте в код. (18 строка, вместо «#rec276036440’»)
  3. Сохраните изменения и опубликуйте страницу.

Эффект с плавной сменой фонового изображения при наведении на заголовок готов!

Энергия цвета – анимация текста в Tilda

Анимация текста энергия цвета

Энергия цвета потрясающая анимация, которая не оставит посетителей вашего сайта равнодушными. Для реализации этого способа потребуется несколько простых действий:

  1. Создайте zero block и зайдите в редактор блока.
  2. Удалите стандартный контент зеро блока.
  3. Удалите фоновый цвет блока.
  4. Нажмите на кнопку «+» и выберите «Add HTML».
  5. Нажмите на html элемент правой кнопкой мыши.
  6. В настройках слева в пунктах «W» и «H» вместо пикселей выберите проценты.
  7. Нажмите на «+container», в поле «CONTAINER» выберите «Window Container».
  8. В полях «AXIS X» и «AXIS Y» выберите «center».
  9. Откройте html элемент и скопируйте в него следующий код:
<style>
      
        body {
            background: #082330; //Цвет фона всего блока
            background-size: .12em 100%;
            font: 16em/1 Arial;
        }

        .text--line {
            font-size: .5em;
        }

        svg {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .text-copy {
            fill: none;
            stroke: white;
            stroke-dasharray: 7%,28%;
            stroke-width: 3px;
            animation: stroke-offset 9s infinite linear;
        }

        .text-copy:nth-child(1) {
            stroke: #360745; //Цвет части анимации
            stroke-dashoffset: 7%;
        }

        .text-copy:nth-child(2) {
            stroke: #D61C59; //Цвет части анимации
            stroke-dashoffset: 14%;
        }

        .text-copy:nth-child(3) {
            stroke: #E7D84B; //Цвет части анимации
            stroke-dashoffset: 21%;
        }

        .text-copy:nth-child(4) {
            stroke: #EFEAC5; //Цвет части анимации
            stroke-dashoffset: 28%;
        }

        .text-copy:nth-child(5) {
            stroke: #1B8798; //Цвет части анимации
            stroke-dashoffset: 35%;
        }

        @keyframes stroke-offset {
            50% {
                stroke-dashoffset: 35%;
                stroke-dasharray: 0, 87.5%;
            }
        }
    </style>
<svg viewBox="0 0 800 600">
    <symbol id="s-text">
//Верхний текст
        <text text-anchor="middle" 
              x="50%"
              y="35%"
              class="text--line"
        >
            Добрый 
        </text>
//Нижний текст
        <text text-anchor="middle" 
              x="50%"
              y="68%"
              class="text--line2"
        >
           День
        </text>

    </symbol>

    <g class="g-ants">
        <use xlink:href="#s-text"
             class="text-copy"></use>
        <use xlink:href="#s-text"
             class="text-copy"></use>
        <use xlink:href="#s-text"
             class="text-copy"></use>
        <use xlink:href="#s-text"
             class="text-copy"></use>
        <use xlink:href="#s-text"
             class="text-copy"></use>
    </g>


</svg>

После всех действий сохраните изменения и опубликуйте страницу. Анимация готова.

Ховер эффект – анимация текста в Tilda

Анимация текста при наведении

Представляем вашему вниманию интересную анимацию при наведении курсора мыши на текст в Tilda Publishing. Сделать такую анимацию не составит большого труда. Следуйте нашим инструкциям:

  1. В панели управления в Tilda нажмите на кнопку «+» или «Все блоки».
  2. В пункте «Другое» выберите «Т123 HTML-код».
  3. Зайдите в настройки блока, в поле «Выравнивание» выберите «По центру».
  4. Ниже задайте желаемые отступы сверху и снизу.
  5. Сохраните изменения.
  6. Нажмите на кнопку «Контент» и скопируйте туда следующий код:
<style>
    
    #text {
        font-family: "Fredoka One", sans-serif;
        font-size: 6em;
        line-height: 1em;
        text-align: center;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }

    #text:hover {
        cursor: default;
    }

    #text .wrapper {
        display: inline-block;
        top: -900px;
        position: relative;
        height: 150px;
        /* default */
        width: 90px;
        /* default */
        transition: ease 0.3s, all;
    }

    #text .wrapper span {
        position: absolute;
        top: 0;
        right: 0;
        transition: ease 0.3s,all;
    }

    #text .wrapper span.letter-2 { //Цвет текста
        color: rgba(0, 0, 255, 0.5);
    }

    #text .wrapper span.letter-1 { //Цвет текста
        color: rgba(255, 0, 0, 0.5);
        z-index: 1;
    }

    #text .wrapper span.letter-1:hover {
        top: -3px;
        right: -3px;
    }

    #text .wrapper span.letter-1:hover ~ .letter-2 {
        top: 3px;
        right: 3px;
    }

    #text .wrapper span.space {
        padding: 0;
        min-width: 30px;
        display: inline-block;
    }
</style>
<div id="text">
    <!-- content generated with JS -->
</div>
<script>
    //В кавычках прописываем свой текст
    const text = 'hover me'; 

    // this function turns a string into an array
    const createLetterArray = (string) => {
        return string.split('');
    }

    // this function creates letter layers wrapped in span tags
    const createLetterLayers = (array) => {
        return array.map((letter) => {
            let layer = '';
            //specify # of layers per letter
            for (let i = 1; i <= 2; i++) {
                // if letter is a space
                if(letter == ' '){
                    layer += '<span class="space"></span>';
                }else{
                    layer += '<span class="letter-'+i+'">'+letter+'</span>';
                }
            }
            return layer;
        });
    }

    // this function wraps each letter in a parent container
    const createLetterContainers = (array) => {
        return array.map((item) => {
            let container = '';
            container += '<div class="wrapper">'+item+'</div>';
            return container;
        });
    }

    // use a promise to output text layers into DOM first
    const outputLayers = new Promise(function(resolve, reject) {
        document.getElementById('text').innerHTML = createLetterContainers(createLetterLayers(createLetterArray(text))).join('');
        resolve();
    });

    // then adjust width and height of each letter
    const spans = Array.prototype.slice.call(document.getElementsByTagName('span'));
    outputLayers.then(() => {
        return spans.map((span) => {
            setTimeout(() => {
                span.parentElement.style.width = span.offsetWidth+'px';
                span.parentElement.style.height = span.offsetHeight+'px';
            }, 250);
        });
    }).then(() => {
        // then slide letters into view one at a time
        let time = 250;
        return spans.map((span) => {
            time += 75;
            setTimeout(() => {
                span.parentElement.style.top = '0px';
            }, time);
        });
    });
</script>

Неоновая вывеска – анимация текста в Tilda

неоновая вывеска

Использование имитации неонового света в веб дизайне становится всё более и более популярным. Мы тоже не можем обойти этот тренд стороной и предлагаем вам использовать неон в качестве анимации для текста:

  1. В панели управления в Tilda нажмите на кнопку «+» или «Все блоки».
  2. В пункте «Другое» выберите «Т123 HTML-код».
  3. Зайдите в настройки блока, в поле «Выравнивание» выберите «По центру».
  4. Ниже задайте желаемые отступы сверху и снизу.
  5. Сохраните изменения.
  6. Нажмите на кнопку «Контент» и скопируйте туда следующий код:
<style>
    
    .sign {
        min-height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .sign__word {
        font-size: 5.6rem;
        text-align: center;
        line-height: 1;
        color: #c6e2ff; //Основной цвет текста
        -webkit-animation: neon .08s ease-in-out infinite alternate;
        animation: neon .08s ease-in-out infinite alternate;
    }

    /*-- Animation Keyframes --*/
    @-webkit-keyframes neon {
        from {
            text-shadow: 0 0 6px rgba(202, 228, 225, 0.92), 0 0 30px rgba(202, 228, 225, 0.34), 0 0 12px rgba(30, 132, 242, 0.52), 0 0 21px rgba(30, 132, 242, 0.92), 0 0 34px rgba(30, 132, 242, 0.78), 0 0 54px rgba(30, 132, 242, 0.92);
        }
        to {
            text-shadow: 0 0 6px rgba(202, 228, 225, 0.98), 0 0 30px rgba(202, 228, 225, 0.42), 0 0 12px rgba(30, 132, 242, 0.58), 0 0 22px rgba(30, 132, 242, 0.84), 0 0 38px rgba(30, 132, 242, 0.88), 0 0 60px #1e84f2;
        }
    }
    @keyframes neon {
        from {
            text-shadow: 0 0 6px rgba(202, 228, 225, 0.92), 0 0 30px rgba(202, 228, 225, 0.34), 0 0 12px rgba(30, 132, 242, 0.52), 0 0 21px rgba(30, 132, 242, 0.92), 0 0 34px rgba(30, 132, 242, 0.78), 0 0 54px rgba(30, 132, 242, 0.92);
        }
        to {
            text-shadow: 0 0 6px rgba(202, 228, 225, 0.98), 0 0 30px rgba(202, 228, 225, 0.42), 0 0 12px rgba(30, 132, 242, 0.58), 0 0 22px rgba(30, 132, 242, 0.84), 0 0 38px rgba(30, 132, 242, 0.88), 0 0 60px #1e84f2;
        }
    }

</style>

//Меняем текст на свой
<div class="sign">
    <span class="sign__word">no</span>
    <span class="sign__word">festival</span>
    <span class="sign__word">today</span>
</div>

Фоновый дым – анимация текста в Tilda

фоновый дым

Попробуйте еще одну необычную анимацию, которая имитирует дым в видео фоновой заливки для текста на вашем сайте.

  1. В панели управления в Tilda нажмите на кнопку «+» или «Все блоки».
  2. В пункте «Другое» выберите «Т123 HTML-код».
  3. Зайдите в настройки блока, в поле «Выравнивание» выберите «По центру».
  4. Ниже задайте желаемые отступы сверху и снизу.
  5. Сохраните изменения.
  6. Нажмите на кнопку «Контент» и скопируйте туда следующий код:
<style>


    body {
        background-color: #111;
    }

    .title {
        font-family: "Montserrat";
        text-align: center;
        color: #FFF;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        height: 100vh;
        letter-spacing: 1px;
    }

    h1 {
        background-image: url(https://media.giphy.com/media/26BROrSHlmyzzHf3i/giphy.gif);
        background-size: cover;
        color: transparent;
        -moz-background-clip: text;
        -webkit-background-clip: text;
        text-transform: uppercase;
        font-size: 120px;
        line-height: .75;
        margin: 10px 0;
    }
    /* styling my button */

    .white-mode {
        text-decoration: none;
        padding: 7px 10px;
        background-color: #122;
        border-radius: 3px;
        color: #FFF;
        -webkit-transition: .35s ease-in-out;
        transition: .35s ease-in-out;
        position: absolute;
        left: 15px;
        bottom: 15px;
        font-family: "Montserrat";
    }

    .white-mode:hover {
        background-color: #FFF;
        color: #122;
    }

</style>
<div class="title">
    <h1>Tilda<br/>Publishing</h1>
</div>

Объемная фигура

объемная фигура

И, напоследок, поделимся с вами не совсем анимацией, но тоже очень интересным вариантом – 3D модель текста. Чтобы реализовать это на вашем сайте, выполните следующие шаги:

  1. Создайте zero block и зайдите в редактор блока.
  2. Удалите стандартный контент зеро блока.
  3. Удалите фоновый цвет блока.
  4. Нажмите на кнопку «+» и выберите «Add HTML».
  5. Нажмите на html элемент правой кнопкой мыши.
  6. В настройках слева в пунктах «W» и «H» вместо пикселей выберите проценты.
  7. Нажмите на «+container», в поле «CONTAINER» выберите «Window Container».
  8. В полях «AXIS X» и «AXIS Y» выберите «center».
  9. Откройте html элемент и скопируйте в него следующий код:
<style>

    body {
//Цвет фона блока
        background: radial-gradient(circle, #0077ea, #1f4f96, #1b2949, #000000);
    }

    .stage {
        height: 300px;
        width: 500px;
        margin: auto;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        perspective: 9999px;
        transform-style: preserve-3d;
    }

    .layer {
        width: 100%;
        height: 100%;
        position: absolute;
        transform-style: preserve-3d;
        animation: ?_? 5s infinite alternate ease-in-out -7.5s;
        animation-fill-mode: forwards;
        transform: rotateY(40deg) rotateX(33deg) translateZ(0);
    }

    .layer:after {
        font: 150px/0.65 'Pacifico', 'Kaushan Script', Futura, 'Roboto', 'Trebuchet MS', Helvetica, sans-serif;
        content: 'Pure\A    css!';
        white-space: pre;
        text-align: center;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 50px;
        color: whitesmoke;
        letter-spacing: -2px;
        text-shadow: 4px 0 10px rgba(0, 0, 0, 0.13);
    }

    .layer:nth-child(1):after {
        transform: translateZ(0px);
    }

    .layer:nth-child(2):after {
        transform: translateZ(-1.5px);
    }

    .layer:nth-child(3):after {
        transform: translateZ(-3px);
    }

    .layer:nth-child(4):after {
        transform: translateZ(-4.5px);
    }

    .layer:nth-child(5):after {
        transform: translateZ(-6px);
    }

    .layer:nth-child(6):after {
        transform: translateZ(-7.5px);
    }

    .layer:nth-child(7):after {
        transform: translateZ(-9px);
    }

    .layer:nth-child(8):after {
        transform: translateZ(-10.5px);
    }

    .layer:nth-child(9):after {
        transform: translateZ(-12px);
    }

    .layer:nth-child(10):after {
        transform: translateZ(-13.5px);
    }

    .layer:nth-child(11):after {
        transform: translateZ(-15px);
    }

    .layer:nth-child(12):after {
        transform: translateZ(-16.5px);
    }

    .layer:nth-child(13):after {
        transform: translateZ(-18px);
    }

    .layer:nth-child(14):after {
        transform: translateZ(-19.5px);
    }

    .layer:nth-child(15):after {
        transform: translateZ(-21px);
    }

    .layer:nth-child(16):after {
        transform: translateZ(-22.5px);
    }

    .layer:nth-child(17):after {
        transform: translateZ(-24px);
    }

    .layer:nth-child(18):after {
        transform: translateZ(-25.5px);
    }

    .layer:nth-child(19):after {
        transform: translateZ(-27px);
    }

    .layer:nth-child(20):after {
        transform: translateZ(-28.5px);
    }

    .layer:nth-child(n+10):after {
        -webkit-text-stroke: 3px rgba(0, 0, 0, 0.25);
    }

    .layer:nth-child(n+11):after {
        -webkit-text-stroke: 15px dodgerblue;
        text-shadow: 6px 0 6px #00366b, 5px 5px 5px #002951, 0 6px 6px #00366b;
    }

    .layer:nth-child(n+12):after {
        -webkit-text-stroke: 15px #0077ea;
    }

    .layer:last-child:after {
        -webkit-text-stroke: 17px rgba(0, 0, 0, 0.1);
    }

    .layer:first-child:after {
        color: #fff;
        text-shadow: none;
    }

    @keyframes ?_? {
        100% {
            transform: rotateY(-40deg) rotateX(-43deg);
        }
    }

</style>
</head>
<body>
<div class="stage">
    <div class="layer"></div>
    <div class="layer"></div>
    <div class="layer"></div>
    <div class="layer"></div>
    <div class="layer"></div>
    <div class="layer"></div>
    <div class="layer"></div>
    <div class="layer"></div>
    <div class="layer"></div>
    <div class="layer"></div>
    <div class="layer"></div>
    <div class="layer"></div>
    <div class="layer"></div>
    <div class="layer"></div>
    <div class="layer"></div>
    <div class="layer"></div>
    <div class="layer"></div>
    <div class="layer"></div>
    <div class="layer"></div>
    <div class="layer"></div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

Заключение

Анимация текста в Tilda — это один из важных элементов, который помогает привлечь внимание посетителей и сделать сайт более интерактивным и привлекательным. Используя зеро блоки Tilda и сторонние скрипты для Tilda, можно быстро и легко добавлять анимацию на страницы. В целом, Tilda Publishing — это мощный инструмент для создания сайтов, который предоставляет множество возможностей для веб-дизайнеров и начинающих пользователей, которые хотят создавать высококачественный контент для своих сайтов.

Также узнайте как сделать hover анимацию кнопок в Tilda в нашей статье или на youtube канале.

Вам также понравится

дизайн из Figma в Tilda

Как импортировать дизайн из Figma в Tilda. Пошаговый гайд

agadzhango 0
Как отключить lazy load в Tilda

Как отключить lazy load в Tilda: отключаем ленивую загрузку изображений

agadzhango 0
Вертикальный слайдер в Tilda zero block

Вертикальный слайдер в Tilda zero block

agadzhango 0

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Сайт функционирует за счет рекламы

Пожалуйста, выключи блокировщик рекламы, чтобы продолжить пользоваться сайтом