从一行后面显示两个文本元素 [英] revealing two text elements from behind a line
本文介绍了从一行后面显示两个文本元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
为两个文本元素设置动画以使其看起来似乎是从一行后面露出来的正确方法是什么?
What is the right way to animate two text elements so that it seems they're revealing from behind a line?
一个从上方，另一个从底部.
One from above and another one from the bottom.
这是一个代码:
//pause the animation at first
document.getElementById("tutorialText").classList.add("paused");
document.getElementById("tutorialSubText").classList.add("paused");
//after 3 seconds initiate the animation
setTimeout(function(){
document.getElementById("tutorialText").classList.add("played");
document.getElementById("tutorialSubText").classList.add("played");
}, 3000)
html{
overflow:hidden;
}
.mainTexts{
position: absolute;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 7.5vw;
color: rgb(242, 242, 242);
left: 18.5vw;
top: 15vh;
animation: rollUp 0.5s ease-out ;
animation-fill-mode: forwards;
}
.subTexts{
position: absolute;
font-family: 'Open Sans', sans-serif;
font-weight: normal;
font-size: 3vw;
color: rgb(217, 217, 217);
left: 20vw;
top: 40vh;
animation: rollDown 0.5s ease-out ;
animation-fill-mode: forwards;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 60vh;
}
@-webkit-keyframes rollUp {
from { top: 55vh }
to { top: 0vh }
}
@-webkit-keyframes rollDown {
from { top: -45vh }
to { top: 60vh }
}
.paused {
-webkit-animation-play-state: paused !important;
}
.played {
-webkit-animation-play-state: running !important;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<p id="tutorialText" class="mainTexts">Tutorial</p>
</div>
<hr/>
<div >
<p id="tutorialSubText" class="subTexts">Learn a new sentence</p>
</div>
</body>
</html>
推荐答案
，您可以从其容器中使用overflow:hidden.除了flex来使整个内容居中，并协调div容器中文本p的大小也有帮助.您可以删除幻灯片的vw/vh值并使用百分比.
you can use overflow:hidden from their container. aside , flex to center the whole thing, and coordonates to size text p from div container can also help. you can drop the vw/vh values for the slide and use percentage.
一种方法:
//pause the animation at first
document.getElementById("tutorialText").classList.add("paused");
document.getElementById("tutorialSubText").classList.add("paused");
//after 3 seconds initiate the animation
setTimeout(function() {
document.getElementById("tutorialText").classList.add("played");
document.getElementById("tutorialSubText").classList.add("played");
}, 3000)
html {
overflow: hidden;
display: flex;/* settings preparing to center content*/
height: 100vh;
flex-direction: column;
}
body {
margin: auto 5vw;/* one way for flex child vertical centering */
}
.mainTexts {
position: absolute;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 7.5vw;
color: rgb(242, 242, 242);
top: 0;/* size them via coordonates related to the relative parent */
left: 0;
bottom: 0;
right: 0;
margin: auto 0;
animation: rollUp 0.5s ease-out;
animation-fill-mode: forwards;
}
.subTexts {
position: absolute;
font-family: 'Open Sans', sans-serif;
font-weight: normal;
font-size: 3vw;
color: rgb(217, 217, 217);
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
animation: rollDown 0.5s ease-out;
animation-fill-mode: forwards;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
}
@-webkit-keyframes rollUp {
from {
top: 150%
}
to {
top: 0vh
}
}
@-webkit-keyframes rollDown {
from {
top: -150%
}
to {
top: 0
}
}
.paused {
-webkit-animation-play-state: paused !important;
}
.played {
-webkit-animation-play-state: running !important;
}
body{
background: black
}
div {/* size parents and make them reference */
overflow: hidden;
position: relative;
height: 7.5vw;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<p id="tutorialText" class="mainTexts">Tutorial</p>
</div>
<hr/>
<div>
<p id="tutorialSubText" class="subTexts">Learn a new sentence</p>
</div>
</body>
</html>
这篇关于从一行后面显示两个文本元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
