具有动态内容的打字机效果
Posted
技术标签:
【中文标题】具有动态内容的打字机效果【英文标题】:Typewriter effect with dynamic content 【发布时间】:2021-07-15 18:14:42 【问题描述】:一旦该元素进入视口,我正在尝试在横幅文本上创建打字机效果。我几乎让它工作了,但我仍然有一些我自己似乎无法解决的问题:
打打字机效果时,最后一个字符不显示(我在网上找到了这段代码) 当我检测到元素是否在视口中时,我的打字机动画一直在闪烁我正在使用 ACF 来获取内容。 我也尝试将代码重写为jquery,但这似乎也不起作用。
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);
());
);
);
【问题讨论】:
最后一个字符没有显示 - 开始之前在字符串中添加另一个字符? 【参考方案1】:对于第一个问题,只需先进行测试:
(function type()
if (text === str) return;
text = str.slice(0, ++i);
每次滚动并且标题在视口上时,您都会执行打字机的闪烁。正常..为避免闪烁,您有 2 个解决方案:
例如,您可以将打字机的速度提高一点到 40(不是最好的)
你避免在它处于活动状态时重新启动打字 -> 玩布尔值(这个解决方案在 sn-p 中)
$.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>
【讨论】:
这正是我所需要的,谢谢!我又做了一个更改并添加了另一个布尔值,以确保动画只播放一次。现在动画在完全完成后重复播放,您再次滚动页面。以上是关于具有动态内容的打字机效果的主要内容,如果未能解决你的问题,请参考以下文章