在本地环境中成功运行CSS/JS动画：WOW.js与其他前端库的集成指南-html教程-PHP中文网

在本地环境中成功运行CSS/JS动画：WOW.js与其他前端库的集成指南

本文旨在解决前端动画在本地开发环境中运行时常见的“库未定义”问题，特别是针对WOW.js动画库。我们将详细介绍如何正确引入Animate.css、jQuery以及WOW.js等核心依赖，并提供完整的HTML、CSS和JavaScript代码示例，确保动画在任何IDE中都能正常工作。文章还将探讨依赖引入顺序、CDN与本地文件选择等关键注意事项，帮助开发者顺利实现基于滚动的动画效果。

1. 理解前端动画依赖与常见问题

在web开发中，为了实现复杂的动画效果，我们经常会依赖各种前端库。例如，wow.js是一个流行的javascript库，它能够检测元素何时进入视口，并结合animate.css库为其应用css动画，从而创建出“滚动时显示”的动态效果。然而，当我们将这些动画从在线平台（如codepen）迁移到本地开发环境时，常常会遇到“xxx is not defined”的错误。这通常是因为本地环境中缺少了必要的外部css样式表或javascript库的引用。

要确保动画正常运行，我们需要明确其背后依赖：

WOW.js: 核心库，负责检测滚动和触发动画。
Animate.css: 一个预设的CSS动画库，WOW.js会利用其中的动画类（如fadeInRight）来为元素添加动画效果。
jQuery: 一个广泛使用的JavaScript库，简化了DOM操作、事件处理、动画等。虽然WOW.js本身不强制依赖jQuery，但许多前端项目（包括本示例中的作者信息悬停效果）会用到它。
字体库: 如Google Fonts和Font Awesome，用于美化文本和提供图标。

本教程将以一个“工作经验时间线”和“作者信息”的动画示例为例，详细阐述如何正确引入这些依赖，并构建一个完整的、可运行的页面。

2. 引入必要的外部资源

成功运行基于WOW.js的动画，核心在于正确引入所有必需的CSS和JavaScript文件。这些文件通常通过CDN（内容分发网络）链接或下载到本地项目中使用。

以下是本示例所需的全部外部资源链接，应放置在HTML文档的<head>或<body>标签内，并遵循特定的顺序：

立即学习“前端免费学习笔记（深入）”；

<!-- 字体样式表 -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900&amp" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin,latin-ext" rel="stylesheet"/>

<!-- 图标字体库 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>

<!-- Animate.css 动画样式表 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet"/>

<!-- jQuery 库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<!-- WOW.js 库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

登录后复制

引入位置建议：

集简云

软件集成平台，快速建立企业自动化与智能化

查看详情

CSS文件：通常放置在<head>标签内，以便页面加载时样式能尽快应用，避免内容闪烁（FOUC）。
JavaScript文件：
- jQuery: 建议放置在<body>标签的末尾，</body>关闭标签之前。这样可以确保HTML内容先加载，JS脚本再执行，避免阻塞页面渲染。
- WOW.js: 必须在jQuery之后引入，因为本示例中的自定义JS代码（包括WOW.js的初始化）可能会依赖jQuery。
- 自定义脚本: 你的自定义JavaScript代码（如new WOW().init();和jQuery的hover效果）也应放在所有依赖库之后，通常在<body>标签的末尾。

3. 构建HTML结构

HTML是页面的骨架，它定义了内容的结构和层次。为了实现时间线和作者信息动画，我们需要特定的HTML结构，并为需要动画的元素添加wow类和具体的Animate.css动画类（例如fadeInRight）。

<div id="workexperience" class="sectionClass">
  <div class="row ">
    <div class="sectiontitle">
      <h2>Work experience</h2>
      <span class="headerLine"></span>
    </div>
    <div class="fullWidth eight columns">
      <ul class="cbp_tmtimeline">
        <!-- 时间线项目示例，注意 wow fadeInRight animated 类 -->
        <li>
          <div class="cbp_tmicon cbp_tmicon-phone">
            <i class="faPra fa-briefcase"></i>
          </div>
          <div class="cbp_tmlabel wow fadeInRight animated">
            <h3>Web developer</h3>
            <div class="date">
              <i class="fa fa-calendar"></i>April 2014 - Current
            </div>
            <h4><i class="fa fa-flag"></i>Davic Company, Bratislava</h4>
            <p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit obcaecati ipsa quae, iusto laudantium qui, nisi eum modi perspiciatis quasi facilis corporis iure soluta enim incidunt itaque aspernatur sequi tempora.</p>
          </div>
        </li>
        <!-- 更多时间线项目... -->
        <li>
          <div class="cbp_tmicon cbp_tmicon-screen">
            <i class="faPra fa-briefcase"></i>
          </div>
          <div class="cbp_tmlabel wow fadeInRight animated">
            <h3>Web designer</h3>
            <h4><i class="fa fa-flag"></i>Fannous Company, Prague</h4>
            <div class="date"><i class="fa fa-calendar"></i>June 2012 - April 2014</div>
            <p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt quasi perspiciatis, aliquid sed maiores accusamus. Adipisci quidem nostrum quos quae doloremque esse a, ipsum earum, recusandae omnis dignissimos et sint.</p>
          </div>
        </li>
        <li>
          <div class="cbp_tmicon cbp_tmicon-mail">
            <i class="faPra fa-briefcase"></i>
          </div>
          <div class="cbp_tmlabel wow fadeInRight animated">
            <h3>Web designer</h3>
            <h4><i class="fa fa-flag"></i>Techixs Company, London</h4>
            <div class="date"><i class="fa fa-calendar"></i>November 2009 - June 2012</div>
            <p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla labore atque alias ipsa, nam quod rerum repellat cumque, aliquam sequi vitae voluptatibus cum soluta incidunt tempore accusamus eius sed excepturi!Lorem ipsum dolor sit amet,
              consectetur adipisicing elit. Tempora natus veritatis aperiam repellendus dolor vel, expedita assumenda eos, mollitia quae ullam esse voluptas vero. Dolores culpa eaque vitae eum quibusdam?</p>

          </div>
        </li>
        <li>
          <div class="cbp_tmicon cbp_tmicon-phone">
            <i class="faPra fa-briefcase"></i>
          </div>
          <div class="cbp_tmlabel wow fadeInRight animated">
            <h3>Freelancer</h3>
            <div class="date"><i class="fa fa-calendar"></i>Januar 2006 - November 2009</div>
            <p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse iusto, possimus hic at quisquam, incidunt illo asperiores et nobis, qui nulla consequatur molestiae quibusdam expedita dignissimos? Iste eum velit quos.</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

<footer>
  <div class="about-me-img">
    <a href="http://jakubtursky.studenthosting.sk/?lang=en">
      <img src="https://www.mediafire.com/convkey/722e/qk13jrjdq7z45k1zg.jpg" alt="Jakub Turský" width="110px" height="110px">
    </a>
    <div class="authorWindowWrapper">
      <div class="authorWindow">
        <p>Work experiences
          <br> Created by <a href="http://jakubtursky.studenthosting.sk/?lang=en"><strong>Jakub Turský</strong></a>
          <br> For next info about me you can visit me site ( click on my image, name, or copy url www.jakubtursky.studenthosting.sk/?lang=en )
          <br>
        </p>
      </div>
    </div>
  </div>
</footer>

登录后复制

4. 编写CSS样式

CSS负责页面的视觉呈现，包括布局、颜色、字体和响应式设计。本示例的CSS代码包含了大量的样式规则，用于构建时间线、设置字体、定义响应式行为等。这些样式应保存为一个独立的.css文件（例如style.css），并通过<link rel="stylesheet" href="path/to/style.css">引入到HTML文档的<head>中。

/* 省略部分通用样式，仅展示与动画和布局相关的关键部分 */
body {
  font-family: Open Sans, "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #666;
  position: relative;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/* ... 其他通用布局样式 ... */

/********************************/
/*  SECTION WORK EXPERIENCE     */
/********************************/
.cbp_tmtimeline {
  margin: 60px 30px 0 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.cbp_tmtimeline:before {
  content: '';
  position: absolute;
  top: 3%;
  bottom: 0;
  width: 10px;
  background: #324454;
  left: 13%;
  height: 100%;
}

/* ... 时间线项目样式 ... */

.cbp_tmtimeline > li .cbp_tmlabel {
  margin: 0 0 15px 25%;
  background: rgba(50, 68, 84, 1);
  color: #FFF;
  padding: 30px;
  font-size: 1.2em;
  font-weight: 300;
  line-height: 1.4;
  font-family: 'Open Sans';
  position: relative;
  border-radius: 5px;
  min-height: 150px;
}

/* ... 更多时间线细节样式 ... */

/********************************/
/*  AUTHOR LINK                 */
/********************************/
footer {
  z-index: 100;
  padding-top: 50px;
  padding-bottom: 50px;
  width: 100%;
  bottom: 0;
  left: 0;
}

footer p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  opacity: 0; /* 初始透明度为0，用于动画 */
  -webkit-transform: translateX(-200px); /* 初始位置偏左，用于动画 */
  transform: translateX(-200px);
  transition: all 500ms ease; /* 过渡效果 */
  /* ... 其他文本样式 ... */
}

.authorWindowWrapper {
  display: none; /* 初始隐藏，通过JS显示 */
  left: 110px;
  bottom: -20px;
  padding-left: 30px;
  position: absolute;
}

.trans {
  opacity: 1; /* 动画结束时的透明度 */
  -webkit-transform: translateX(0px); /* 动画结束时的位置 */
  transform: translateX(0px);
  transition: all 500ms ease; /* 确保过渡生效 */
}

/* ... 响应式媒体查询 ... */

登录后复制

5. 编写JavaScript逻辑

JavaScript是实现交互和动态效果的关键。本示例包含两部分JS逻辑：WOW.js的初始化和作者信息区域的悬停效果。

// 初始化 WOW.js
// 这会扫描HTML中带有'wow'类的元素，并在它们进入视口时应用Animate.css定义的动画。
new WOW().init();

/* AUTHOR LINK - 作者信息悬停效果 */
// 当鼠标悬停在 '.about-me-img img' 或 '.authorWindowWrapper' 元素上时
$('.about-me-img img, .authorWindowWrapper').hover(function() {
  // 停止任何当前动画，然后快速淡入 '.authorWindowWrapper'
  // 并在其内部的 'p' 标签上添加 'trans' 类以触发CSS过渡动画
  $('.authorWindowWrapper').stop().fadeIn('fast').find('p').addClass('trans');
}, function() {
  // 当鼠标移出时，停止动画并隐藏 '.authorWindowWrapper'
  // 同时移除 'p' 标签上的 'trans' 类，恢复初始状态
  $('.authorWindowWrapper').stop().css('display', 'none').find('p').removeClass('trans');
});

登录后复制

代码解释：

new WOW().init();: 这是WOW.js库的入口点。调用此方法后，WOW.js会监听页面的滚动事件，并检查带有wow类的元素是否进入了视口。一旦进入，它就会将Animate.css中指定的动画类（如fadeInRight）添加到元素上，从而触发动画。
$('.about-me-img img, .authorWindowWrapper').hover(...): 这是一个jQuery方法，用于处理鼠标悬停事件。
- 第一个函数在鼠标进入时执行：$('.authorWindowWrapper').stop().fadeIn('fast').find('p').addClass('trans'); 使作者信息窗口淡入，并为其中的段落添加trans类，该类通过CSS的transition属性实现文本的滑动和透明度变化。
- 第二个函数在鼠标移出时执行：$('.authorWindowWrapper').stop().css('display', 'none').find('p').removeClass('trans'); 隐藏作者信息窗口，并移除trans类，以便下次悬停时动画能重新触发。

6. 完整HTML文件结构示例

将上述所有部分整合到一个HTML文件中，形成一个完整的可运行页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工作经验时间线与作者信息动画</title>

    <!-- 字体样式表 -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900&amp" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin,latin-ext" rel="stylesheet"/>

    <!-- 图标字体库 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>

    <!-- Animate.css 动画样式表 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet"/>

    <!-- 自定义样式表 (假设您将上述CSS保存为 style.css) -->
    <style>
        /* 将第4节中的CSS内容粘贴到此处，或链接外部CSS文件 */
        body {
            font-family: Open Sans, "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
            font-size: 13px;
            color: #666;
            position: relative;
            -webkit-font-smoothing: antialiased;
            margin: 0;
        }

        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td {
            margin: 0;
            padding: 0;
            font-size: 13px;
            direction: ltr;
        }

        .sectionClass {
            padding: 80px 0px 50px 0px;
            position: relative;
            display: block;
            background: rgb(249, 249, 249);
        }

        .row {
            width: 980px;
            height: 100%;
            max-width: 100%;
            margin: 0 auto;
        }

        .row:before,
        .row:after {
            content: "";
            display: table;
        }

        .sectiontitle {
            background-position: center;
            text-align: center;
            min-height: 20px;
        }

        .sectiontitle h2 {
            font-size: 30px;
            color: #222;
            margin-bottom: 0px;
            padding-right: 10px;
            padding-left: 10px;
        }

        .headerLine {
            width: 160px;
            height: 2px;
            display: inline-block;
            background: #101F2E;
        }

        .fullWidth {
            width: 100%;
            display: table;
            float: none;
            padding: 0;
            min-height: 1px;
            height: 100%;
            position: relative;
        }
        /********************************/
        /*  SECTION WORK EXPERIENCE
        ********************************/

        #work-experience .sectiontitle .headerLine {
            width: 280px;
        }

        #work-experience .headerline {
            width: 280px;
        }

        .cbp_tmtimeline {
            margin: 60px 30px 0 0;
            padding: 0;
            list-style: none;
            position: relative;
        }

        .cbp_tmtimeline:before {
            content: '';
            position: absolute;
            top: 3%;
            bottom: 0;
            width: 10px;
            background: #324454;
            left: 13%;
            height: 100%;
        }

        .cbp_tmtimeline li:last-child:before {
            content: initial;
        }

        .cbp_tmtimeline > li .cbp_tmtime {
            display: block;
            width: 25%;
            padding-right: 100px;
            position: absolute;
        }

        .cbp_tmtimeline > li .cbp_tmtime span {
            display: block;
            text-align: right;
        }

        .cbp_tmtimeline > li .cbp_tmtime span:first-child {
            font-size: 0.9em;
            color: #bdd0db;
        }

        .cbp_tmtimeline > li .cbp_tmtime span:last-child {
            font-size: 2.9em;
            color: #3594cb;
        }

        .cbp_tmtimeline > li:nth-child

登录后复制

以上就是在本地环境中成功运行CSS/JS动画：WOW.js与其他前端库的集成指南的详细内容，更多请关注php中文网其它相关文章！