0
我使用Bootstrap，Animate.css和Typed.js来构建网页。我想要的效果是页面为空，使用animate.css fadeInDown向下滑动页面，当完成Typed.js行开始写入以及完成一个V形（由FontAwesome提供）以使用animate.css进行动画时bounceInUp。Animate.css和Typed.js - 隐藏输入直到动画结束。
我已经写了下面的代码，但是一切都只发生在一次，雪佛龙根本没有动画。
<body>
<!--NAV BAR SECITON-->
<nav class="navbar navbar-fixed-top">
<div class="container-fluid animated fadeInDown">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="companylogo.png" /></a>
<ul class="nav navbar-nav pull-right">
<li><h3><a href="#">Blog</a></h3></li>
</ul>
</div>
</div>
</nav>
<!-- Main page banner -->
<div class="jumbotron">
<div class="container text-center special">
<div class="centermaintextline vertical-center">
<div class="showAndTell">
<h1>
<span class="maintextline"></span>
</h1>
</div>
</div>
<div class="text-center bottom-box">
<h1><i class="fa fa-chevron-down"></i></h1>
</div>
</div>
</div>
<!--Script that should hide the section to be typed.js so the flashing cursor doesn't appear till ready-->
<!--Also hide the chevron-->
<script>
$(document).ready($('.showAndTell').hide());
$(document).ready($('.fa-chevron-down').hide());
</script>
<script src="typed.js" type="text/javascript"></script>
<!-- thanks http://www.mattboldt.com/ -->
<script>
/*This function will execute typed.js and then show the chevron and animate it-*/
function typingEffect()
{
$(".maintextline").typed({
strings: ["Stuff to be typed"],
typeSpeed: 100,
startDelay: 1000,
});
$('.fa-chevron-down').show();
$('.fa-chevron-down').add('animited infinite bounceInUp');
}
/*function that should show the block to be typed.js and then execute the function that will typed.js*/
function showTypingEffect()
{
$('.showAndTell').show();
typingEffect();
}
/*call the previous function to get things going after the navbar finishes animating*/
$(document).ready($('.container-fluid').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', showTypingEffect()));
</script>
</body>
CSS东西
/*********************************************************
* *
* Stuff that affects the first panel *
* *
*********************************************************/
/*Makes .jumbotron occupy the full window*/
.jumbotron
{
width: 100%;
height:100%;
padding-top: 0px;
padding-bottom: 0px;
}
.jumbotron .container
{
width:100%;
height:100%;
padding-left: 0px;
padding-right:0px;
}
/*Makes things center vertically in the page, funnily enough*/
.vertical-center
{
min-height: 85%; /* Fallback for vh unit */
min-height: 85vh; /* You might also want to use
'height' property instead.
/* Make it a flex container */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* Align the bootstrap's container vertically */
-webkit-box-align : center;
-webkit-align-items : center;
-moz-box-align : center;
-ms-flex-align : center;
align-items : center;
/* In legacy web browsers such as Firefox 9
we need to specify the width of the flex container */
width: 100%;
/* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
hence the bootstrap's container won't be aligned to the center anymore.
Therefore, we should use the following declarations to get it centered again */
-webkit-box-pack : center;
-moz-box-pack : center;
-ms-flex-pack : center;
-webkit-justify-content : center;
justify-content : center;
}
.vertical-center
{
min-height: 85%; /* Fallback for browsers do NOT support vh unit */
min-height: 85vh; /* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
/* Remove the default bottom margin of .jumbotron */
.jumbotron .vertical-center
{
margin-bottom: 0;
}
/*Everything below here styles the text in the cetner of the page*/
.special
{
background: transparent;
color: #fff;
font-family: "ocr-a-std", san-serif;
text-transform: uppercase;
}
/*Make the main keyword underline */
.special a, .special a:hover, .special a:visited
{
text-decoration: underline;
color:#fff;
}
.bottom-box
{
bottom: 0;
margin-bottom: 50px;
position: absolute;
width:100%;
}
.fa-chevron-down
{
}
/*********************************************************
* *
* Stuff that affects the navigation bar *
* *
*********************************************************/
.nav
{
}
/*Style the top bar*/
.navbar-fixed-top, .navbar-fixed-top a, .navbar-fixed-top a:hover, .navbar-fixed-top a:visited, .navbar-fixed-top li
{
background-color: transparent;
border-color: transparent;
font-family: "futura-pt", sans-serif;
color: #fff;
font-size: 22px;
}
.navbar-fixed-top .navbrand
{
color: #fff;
}
.navbar-fixed-top
{
position: absolute;
}
.nav h4
{
margin-right: 0.3em;
}
/*********************************************************
* *
* Makes the cursor blink for the typed.js *
* *
*********************************************************/
.typed-cursor{
opacity: 1;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
@keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
小提琴的人！小提琴！！ – Ajey