如何在内容滚动到视图中时激活动画
在本教程中学习如何使用 Bootstrap 和 jQuery 插件 Web 开发工具在内容滚动到视图时激活动画。
介绍
我看到的关于 Web 开发最常见的问题之一是：当内容滚动到视图中时如何激活动画？老实说，我花了几天时间才找到最佳解决方案。找到解决方案很容易，但如果您要开发一个模板并出售它，那么您就会遇到一些问题。大多数有助于解决此问题的 jQuery 插件对于商业用途都不是免费的。因此您需要购买许可证。在本教程中，我将展示使用 Bootstrap 和免费 jQuery 插件使其工作的最佳方法。开发产品后，您可以自由地将其用于商业用途。以下是我们需要执行的步骤：
创建带有描述的进度条
让我们创建一个进度条。在这种情况下，我们的最终结果将看起来像模板上的关于我们的部分。
我们将从 HTML 开始。
<section id="about-us">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">About Us</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="about-info">
<h2>About us</h2>
<p style="color: #333">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.Ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p style="color: #333">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="col-sm-6">
<h3 class="progress-title">HTML5</h3>
<div class="progress">
<div class="progress-bar" style="background-color: #34b1c4; width: 90%;">
<div class="progress-value">90%</div>
</div>
</div>
<h3 class="progress-title">JS</h3>
<div class="progress">
<div class="progress-bar" style="background-color: #34b1c4; width: 45%;">
<div class="progress-value">45%</div>
</div>
</div>
<h3 class="progress-title">CSS3</h3>
<div class="progress">
<div class="progress-bar" style="background-color: #34b1c4; width: 78%;">
<div class="progress-value">78%</div>
</div>
</div>
</div>
</div>
</div>
</section>
为进度条设置样式
让我们设计一下它的样式，看看它会是什么样子。
#about-us {
background-color: white;
padding: 60px 0;
}
#about-us h2 {
margin-top: 0;
color: #333;
}
#about-us .lead {
font-size: 16px;
margin-bottom: 10px;
}
#about-us h1 {
margin-bottom: 30px;
}
.progress-title{
font-size: 16px;
font-weight: 700;
color: #000;
margin: 0 0 10px 0;
}
.progress{
height: 20px;
line-height: 15px;
border-radius: 5px;
background: #f0f0f0;
margin-bottom: 30px;
box-shadow: none;
overflow: visible;
}
.progress-bar{
position: relative;
border-radius: 0;
opacity: 0;
}
.progress .progress-value{
display: block;
font-size: 13px;
color: #fff;
position: absolute;
top: 0;
right: 8px;
}
@-webkit-keyframes animate-positive{
0% { width: 0%; }
}
@keyframes animate-positive{
0% { width: 0%; }
}
您可能注意到，在上面的脚本中，我们创建了一个关键帧来为进度条制作动画。此部分如下所示。
正确制作动画过程
目前，它将以动画形式呈现，直到您滚动到该部分。为了解决这个问题，我们将使用可免费使用的Waypoints jQuery 插件。下载 Waypoints 并在您的 js 文件夹中添加jquery.waypoints.min.js文件。
完成后将此链接包含在您的index.html中
<script src="js/jquery.waypoints.min.js"></script>
然后让我们在你的js文件中写入此代码。
$(document).ready(function() {
$('.progress-bar').waypoint(function() {
$('.progress-bar').css({
animation: "animate-positive 2s",
opacity: "1"
});
}, { offset: '75%' });
百分比偏移是指窗口高度的百分比。当元素顶部距离窗口顶部 75% 时，将触发“75%”偏移。此时将激活动画并填充进度条。很简单吧？
添加统计计数器部分以使其更具吸引力
现在作为奖励，我们将添加统计计数器部分。
让我们编写一个 HTML 部分。
<section id="features" class="counter">
<div class="container">
<div class="row count">
<div class="col-sm-3 col-xs-6">
<i class="fa fa-user"></i>
<h2 class="statistic-counter">190</h2>
<p>Happy Clients</p>
</div>
<div class="col-sm-3 col-xs-6">
<i class="fa fa-desktop"></i>
<h2 class="statistic-counter">374</h2>
<p>Modern Websites</p>
</div>
<div class="col-sm-3 col-xs-6">
<i class="fa fa-trophy"></i>
<h2 class="statistic-counter"935</h2>
<p>WINNING AWARDS</p>
</div>
<div class="col-sm-3 col-xs-6">
<i class="fa fa-comment-o"></i>
<h2 class="statistic-counter">427</h2>
<p>Fast Support</p>
</div>
</div>
</div>
</section><!--/#features-->
现在，就像我们对进度条所做的那样，需要设置计数器部分的样式
#features {
text-align: center;
}
#features i {
font-size: 48px;
}
#features h3 {
margin-top: 15px;
font-size: 30px;
margin-bottom: 7px;
color: #fff;
}
它看起来是这样的。
动画统计计数器
为了使计数器工作，我们需要集成Counter-Up jQuery 插件。
我们需要下载jquery.counterup.min.js，并将其添加到 js 文件夹中，然后在index.html中包含此行
<script src="js/jquery.counterup.min.js"></script>
然后写下这几行代码
jQuery('.statistic-counter').counterUp({
delay: 10,
time: 2000
});
结论
一切都完成了。您可以自定义它并将其包含在您的模板中。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
阅读全文
请先 登录后发表评论 ~