- 首页
- 前端开发
- 如何一张一张地为 Bootstrap 4 卡制作动画?
如何一张一张地为 Bootstrap 4 卡制作动画?
[英] How to animate Bootstrap 4 cards one by one?
本文介绍了如何一张一张地为 Bootstrap 4 卡制作动画?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要帮助在 bootstrap 4 中制作卡片动画.
我有 4 个卡片盒，如下图所示，这是一个简单的引导 4 张卡片组，带有 4 个卡片盒.
每当用户滚动到此部分时，我都会尝试从右侧一个一个地滑动每个框.如何实现?
我不是要制作滑块/旋转木马.
作为参考检查这个codepen
4 个盒子每个都需要从右边来.在上面的代码笔中，所有的东西都是从左边开始的.当用户滚动到该部分时，我需要它从右侧和一个接一个.
这是我使用的 boostrap 4 卡的代码
<div class="card-deck"><div class="card card-detail card-text1"><img class="card-img-top img-fluid" src="images/Analytics.png" alt="卡片图片上限"><div class="card-body"><h5 class="card-title text-center">分析</h5><p class="card-text text-center text-justify ">我们惊人的跟踪平台允许您查看流量的深入分析，我们的仪表板提供专有报告和可操作的统计数据，以分析和优化您的结果实时.每次点击都会被计算在内.</p>
<div class="card card-detail card-text1 "><img class="card-img-top img-fluid" src="images/Offer-Well.png" alt="卡片图片上限"><div class="card-body"><h5 class="card-title text-center">Offer Well</h5><p class="card-text text-center text-justify">我们的 OfferWall 为您的用户提供了在一个位置赚取的最多选择.您可以在几分钟内在您的网站上部署一个完整的基于奖励的货币化解决方案，因为它非常容易和简单.</p>
<div class="card card-detail card-text1 "><img class="card-img-top img-fluid" src="images/Inventory.png" alt="卡片图片上限"><div class="card-body"><h5 class="card-title text-center">库存</h5><p class="card-text text-center text-justify ">我们的系统中有 2,000 多个活动广告系列，我们的算法将为您的展示位置找到最好的转换广告.您的用户可以通过观看视频、下载应用程序、进行简短调查和完成其他快速优惠来轻松赚钱.</p>
<div class="card card-detail card-text1"><img class="card-img-top img-fluid" src="images/Support.png" alt="卡片图片上限"><div class="card-body"><h5 class="card-title text-center">支持</h5><p class="card-text text-center text-justify">每个发布商都分配了一个专门的客户经理，可以帮助您进行集成以及各个方面的工作.此外，如果您的用户在运行时遇到问题，可以与我们联系.</p>
<!-- 卡片行在此结束-->
解决方案
你试过这个插件了吗 aosjs?要制作动画，您只需要将特定元素与有效的 aos 属性绑定(请参阅下文)
<div data-aos="fade-up"></div>
如果你想动画一次，那么你可以添加 data-aos-once 属性
<div data-aos="fade-up" data-aos-once="true"></div>
等等，在这里检查插件http://michalsnik.github.io/aos/
更新:要使每个元素显示不同的持续时间，您可以添加 data-aos-delay
<div id="animate1" data-aos="fade-up" data-aos-once="true" data-aos-delay="500"></div><div id="animate2" data-aos="fade-up" data-aos-once="true" data-aos-delay="1000"></div><div id="animate3" data-aos="fade-up" data-aos-once="true" data-aos-delay="1500"></div>
从上面的示例可以看出，每个元素都有 500 毫秒的延迟.
注意:确保先初始化插件
I need help to animate cards in bootstrap 4.
I have 4 card boxes as shown in image below, it's a simple bootstrap 4 cards deck with 4 card boxes.
I am trying to slide each boxes one by one from right whenever user scroll to this section. how to achieve it?
I am not trying to make slider/carousel.
For reference check this codepen
4 boxes each needs to come from right.
In the codepen above all comes at once and from left.
I need it from right and one by one, when user scrolls to the section.
here is the code of boostrap 4 cards i am using
<!-- Card Row starts here -->
<div class="card-deck ">
<div class="card card-detail card-text1">
<img class="card-img-top img-fluid" src="images/Analytics.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">Analytics</h5>
<p class="card-text text-center text-justify ">Our amazing tracking platform allows you to view in-depth analytics for your traffic as well as our dashboard provides proprietary reporting with actionable statistics to analyze and optimize your results in real-time. Every click gets counted.</p>
</div>
</div>
<div class="card card-detail card-text1 ">
<img class="card-img-top img-fluid" src="images/Offer-Well.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">Offer Well</h5>
<p class="card-text text-center text-justify">Our OfferWall gives your users the most options to earn in one location. You can deploy a complete rewards-based monetization solution on your site in minutes as it's quite easy and simple.</p>
</div>
</div>
<div class="card card-detail card-text1 ">
<img class="card-img-top img-fluid" src="images/Inventory.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">Inventory</h5>
<p class="card-text text-center text-justify ">With over 2,000 active campaigns in our system, our algorithms will find the best converting ones for your placement. Your users have the power to easily earn by watching videos, downloading apps, taking short surveys, and completing other quick offers. </p>
</div>
</div>
<div class="card card-detail card-text1">
<img class="card-img-top img-fluid" src="images/Support.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">Support</h5>
<p class="card-text text-center text-justify">Each publisher is assigned a dedicated account manager that can help you with integration as well as in every aspects. Moreover, your user can contact us if they're running with issues.</p>
</div>
</div>
</div>
<!-- Card Row Ends here -->
解决方案
Have you tried this plugin aosjs? To animate, you just need to bind the specific elements with the valid aos attributes (refer below)
<div data-aos="fade-up"></div>
if you want to animate it once then you can add data-aos-once attribute
<div data-aos="fade-up" data-aos-once="true"></div>
and so on, check the plugin here http://michalsnik.github.io/aos/
Update: to make each of the element, shows on different duration, you can add data-aos-delay
<div id="animate1" data-aos="fade-up" data-aos-once="true" data-aos-delay="500"></div>
<div id="animate2" data-aos="fade-up" data-aos-once="true" data-aos-delay="1000"></div>
<div id="animate3" data-aos="fade-up" data-aos-once="true" data-aos-delay="1500"></div>
as seen from above sample, each element has 500ms delay.
Note: make sure you initialize the plugin first
<script>
AOS.init();
</script>
这篇关于如何一张一张地为 Bootstrap 4 卡制作动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
