具有两个一致单词的多行打字机效果 [英] Multiline Typewriter Effect with Two Consistent Words
问题描述
我正在尝试创建一个打字机效果，该效果在语句结尾处暂停，删除每个语句的大部分内容，但保留前两个单词，并仅用这两个单词结束.
我发现一些事情几乎可以满足我的需求，但不能完全满足我的需求.我已经找到了删除整个行并写一个新行的版本，但是在开始时我需要两个一致的单词.
例如(但不是实际文本):
This is Stack Overflow. [延迟后删除堆栈溢出"]
This is JavaScript. [延迟后删除"JavaScript"]
This is what I want. [延迟后删除我想要的"，并以这是"和连续闪烁的句号结束.]
理想情况下，句号将充当光标，而不是通常的水平线.
解决方案1:jQuery和类型化
使用jQuery和Typed，您可以执行以下操作:
$(".element").typed({strings: [
"I am a ^100Linux fan.^1000",
"I am an ^200UX expert.^2000",
"I am a ^200programmer.^1000",
"I am a ^200web developer.^500"
],
typeSpeed: 20,
callback: function(){ $(".typed-cursor").css('visibility','hidden');}
});
https://mattboldt.com/demos/typed-js/
您可以免费使用此软件.它具有 MIT许可证.
重要:这是一个简单的解决方案，需要庞大的库(jQuery)，并且可访问性较差.不太适合生产，但是是一种以快速而肮脏的方式将某些东西放在一起的好方法.如果您真的想使用这种效果，我将在下面提供仅CSS的解决方案.
解决方案2:仅CSS
使用CSS，您可以执行以下操作: https://css-tricks.com/snippets/css/typewriter-effect/.但是，我宁愿在这样的状态下使用CSS动画，因此它不依赖于等宽字体:
@keyframes words {
0% {content: "I";}
17% {content: "I ";}
34% {content: "I a";}
50% {content: "I am";}
67% {content: "I am ";}
84% {content: "I am a";}
100% {content: "I am a ";}
}
@keyframes changeLetter {
0% {content: "";}
5% {content: "C";}
10% {content: "CS";}
15% {content: "CSS";}
20% {content: "CSS ";}
25% {content: "CSS f";}
30% {content: "CSS fa";}
35% {content: "CSS fan";}
40% {content: "CSS fan.";}
54% {content: "CSS fan.";}
55% {content: "CSS fan";}
56% {content: "CSS fa";}
57% {content: "CSS f";}
58% {content: "CSS f";}
59% {content: "CSS ";}
60% {content: "CSS";}
61% {content: "CS";}
62% {content: "C";}
62% {content: "";}
75% {content: "n";}
80% {content: "ne";}
85% {content: "ner";}
90% {content: "nerd";}
95% {content: "nerd.";}
100% {content: "nerd.";}
}
@keyframes cursor {
0% {content: "";}
50% {content: "|";}
100% {content: "";}
}
.words::before {
animation: words 1s linear 0s 1 normal forwards;
content: "";
}
.letter-changer::before {
animation: changeLetter 3s linear 1s 1 normal forwards;
content: "";
}
.letter-changer::after {
animation: cursor 0.6s linear 2.2s 1 normal forwards, cursor 0.6s linear 4s 3 normal forwards;
content: "|";
}
.accessibility {
width: 0;
display: inline-block;
overflow: hidden;
white-space:nowrap;
}
<span class="words"></span><span class="letter-changer"></span><span class="accessibility">I am a <s>CSS fan.</s>nerd.</span>
我向::after元素添加了一个闪烁的光标.我从以下解决方案中得到了灵感: https://css-tricks.com/animating -the-content-property/.
重要:此解决方案不会通过加载100kb的jQuery来迫使您将页面大小增加一倍.屏幕阅读器和搜索引擎可以访问它.它适用于所有字体.最后...效果将在任何现代浏览器上运行，甚至是没有javascript(或禁用javascript)的浏览器.
I'm trying to create a typewriter effect that pauses at the end of a statement, deletes most of each statement but keeps the first two words, and finished with just those two words.
I've found a few things that almost do what I need, but not quite. I've found version that deletes the entire line and writes a new one, but I need two consistent words at the beginning.
For example (but not the actual text):
This is Stack Overflow. [delete "Stack Overflow" after delay]
This is JavaScript. [delete "JavaScript" after delay]
This is what I want. [delete "what I want" after delay and finish with "This Is" and a continuous flashing full-stop.]
In an ideal would the full-stop would act as the cursor rather than the usual horizontal line.
Solution 1: jQuery and Typed
Using jQuery and Typed, you can do this:
$(".element").typed({strings: [
"I am a ^100Linux fan.^1000",
"I am an ^200UX expert.^2000",
"I am a ^200programmer.^1000",
"I am a ^200web developer.^500"
],
typeSpeed: 20,
callback: function(){ $(".typed-cursor").css('visibility','hidden');}
});
https://mattboldt.com/demos/typed-js/
You can use this software for free. It has an MIT license.
IMPORTANT This is an easy solution that requires a bulky library (jQuery) and has poor accessibility. Not very suitable for production, but a nice way to trow something together in a quick and dirty kind of way. If you are serious about using this effect I would go for the CSS only solution below.
Solution 2: CSS only
Using CSS, you can do something like this: https://css-tricks.com/snippets/css/typewriter-effect/. However, I would rather use CSS animation with states like this, so it does not rely on a monospaced font:
@keyframes words {
0% {content: "I";}
17% {content: "I ";}
34% {content: "I a";}
50% {content: "I am";}
67% {content: "I am ";}
84% {content: "I am a";}
100% {content: "I am a ";}
}
@keyframes changeLetter {
0% {content: "";}
5% {content: "C";}
10% {content: "CS";}
15% {content: "CSS";}
20% {content: "CSS ";}
25% {content: "CSS f";}
30% {content: "CSS fa";}
35% {content: "CSS fan";}
40% {content: "CSS fan.";}
54% {content: "CSS fan.";}
55% {content: "CSS fan";}
56% {content: "CSS fa";}
57% {content: "CSS f";}
58% {content: "CSS f";}
59% {content: "CSS ";}
60% {content: "CSS";}
61% {content: "CS";}
62% {content: "C";}
62% {content: "";}
75% {content: "n";}
80% {content: "ne";}
85% {content: "ner";}
90% {content: "nerd";}
95% {content: "nerd.";}
100% {content: "nerd.";}
}
@keyframes cursor {
0% {content: "";}
50% {content: "|";}
100% {content: "";}
}
.words::before {
animation: words 1s linear 0s 1 normal forwards;
content: "";
}
.letter-changer::before {
animation: changeLetter 3s linear 1s 1 normal forwards;
content: "";
}
.letter-changer::after {
animation: cursor 0.6s linear 2.2s 1 normal forwards, cursor 0.6s linear 4s 3 normal forwards;
content: "|";
}
.accessibility {
width: 0;
display: inline-block;
overflow: hidden;
white-space:nowrap;
}
<span class="words"></span><span class="letter-changer"></span><span class="accessibility">I am a <s>CSS fan.</s>nerd.</span>
I have added a blinking cursor to the ::after element. I got inspiration for this solution from: https://css-tricks.com/animating-the-content-property/.
IMPORTANT This solution does not force you to double the size of your page by loading 100kb of jQuery. It is accessible for screen readers and search engines. It works with all fonts. And finally... the effect will run on any modern browser, even ones without javascript (or with javascript disabled).
这篇关于具有两个一致单词的多行打字机效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
