Как сделать Shuffle Letters Effect для текста в Tilda
greece, CRETE island
Write your name in Greek
Vacation town up close
Hersonissos is a little sea town on the island of Crete. It's the end of the season and streets are half-empty. While the cafe workers are dissembling their summer terraces, let us take a closer look at the details of the environment around here.
The town is inhabited by cats. In the winter, cats form up to a half of the town's population. Local area consists of small 3-4 storey houses (mostly hotels), gift shops, and bars.
Photography and editorial — Natasha Savicheva
Made on Tilda

Как сделать Shuffle Letters Effect для текста в Tilda

1
Создали на странице 3 якорных блока Т173
С именами anchor1 , anchor2 , anchor3
2
Добавили первый код в блок Т123
Прописал стартовую фразу
Lorem ipsum dolor
3
Добавили второй код в ещё один блок T123
4
Добавили третий код в ещё один блок T123
В коде указали адреса наших якорей
var $element1 = $('a[name="anchor1"]');
var $element2 = $('a[name="anchor2"]');
var $element3 = $('a[name="anchor3"]');

И прописали нужные фразы для каждого сектора:
Lorem ipsum dolor
Cum sociis natoque
Donec pede justo
Aliquam lorem ante

Пример создан на базе решения
https://demo.tutorialzine.com/2011/09/shuffle-letters-effect-jquery/
Библиотека для примера

<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": "Lorem ipsum dolor"});line1=true;};
  }else{line1=false};
  if ( scroll > $element1.offset().top  &&  scroll < $element2.offset().top) {
     if (!line2) {shuffleblock.shuffleLetters({"text": "Cum sociis natoque"});line2=true;};
  }else{line2=false};
  if ( scroll > $element2.offset().top  &&  scroll < $element3.offset().top) {
     if (!line3) {shuffleblock.shuffleLetters({"text": "Donec pede justo"});line3=true;};
  }else{line3=false}; 
  if ( scroll > $element3.offset().top) {
     if (!line4) {shuffleblock.shuffleLetters({"text": "Aliquam lorem ante"});line4=true;};
  }else{line4=false};    
};
checkscR();
$(window).scroll(function() {checkscR()});
});
</script>
Lorem ipsum dolor
Made on
Tilda