社区
学习
工具库
AI工具
休闲
搜索
简体中文
目录
介绍Animate.css
 
用Animate.css 需要2个步骤：
引入Bootstrap轮播组件
构建HTML结构
给轮播加CSS样式
写jQuery代码：
来看doAnimations()函数
第一个标题的动画
轮播的停止功能
轮播幻灯片标题的动画
结论：
首页 web前端 html教程 Bootstrap 轮播加上css3动画，炫酷到底！_html/css_WEB-ITnose

Bootstrap 轮播加上css3动画，炫酷到底！_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Jun 24, 2016 am 11:31 AM

对于网站开发者来说，对展示内容增加一个滑动或者是轮播效果的是非常常见的需求。收费和免费的轮播插件多的是不胜枚举。其中很多提供很多有用的配置选项和动态效果。

很多时候，如果你的项目需要的是一个轻量级的轮播，不需要很多的功能。同时你的项目是采用Bootstrap，（一个最流行的开源前端框架）的话。你可以参考一下bootstrap官方组件。

这篇文章将展示如何在 Bootstrap轮播上添加有趣的动画效果。同时确保这个js组件自由扩展和快速上手。

 

介绍Animate.css

为了让我自己写的动画效果值得称赞，我用一个非常有名的开源的CSS3动画库，被形象的称为animate.css。 Dan Eden写的。

这是让我能专注于手头的任务，而不是解释CSS3动画的代码。然而，如果你想深入的了解，你可以在SitePoint上Craig Buckler写的CSS3动画系列进一步学习。

 

用Animate.css 需要2个步骤：

  1. 在html文档中引入animate.min.css。
  2. 在网页中要加动画的元素上添加animated yourchosenanimation类。

接下来你用Animate.css网站上的看到的关于动画的类名，代替yourchosenanimation。

 

引入Bootstrap轮播组件

Bootstrap轮播组件有三个主要的部分。

  • 轮播指示显示幻灯的页面数量，给用户提供一个视觉线索，并提供可以滑动的导航。
  • 轮播条目，一个叫.carousel-inner的类，包含在外边框的里边。代表每一个独立的滑块。每个图片里边的都可以放置图片。也可以添加标题。还可以在html元素上添加carousel-caption类名。Bootstrap会有自带的样式。我们可以通过这些元素添加动画。
  • 最后，是轮播控制箭头，功能是可以使用户前后滑动。

    • 如果想了解更多Bootstrap轮播组件的详情，可以查看Syed Fazle Rahman的用Bootstrap3创建js轮播效果这篇文章。

    为了简单的展示demo，就先不加图片了。焦点先放在轮播框架上作为动画。

     

    构建HTML结构

    下边是你需要引用到你项目当中的：

  • jQuery
  • Bootstrap’s CSS and JavaScript
  • Animate.css
  • 一个样式表和js文档。

    • 为了加快开发进程，从Bootstrap官网引用了模板和必要的文件。

    下边是Bootstrap轮播代码：

      11.  

      16. This is the caption for slide 1

      19. This is the caption for slide 1
    5.  

    13. This is the caption for slide 2
    18.  

    26. This is the caption for slide 3
    32.  
    35. role="button" data-slide="prev">
    37. Previous
    39.  
    41. role="button" data-slide="next">
    43. Next
    45.  

      47.  

      如果以上代码没有错，你在浏览器打开会看到一个可以运行的轮播，上边的一切不包含一行javascript代码。如果你不添加任何图像，

      只是在css文档给.carousel .item这个类块添加min-height值防止轮播塌陷。

      在轮播标题内的元素添加一个动画属性data-animation，用这个特别的动画类库作为他们的值。

      如果你想从Animate.css库体验其他的动画，用你选择的动画类名代替data-animation属性值。

      我们在javascript代码中用data-animation属性值。

      虽然一个简单的自动轮播在一些案例中可以找到，但是对于这个案例我们有更多的控制。

      在这个方向的第一步，从元素中删除data-ride="carousel"值，把data-ride属性值初始化儿不用写任何代码。但是，我们打算用js代

      码控制轮播，因此，这个data-ride属性就不必要了。

       

      给轮播加CSS样式

      现在根据自己的喜好，发挥创造力给轮播标题添加样式。我将要写的样式规则是能顺畅工作的demo。

      更具体的说，我们增加动画延迟属性的控制。定义每个动画什么时候开始（注意为了简单演示，省略了浏览器前缀）

      1. .carousel-caption h3:first-child {
      2. animation-delay: 1s;
      3. }
      4.  
      5. .carousel-caption h3:nth-child(2) {
      6. animation-delay: 2s;
      7. }
      8.  
      9. .carousel-caption button {
      10. animation-delay: 3s;
      11. }

      上面的代码片段中确保元素动画有序开始。还可以做其他的效果。例如，你可以选择前两个标题同时出现。然后是button按钮。可以自己决定，享受乐趣吧。

       

      写jQuery代码：

      我们开始初始化这个轮播，在你的自定义的javascript 文件中添加一下代码：

      1. var $myCarousel = $('#carousel-example-generic');
      2. // Initialize carousel
      3. $myCarousel.carousel();

      我们已经动态的设置了轮播，接下来，我们来解决这个动画。

      为了使第一个幻灯片的标题有动画，当页面在浏览器加载完后脚本得运行。随后的幻灯片在动画下进入到我们的视野，我们的代码在slide.bs.carousel 事件上运行。意味着同样的代码运行两次：页面加载一次和slide.bs.carousel 事件一次。

      因为我们喜欢遵循不重复的原则，我们打算把我们的代码封装在函数中，并在适当的时候引用。

      代码：

      1. function doAnimations(elems) {
      2. var animEndEv = 'webkitAnimationEnd animationend';
      3. elems.each(function () {
      4. var $this = $(this),
      5. $animationType = $this.data('animation');
      6. // Add animate.css classes to
      7. // the elements to be animated
      8. // Remove animate.css classes
      9. // once the animation event has ended
      10. $this.addClass($animationType).one(animEndEv, function () {
      11. $this.removeClass($animationType);
      12. });
      13. });
      14. }
      15. // Select the elements to be animated
      16. // in the first slide on page load
      17. var $firstAnimatingElems = $myCarousel.find('.item:first')
      18. .find('[data-animation ^= "animated"]');
      19. // Apply the animation using our function
      20. doAnimations($firstAnimatingElems);
      21. // Pause the carousel
      22. $myCarousel.carousel('pause');
      23.  
      24. // Attach our doAnimations() function to the
      25. // carousel's slide.bs.carousel event
      26. $myCarousel.on('slide.bs.carousel', function (e) {
      27. // Select the elements to be animated inside the active slide
      28. var $animatingElems = $(e.relatedTarget)
      29. .find("[data-animation ^= 'animated']");
      30. doAnimations($animatingElems);
      31. });

      上边的代码 我们来分析一下。

       

      来看doAnimations()函数

      这个doAnimations() 函数执行的任务如下。

      它开始通过缓存变量中含有的animationend事件名称的字符串。这个事件告诉我们，你可能已经猜到，当每个动画结束。我们需要这个点的信息，因为每一次的动画结束后，我们将animate.css类移除。如果我们不做移除，轮播的标题将只有一次动画，也就是，只是在第一次轮播显示特定的幻灯片。

      1. var animEndEv = 'webkitAnimationEnd animationend';

      接来下，我们的函数循环遍历每一个我们想要有动画的元素，并获取data-animation的属性值。想上边所说的，这个值包含我们想要添加给元素的Animate.css类，以便有动画效果。

      1. elems.each(function () {
      2. var $this = $(this),
      3. $animationType = $this.data('animation');
      4. // etc...
      5. });

      最后，这个doAnimations() 函数动态添加animate.css类的每个要执行动画的元素上，当动画结束的时候，还附加了一个事件监听。动画结束后我们移除从Animate.css添加的类。这样确保下一个轮播灯片回到当前的区域。（你试着删除这段代码，看看会发生什么）

      1. $this.addClass($animationType).one(animEndEv, function () {
      2. $this.removeClass($animationType);
      3. });

       

      第一个标题的动画

      当页面在浏览器中加载时，我们在第一个幻灯片中动画的内容:

      1. var $firstAnimatingElems = $myCarousel.find('.item:first')
      2. .find("[data-animation ^= 'animated']");
      3. doAnimations($firstAnimatingElems);

      在这个代码中，我们找到第一张灯片，我们希望通过使用data-animation从动画的标题获取动画属性的值。然后我们把变量 $firstAnimatingElems 当做参数传给doAnimations()函数，然后执行函数。

       

      轮播的停止功能

      当第一张灯片内容执行完动画以后，我们停止这个轮播功能。

      1. $myCarousel.carousel('pause');

      这是Bootstrap轮播组件防止不停旋转的特征。不停的旋转，可能会让访客生厌。

      在这种情况下，我建议确保轮播不直接循环到下一个灯片直到所有的动画运行完毕。可以通过设置在初始化代码中的“间隔”选项来控制这个：

      1. $myCarousel.carousel({
      2. interval: 4000
      3. });

      在我看来，一个无限循环轮播标题跳跃每一次的滑动进入视线不理想。

       

      轮播幻灯片标题的动画

      为每张幻灯片的动画轮播标题变得可见需要以下描述的步骤。

      首先，我们在slide.bs.carousel上添加一个事件监听器。

      当幻灯片实例方法被调用时，该事件立即触发。

      1. $myCarousel.on('slide.bs.carousel', function (e) {
      2. // do stuff...
      3. });

      接下来，我们选择当前的灯片，找到我们希望增加动画的元素。下边的代码用了slide.bs.carousel事件的.relatedTarget属性来绑定动画。

      1. var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");

      最后，我们调用doAnimations()函数，把$animatingElems当做参数传进去。

      1. doAnimations($animatingElems);

       

      整体的demo：

      demo

       

      结论：

      正如你们许多人可能知道，轮播有一些需要开发者考虑的问题。

      在这篇文章中，我展示了如何添加一些额外的精力，用几行jQuery和animate.css库用在基本的Bootstrap轮播组件。然而，其他类似的css库。或者css3动画，我们会做的一样好。

      你能建议添加一些自定义启动Bootstrap轮播的其它方式吗？我期待你的反馈意见。

      本站声明
      本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

      热AI工具

      Undresser.AI Undress

      Undresser.AI Undress

      人工智能驱动的应用程序，用于创建逼真的裸体照片

      AI Clothes Remover

      AI Clothes Remover

      用于从照片中去除衣服的在线人工智能工具。

      Undress AI Tool

      Undress AI Tool

      免费脱衣服图片

      Clothoff.io

      Clothoff.io

      AI脱衣机

      Video Face Swap

      Video Face Swap

      使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

      显示更多

      热门文章

      <🎜>：种植花园 - 完整的突变指南
      3 周前 By DDD
      <🎜>：泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
      3 周前 By 尊渡假赌尊渡假赌尊渡假赌
      如何修复KB5055612无法在Windows 10中安装？
      3 周前 By DDD
      北端：融合系统，解释
      3 周前 By 尊渡假赌尊渡假赌尊渡假赌
      蓝王子：如何到达地下室
      1 个月前 By DDD
      显示更多

      热工具

      记事本++7.3.1

      记事本++7.3.1

      好用且免费的代码编辑器

      SublimeText3汉化版

      SublimeText3汉化版

      中文版，非常好用

      禅工作室 13.0.1

      禅工作室 13.0.1

      功能强大的PHP集成开发环境

      Dreamweaver CS6

      Dreamweaver CS6

      视觉化网页开发工具

      SublimeText3 Mac版

      SublimeText3 Mac版

      神级代码编辑软件(SublimeText3)

      显示更多

      热门话题

      Java教程
      1664
      14
      CakePHP 教程
      1423
      52
      Laravel 教程
      1318
      25
      PHP教程
      1268
      29
      C# 教程
      1248
      24
      显示更多
      Related knowledge
      了解HTML，CSS和JavaScript：初学者指南 了解HTML，CSS和JavaScript：初学者指南 Apr 12, 2025 am 12:02 AM

      WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

      HTML：结构，CSS：样式，JavaScript：行为 HTML：结构，CSS：样式，JavaScript：行为 Apr 18, 2025 am 12:09 AM

      HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

      HTML，CSS和JavaScript的未来：网络开发趋势 HTML，CSS和JavaScript的未来：网络开发趋势 Apr 19, 2025 am 12:02 AM

      HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

      HTML的未来：网络设计的发展和趋势 HTML的未来：网络设计的发展和趋势 Apr 17, 2025 am 12:12 AM

      HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

      HTML与CSS vs. JavaScript：比较概述 HTML与CSS vs. JavaScript：比较概述 Apr 16, 2025 am 12:04 AM

      HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

      HTML：建立网页的结构 HTML：建立网页的结构 Apr 14, 2025 am 12:14 AM

      HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

      HTML的角色：构建Web内容 HTML的角色：构建Web内容 Apr 11, 2025 am 12:12 AM

      HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

      HTML：是编程语言还是其他？ HTML：是编程语言还是其他？ Apr 15, 2025 am 12:13 AM

      HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

      See all articles