具有动态内容的打字机效果

Question

我正在尝试在该元素进入视口后在横幅文本上创建打字机效果。我几乎可以正常工作了，但我仍然有一些我自己似乎无法解决的问题：

播放打字机效果时，最后一个字符不显示（我在网上找到这段代码）
当我检测到元素是否在视口中时，我的打字机动画一直在闪烁

我正在使用 ACF 获取内容。我也尝试将代码重写为 jquery，但似乎也行不通。

HTML/PHP

echo '<div class="contentBlock featured bg-black">';
    echo '<div class="textWrapper">';
        echo '<h2 id="original" style="display:none;">'. get_sub_field('grote_titel') .'</h2>';
        echo '<h2 id="typewriter"></h2>';
    echo '</div>';
echo '</div>';

jquery/js

$.fn.isInViewport = function() {
var elementTop = $(this).offset().top;
var elementBottom = elementTop + $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};

$(window).on('resize scroll', function() {
    $('.contentBlock.featured').each(function() {
        if ( $(this).isInViewport()) {
            var str = document.getElementById('original').innerText,
                i = 0,
                isTag,
                text;

            (function type() {
                text = str.slice(0, ++i);
                if (text === str) return;

                document.getElementById('typewriter').innerHTML = text;

                var char = text.slice(-1);
                if( char === '<' ) isTag = true;
                if( char === '>' ) isTag = false;
                
                if (isTag) return type();
                setTimeout(type, 80);
            }());
        }
    });
});

Answer 1

第一个问题先做测试：

  (function type() {
    if (text === str) return;
    text = str.slice(0, ++i);

对于闪烁，您每次滚动时都会执行打字机并且标题在视口上。这很正常.. 为避免闪烁，您有 2 个解决方案：

你可以把打字机的速度稍微提高一点，例如40（不是最好的）
您避免在输入处于活动状态时重新启动输入 -> 使用布尔值（此解决方案在片段中）

$.fn.isInViewport = function() {
var elementTop = $(this).offset().top;
var elementBottom = elementTop + $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};

var typing = false;
$(window).on('resize scroll', function() {
    $('.contentBlock.featured').each(function() {
        if ( $(this).isInViewport() && !typing) {
            typing = true;
            var str = document.getElementById('original').innerText,
                i = 0,
                isTag,
                text;

            (function type() {
                if (text === str) {typing= false;return;}
                text = str.slice(0, ++i);


                document.getElementById('typewriter').innerHTML = text;

                var char = text.slice(-1);
                if( char === '<' ) isTag = true;
                if( char === '>' ) isTag = false;
                
                if (isTag) return type();
                setTimeout(type, 80);
            }());
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contentBlock featured bg-black">
  <div class="textWrapper">
    <h2 id="original" style="display:none;">Big Title ttttttttx</h2>
    <h2 id="typewriter"></h2>
  </div>
  
  <div class="just text to create scroll">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br>the td's are not updated when you select td, its the reason you have older values, i dont see event about that, so i suggest you to wait the value of tds are changed by testing the month, you could add year if needed:

  </div>  
  
  
</div>

具有动态内容的打字机效果

Typewriter effect with dynamic content

html

wordpress

jquery

advanced-custom-fields