Как сделать эффект , где буквы рандомно были повернуты на разные углы и плавно крутились при собирание букв в текст?

Question

Я написал код где буквы текста , рандомно разбрасываются по всему экрану и плавно собираются . Но я не могу сделать эффект , где буквы рандомно были повернуты на разные углы и плавно крутились при собирание букв в текст. Помогите пожалуйста. Вот код в codepen https://codepen.io/Daniil-chaynik/pen/xxqodXO?editors=1010. Заранее спасибо.

 let text = 'За это время мы опубликовали ряд книг, альбомов, научных работ по культурному наследию Узбекистана';
   let textBottom = document.getElementById('textBottom');
            let letter = document.getElementsByClassName('letter');
            let textBottomArray = [];

            for (let i = 0; i < text.length; i++) {
                textBottomArray[i] = text[i];
            }

            function createElement(itemArray, item) {
                for (let i = 0; i < itemArray.length; i++) {
                    item.innerHTML += `<span class="letter">${itemArray[i]}</span>`;
                }
            }

            function scatterElementRandom(item) {
              
                for (let i = 0; i < item.length; i++) {
                    let randomX = Math.random() * 0.9 * window.innerWidth;
                    let randomY = Math.random() * 0.9 * window.innerWidth;
                    if (i % 5 == 0) {
                        item[i].style.bottom = `${randomX}px`;
                        item[i].style.right = `${randomY}px`;
                    } else if (i % 3 == 0) {
                        item[i].style.top = `${randomX}px`;
                        item[i].style.left = `${randomY}px`;
                    } else if (i % 7 == 0) {
                        item[i].style.bottom = `${randomX}px`;
                        item[i].style.left = `${randomY}px`;
                    } else {
                        item[i].style.top = `${randomX}px`;
                        item[i].style.right = `${randomY}px`;
                    }
                }
            }

            function returnElementPosition(item) {
                for (let i = 0; i < item.length; i++) {
                    if (i % 5 == 0) {
                        item[i].style.bottom = '0';
                        item[i].style.right = '0';
                    } else if (i % 3 == 0) {
                        item[i].style.top = '0';
                        item[i].style.left = '0';
                    } else if (i % 7 == 0) {
                        item[i].style.bottom = '0';
                        item[i].style.left = '0';
                    } else {
                        item[i].style.top = '0';
                        item[i].style.right = '0';
                    }
                }
            }
            
            createElement(textBottomArray, textBottom);

            scatterElementRandom(letter);

            setTimeout(() => {
                returnElementPosition(letter);
            }, 3000);

* {
     margin: 0;
     padding: 0;
    }
            .effects {
                overflow: hidden;
                width: 100vw;
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .text {
                text-align: center;

                max-width: 50vw;
            }
            .letter {
                color: black;
                font-size: 3rem;
                line-height: 1.2em;
                position: relative;
              transition: top 1.6s, left 1.6s, right 1.6s,
                    bottom 1.6s cubic-bezier(0.22, 1, 0.56, 1);
            }

<div class="effects">
   <text class="text" id="textBottom"></text>
 </div>

Answer 1

Для наклона можете использовать transform: rotateZ(deg).

let text = 'За это время мы опубликовали ряд книг, альбомов, научных работ по культурному наследию Узбекистана';
let textBottom = document.getElementById('textBottom');
let letter = document.getElementsByClassName('letter');
let textBottomArray = [];

for (let i = 0; i < text.length; i++) {
  textBottomArray[i] = text[i];
}

function createElement(itemArray, item) {
  for (let i = 0; i < itemArray.length; i++) {
    item.innerHTML += `<span class="letter">${itemArray[i]}</span>`;
  }
}

function scatterElementRandom(item) {

  for (let i = 0; i < item.length; i++) {
    let randomX = Math.random() * 0.9 * window.innerWidth;
    let randomY = Math.random() * 0.9 * window.innerWidth;
    let randomAngle = Math.round(Math.random() * 360);
    if (i % 5 == 0) {
      item[i].style.bottom = `${randomX}px`;
      item[i].style.right = `${randomY}px`;
    } else if (i % 3 == 0) {
      item[i].style.top = `${randomX}px`;
      item[i].style.left = `${randomY}px`;
    } else if (i % 7 == 0) {
      item[i].style.bottom = `${randomX}px`;
      item[i].style.left = `${randomY}px`;
    } else {
      item[i].style.top = `${randomX}px`;
      item[i].style.right = `${randomY}px`;
    }
    item[i].style.transform = `rotateZ(${randomAngle}deg)`;
  }
}

function returnElementPosition(item) {
  for (let i = 0; i < item.length; i++) {
    if (i % 5 == 0) {
      item[i].style.bottom = '0';
      item[i].style.right = '0';
    } else if (i % 3 == 0) {
      item[i].style.top = '0';
      item[i].style.left = '0';
    } else if (i % 7 == 0) {
      item[i].style.bottom = '0';
      item[i].style.left = '0';
    } else {
      item[i].style.top = '0';
      item[i].style.right = '0';
    }
    item[i].style.transform = `rotateZ(0deg)`;
  }
}

createElement(textBottomArray, textBottom);

scatterElementRandom(letter);

setTimeout(() => {
  returnElementPosition(letter);
}, 3000);

* {
  margin: 0;
  padding: 0;
}

.effects {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text {
  text-align: center;
  max-width: 50vw;
}

.letter {
  display: inline-block;
  color: black;
  font-size: 3rem;
  min-width: 10px;
  line-height: 1.2em;
  position: relative;
  transition: top 1.6s, left 1.6s, right 1.6s, bottom 1.6s, transform 1.6s cubic-bezier(0.22, 1, 0.56, 1);
}

<div class="effects">
  <text class="text" id="textBottom"></text>
</div>

БЛОГ НА HUSL

Как сделать эффект , где буквы рандомно были повернуты на разные углы и плавно крутились при собирание букв в текст?

Ответы (1 шт):