嘿，我正在使用我的投资组合的textillate.js插件，我正在测试动画，它真的很慢而且很迟钝。不知道是不是我的笔记本电脑。动画是我的标题类，每当我在一个单独的页面中完成动画时，只有标题才能顺利运行。我的页面加载时间是否可能影响动画？
<!DOCTYPE html>
<html lang = "en-us">
<head>
<title>Carlos Elizondo</title>
<link rel = "stylesheet" type = "text/css" href = "main.css">
<link rel = "stylesheet" type = "text/css" href = "http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel = "stylesheet" type = "text/css" href = "animate.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
</head>
<body>
<!------------------------------------------------------------HEADER------------------------------------------------------------------>
<header>
<div class="header-bg"></div>
<div class="header-dark">
<div class="wrapper">
<div class = "heading tlt">Hi. My Name is</div>
<div class = "box-name">Carlos Elizondo</div>
<div class = "heading tlt">I'm a future web developer and current student </div>
<ul>
<li>
<a href="#" class="ion-social-facebook"></a>
</li>
<li>
<a href="#" class="ion-social-twitter"></a>
</li>
<li>
<a href="#" class="ion-social-linkedin"></a>
</li>
</ul>
</div>
</div>
<nav class = "clearfix">
<a href = "#contact-title" class = "nav-links last">Contact</a>
<a href = "#portfolio" class = "nav-links">Portfolio</a>
<a href = "#skills" class = "nav-links">Skills</a>
<a href = "#about-me" class = "nav-links ">About Me</a>
</nav>
</header>
<!------------------------------------------------------------ABOUT ME-------------------------------------------------------------------->
<div class = "about-container">
<div id = "underline">
<h1 class = "title" id = "about-me">About Me</h1>
</div>
<div class = "about-me-wrapper">
<div class = "details selfie wow fadeIn" data-wow-duration="2s"></div>
<div class = "details wow fadeIn" data-wow-duration="2s">
<p id = "sum"><br>Lorem Ipsum </p>
</div>
<div class = "details wow fadeIn" data-wow-duration="2s">
<div id = "details-hobbies">
<div class = "square">
<div class = "square-cont">
<div class = "ion-code ion-cont">
<p class = "under-img">Coding
</p>
</div>
</div>
</div>
<div class = "square">
<div class = "square-cont">
<div class = "ion-ios-basketball ion-cont">
<p class = "under-img">Basketball
</p>
</div>
</div>
</div>
<div class = "square">
<div class = "square-cont">
<div class = "ion-ios-people ion-cont">
<p class = "under-img">Family</p>
</div>
</div>
</div>
<div class = "square">
<div class = "square-cont">
<div class = "ion-university ion-cont">
<p class = "under-img">School</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!---------------------------------------------------------------SKILLS------------------------------------------------------------------->
<div class = "skills-container">
<div id = "underline-second">
<h1 class = "title second" id = "skills">Skills</h1>
</div>
<div class = "skills-wrapper wow bounceInUp" data-wow-duration="3s">
<div class = "skills">
<div class = "logo">
<div class = "ion-social-html5">
<p class = "des">HTML5</p>
</div>
</div>
</div>
<div class = "skills">
<div class = "logo">
<div class = "ion-social-css3">
<p class = "des">CSS3</p>
</div>
</div>
</div>
<div class = "skills">
<div class = "logo">
<div class = "ion-social-javascript">
<p class = "des">JAVASCRIPT</p>
</div>
</div>
</div>
<div class = "skills last">
<div class = "logo">
<div class = "ion-social-angular">
<p class = "des">ANGULAR JS</p>
</div>
</div>
</div>
</div>
</div>
<!--------------------------------------------------------------PORTFOLIO----------------------------------------------------------------->
<div class = "portfolio-container">
<div id = "underline-last">
<h1 class = "title last" id = "portfolio">Portfolio</h1>
</div>
<div class = "portfolio-wrapper">
<a href = "#" class = "tiles wow slideInUp" data-wow-offset="280">
<div class = "port"><img src = "bg.PNG">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #1</h3>
<p class="content-text">Dallas Mavericks</p>
</div>
</div>
</a>
<a href = "#" class = "tiles wow slideInUp" data-wow-offset = "280">
<div class = "port"><img src = "bg2.PNG">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #2</h3>
<p class="content-text">ATLAS</p>
</div>
</div>
</a>
<a href = "#" class = "tiles wow slideInUp" data-wow-offset = "280">
<div class = "port"><img src = "bg3.PNG">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #2</h3>
<p class="content-text">ATLAS</p>
</div>
</div>
</a>
<a href = "#" class = "tiles wow slideInUp" data-wow-offset = "280">
<div class = "port"><img src = "bg3.PNG">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #2</h3>
<p class="content-text">ATLAS</p>
</div>
</div>
</a>
<a href = "#" class = "tiles wow slideInUp" data-wow-offset = "280">
<div class = "port"><img src = "bg3.PNG">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #2</h3>
<p class="content-text">ATLAS</p>
</div>
</div>
</a>
<a href = "#" class = "tiles wow slideInUp" data-wow-offset = "280">
<div class = "port"><img src = "bg3.PNG">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #2</h3>
<p class="content-text">ATLAS</p>
</div>
</div>
</a>
</div>
</div>
<!-------------------------------------------------------------CONTACT-------------------------------------------------------------------->
<div id = "contact-container">
<div id = "contact-underline">
<h1 id = "contact-title">Hey Lets Keep In Touch!</h1>
</div>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="text" placeholder="email"/>
<input type="text" placeholder="subject"/>
<textarea placeholder="messge" rows = "7" cols = "60"></textarea>
<button>create</button>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src = "jquery-3.1.0.js"></script>
<script src="index.js"></script>
<script src = "jquery.lettering.js"></script>
<script src = "jquery.textillate.js"></script>
<script src= "wow.min.js"></script>
<script>new WOW().init();</script>
<!--<script src="viewportchecker.js"></script>-->
</body>
</html>
<!----------------------CSS-------------------------------------------->
*{
margin: 0;
padding: 0;
}
body{
margin: 0;
font-family: 'Raleway', sans-serif;
padding: 0;
}
.clearfix::after{
content: "";
display: table;
clear: both;
}
/*----------------------------------------------------------HEADER-----------------------------------------------------------------------*/
header{
position: relative;
display: block;
width: 100%;
height: 100vh;
bottom: 0;
margin: 0;
}
.header-bg{
position: absolute;
width: 100%;
height: 100%;
background-image: url(macbook2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.header-dark{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.wrapper{
width: 850px;
height: auto;
margin-top: -50px;
}
h2{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
h4{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
ul{
list-style-type: none;
text-align: center;
padding: 0;
margin-top: 20px;
}
ul li{
display: inline-block;
padding: 0 13px;
}
.ion-social-facebook{
color: white;
font-size: 28px;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-twitter{
color: white;
font-size: 28px;
}
.ion-social-linkedin{
color: white;
font-size: 28px;
}
nav{
position: fixed;
width: 100%;
height: auto;
z-index: 100;
background: rgba(0,0,0,0.4);
}
.nav-links{
float: right;
color: #fff;
margin: 20px 10px;
text-decoration: none;
}
.nav-links.last{
margin-right: 30px;
}
nav > a{
position: relative;
text-decoration: none;
}
nav > a:before{
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -3px;
left: 0;
background-color: #ffffff;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
nav a:hover:before{
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.logo:link{
margin-left: 30px;
margin-top: 20px;
margin-bottom: 20px;
float: left;
}
.heading{
color: white;
text-align: center;
font-size: 30px;
}
.box-name{
color: white;
text-align: center;
border: 6px solid white;
padding: 9px;
font-size: 75px;
margin-bottom: 10px;
letter-spacing: 2px;
margin-top: 10px;
text-transform: uppercase;
font-family: 'Raleway', sans-serif;
font-weight: 500;
}
/*-----------------------------------------------------------ABOUT ME--------------------------------------------------------------------*/
.about-container{
position: relative;
width: 100%;
height: 700px;
background-color: #ededed;
margin-top: 0;
padding: 0;
}
#underline{
width: 500px;
margin: 0 auto;
border-bottom: 5px solid #0A0A0A;
margin-bottom: 40px;
}
.title{
color: #0A0A0A;
text-align: center;
margin-bottom: 0px;
padding-top: 40px;
font-family:'Raleway', sans-serif;
font-size: 55px;
}
.about-me-wrapper{
position: relative;
margin: auto;
width: 1200px;
height: 500px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.details{
position: relative;
width: 370px;
height: 470px;
margin-top: 10px;
}
.details.selfie{
background-image: url(selfie2.png);
background-size: cover;
background-repeat:no-repeat;
border-radius: 10px;
}
#details-hobbies{
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
flex-direction: column;
}
.square{
width: 50%;
height: 50%;
}
.square-cont{
position: relative;
width: 100%;
height: 100%;
}
.ion-cont{
position: absolute;
color: #0A0A0A;
text-align: center;
font-size: 105px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.under-img{
font-size: 25px;
color: #0A0A0A;
margin-top: -5px;
font-family: 'Raleway', sans-serif;
font-weight: 300;
text-align: center;
}
/*-------------------------------------------------------------------SKILLS--------------------------------------------------------------*/
.skills-container{
position: relative;
width: 100%;
height: 700px;
background-color: #e1e1e1;
margin-top: 0;
padding: 0;
margin-top: 0;
padding: 0;
bottom: 0;
}
.title.second{
color: black;
text-align: center;
margin-bottom: 0px;
padding-top: 40px;
font-family:'Raleway', sans-serif;
font-size: 55px;
}
#underline-second{
width: 500px;
margin: 0 auto;
border-bottom: 5px solid black;
margin-bottom: 40px;
}
.skills-wrapper{
position: relative;
margin: auto;
width: 1200px;
height: 500px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.skills{
width: 280px;
height: 470px;
margin-top: 10px;
border-right: 4px solid black;
}
.skills.last{
border: none;
}
.logo{
width: 265px;
height: 340px;
margin-top: 10px;
}
.ion-social-html5{
text-align: center;
font-size: 280px
}
.des{
font-size: 25px;
margin-top: 0px;
color: black;
}
.ion-social-css3{
text-align: center;
font-size: 280px
}
.ion-social-javascript{
text-align: center;
font-size: 280px
}
.ion-social-angular{
text-align: center;
font-size: 280px
}
/*--------------------------------------------------------------------PORTFOLIO---------------------------------------------------------*/
.portfolio-container{
position: relative;
width: 100%;
height: 870px;
background-color: #444444;
top: 0;
padding: 0;
}
#underline-last{
width: 500px;
margin: 0 auto;
border-bottom: 5px solid #f5f5f5;
margin-bottom: 40px;
}
.title.last{
color:#f5f5f5;
}
.portfolio-wrapper{
position: relative;
max-width: 990px;
height: auto;
margin: 0 auto;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.port{
position: relative;
width: 280px;
height: 315px;
margin-top: 15px;
display:inline-block;
background-repeat: no-repeat;
}
.port:hover{
outline: #4169E1 solid 3px;
}
img{
position: relative;
max-width: 100%;
height: 100%;
}
.content-overlay{
background: rgba(0,0,0,0.9);
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.port:hover .content-overlay{
opacity: 1;
}
.content-details {
position: absolute;
text-align: center;
font-family: 'Raleway',sans-serif;
padding-left: 1em;
padding-right: 1em;
width: 100%;
top: 50%;
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.port:hover .content-details{
top: 50%;
left: 50%;
opacity: 1;
}
.content-details h3{
color: #fff;
font-weight: 500;
letter-spacing: 0.15em;
margin-bottom: 0.5em;
text-transform: uppercase;
}
.content-details p{
color: #fff;
font-size: 0.8em;
}
.fadeIn-bottom{
top: 80%;
}
/*--------------------------------------------------------------CONTACT ME---------------------------------------------------------------*/
#contact-container{
position: relative;
width: 100%;
height: 650px;
background: rgba(32,157,229,1);
background: -moz-linear-gradient(left, rgba(32,157,229,1) 0%, rgba(32,108,229,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(32,157,229,1)), color-stop(100%, rgba(32,108,229,1)));
background: -webkit-linear-gradient(left, rgba(32,157,229,1) 0%, rgba(32,108,229,1) 100%);
background: -o-linear-gradient(left, rgba(32,157,229,1) 0%, rgba(32,108,229,1) 100%);
background: -ms-linear-gradient(left, rgba(32,157,229,1) 0%, rgba(32,108,229,1) 100%);
background: linear-gradient(to right, rgba(32,157,229,1) 0%, rgba(32,108,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#209de5', endColorstr='#206ce5', GradientType=1 );
}
#contact-underline{
width: 500px;
margin: 0 auto;
border-bottom: 5px solid #e1e1e1;
margin-bottom: 40px;
padding-top: 20px;
}
#contact-title{
font-family: 'Raleway',sans-serif;
margin-bottom: 10px;
text-align: center;
color: white;
}
.login-page{
width: 400px;
margin: auto;
height: 400px;
}
.form{
position: relative;
background: #FFFFFF;
max-width: 360px;
/*margin: 0 auto 80px;*/
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input{
font-family: "Raleway", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form textarea{
font-family: "Raleway", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Raleway", sans-serif;
text-transform: uppercase;
outline: 0;
background: #1148a0;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
<!-------------------------------------JS--------------------------------->
$(document).ready(function(){
$('.heading').textillate({
in: {
effect: 'fadeInDown',
delay: 1000,
sync: true
}
});
});
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 500);
return false;
}
}
});