淡入淡出从换行符底部显示文本。 CSS / JS

Question

所以，我需要实现一个非常好的淡入淡出显示文本效果。想象一下H1分布在两条线上。文本需要从每行的基础上显示出来。但是我不确定如何使用多行文本（不会拆分成单独的标题标记）来执行此操作。

这是我已经创建的一个，但是这会从底部消失。理想情况下，我希望每一行都从自己的行中淡出。

$url = 'facebook.com';        
$curl = curl_init($url);       
curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE);    
$subject = curl_exec($curl);  
print("Download size: " . curl_getinfo($curl, CURLINFO_SIZE_DOWNLOAD) .'<br>');

setTimeout(function(){ 
		$('.ready').addClass('active');
}, 1500);

.overflow-hidden {
    overflow:hidden;
}

h1 {
  padding:0;
  max-width:500px;
  margin:0;
  font-family:sans-serif;
}

.ready {
  opacity:0;
  transform: translateY(50px);
}

.active {
  opacity:1;
  transform: translateY(0px);
}

.reveal-in {
  -webkit-transition: all 600ms ease-in-out;
  -moz-transition: all 600ms ease-in-out;
  -ms-transition: all 600ms ease-in-out;
  -o-transition: all 600ms ease-in-out;
  transition: all 600ms ease-in-out;
}

与此参考相似 -

https://basicagency.com/

谢谢你们。

Answer 1

我认为你正在寻找这样的东西：

setTimeout(function(){ 
		$('.ready').addClass('active');
}, 1500);

.overflow-hidden {
    overflow:hidden;
}

h1 {
  padding:0;
  max-width:500px;
  margin:0;
  font-family:sans-serif;
}

.ready {
  opacity:0;
  transform: translateY(50px);
}

.active {
  opacity:1;
  transform: translateY(0px);
}

.reveal-in {
  -webkit-transition: all 600ms ease-in-out;
  -moz-transition: all 600ms ease-in-out;
  -ms-transition: all 600ms ease-in-out;
  -o-transition: all 600ms ease-in-out;
  transition: all 600ms ease-in-out;
}
.reveal-in2 {
  -webkit-transition: all 100ms ease-in-out;
  -moz-transition: all 100ms ease-in-out;
  -ms-transition: all 100ms ease-in-out;
  -o-transition: all 100ms ease-in-out;
  transition: all 100ms ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overflow-hidden iv-wp">
    <h1 >
      <span class="ready reveal-in">This is text over two lines, with</span>
      <span class="ready reveal-in2"> a really nice fade effect.</span>
      
    </h1>
</div>

Answer 2

您可以使用解决方案https://jsfiddle.net/x5fgnbpx/1/

＆＃13;

＆＃13;

setTimeout(function(){ 
  $('.ready').slideDown("slow");
}, 1500);

＆＃13;

.overflow-hidden {
    overflow:hidden;
}

h1 {
  padding:0;
  max-width:500px;
  margin:0;
  font-family:sans-serif;
}

.ready {
  opacity:1;
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overflow-hidden iv-wp">
    <h1 class="ready reveal-in">
      This is text over two lines, with a really nice fade effect.
    </h1>
</div>

＆＃13;

＆＃13;

＆＃13;

为了达到同样的目的，我使用了jQuery slideDown。

希望这会对你有所帮助。

Answer 3

您可以使用非常容易使用的Animate.css。您可以查看演示here。

您需要做的就是添加一个animated的类名和您选择的动画，可以在提供的链接中找到。您可以选择slideInDown或slideInUp或更多。检查并播放我提供的演示链接。

添加了Working Fiddle