旋转文字动画

Question

在这个网站的最开头https://hype4.com/，在“We build”这个词之后有一个文字动画。我试图找到它是如何制作的。我只得到了相关的 CSS 部分。但是，找不到JS部分。

HTML部分

<h1 class="mainPrimaryHeading mainPrimaryHeading2020">
    <span class='topText'>We build 
        <span class='textGradient noAfter animationRotateText'>
            <span class='word'>successful</span>
            <span class='word'>converting</span>
            <span class='word'>functional</span>
            <span class='word'>lovable</span>
            <span class='word'>engaging</span>
            <span class='word'>memorable</span>
        </span>
    </span> 
    <strong class='bottomText'>web&nbsp;and mobile products</strong>
</h1>

CSS 样式和类

.mainPrimaryHeading {
    font-size: 60px;
    letter-spacing: .99px;
    margin: 0 auto 42px auto;
    line-height: 63px;
    font-weight: 900;
}

.topText{
    position: relative;
} 

.animationRotateText {
    display: inline-block;
    vertical-align: top;
    margin: 0;
    width: 300px;
    height: 60px;
    line-height: 1.3;
}

.textGradient {
    position: relative;
    background: -webkit-linear-gradient(319.11deg,#5668f2 0%,#b77dfb 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.word {
    position: absolute;
    width: 340px;
    opacity: 0;
    top: -8px;
    left: 0;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
    margin: 0 0 0 19px;
}

.letter {
    display: inline-block;
    position: relative;
    float: left;
    -webkit-transform: translateZ(25px);
    transform: translateZ(25px);
    -webkit-transform-origin: 50% 50% 25px;
    transform-origin: 50% 50% 25px;
    background: -webkit-linear-gradient(319.11deg,#5668f2 0%,#b77dfb 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.letter.out {
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transition: -webkit-transform 0.32s cubic-bezier(.55,.055,.675,.19);
    transition: -webkit-transform 0.32s cubic-bezier(.55,.055,.675,.19);
    transition: transform 0.32s cubic-bezier(.55,.055,.675,.19);
    transition: transform 0.32s cubic-bezier(.55,.055,.675,.19),
    -webkit-transform 0.32s cubic-bezier(.55,.055,.675,.19);
}

在 CSS 文件中有样式类命名为 .letter 和 .out。这两种样式类未包含在 html 文件中。这意味着这些样式类是由 JavaScript 添加的。但是我可以找到关联的 JS 部分。

如果有人能告诉我它是如何制作的或任何教程链接，我会很高兴。提前致谢

Answer 1

它使用 css 动画完成整个过程。您没有复制将单词分解为字母的 jquery 部分。

 var words = document.getElementsByClassName("word");
        var wordArray = [];
        var currentWord = 0;

        if (words.length > 0) {
            words[currentWord].style.opacity = 1;
            for (var i = 0; i < words.length; i++) {
                splitLetters(words[i]);
            }
        }

        function changeWord() {
            var cw = wordArray[currentWord];
            var nw =
                currentWord == words.length - 1
                    ? wordArray[0]
                    : wordArray[currentWord + 1];
            for (var i = 0; i < cw.length; i++) {
                animateLetterOut(cw, i);
            }

            for (var i = 0; i < nw.length; i++) {
                nw[i].className = "letter behind";
                nw[0].parentElement.style.opacity = 1;
                animateLetterIn(nw, i);
            }

            currentWord =
                currentWord == wordArray.length - 1 ? 0 : currentWord + 1;
        }

        function animateLetterOut(cw, i) {
            setTimeout(function() {
                cw[i].className = "letter out";
            }, i * 80);
        }

        function animateLetterIn(nw, i) {
            setTimeout(function() {
                nw[i].className = "letter in";
            }, 340 + i * 80);
        }

        function splitLetters(word) {
            var content = word.innerHTML;
            word.innerHTML = "";
            var letters = [];
            for (var i = 0; i < content.length; i++) {
                var letter = document.createElement("span");
                letter.className = "letter";
                letter.innerHTML = content.charAt(i);
                word.appendChild(letter);
                letters.push(letter);
            }

            wordArray.push(letters);
        }

        if (window.outerWidth > 650 && words.length > 0) {
            changeWord();
            setInterval(changeWord, 4000);
        }

旋转文字动画

Rotating Text Animation

html

javascript

css

animation

text