Vanilla-Tilt.js 使用教程

Vanilla-Tilt.js 使用教程

vanilla-tilt.jsA smooth 3D tilt javascript library.项目地址:https://gitcode.com/gh_mirrors/va/vanilla-tilt.js

1. 项目的目录结构及介绍

Vanilla-Tilt.js 项目的目录结构如下：

vanilla-tilt.js/
├── dist/
│   ├── vanilla-tilt.babel.js
│   ├── vanilla-tilt.babel.min.js
│   ├── vanilla-tilt.js
│   └── vanilla-tilt.min.js
├── src/
│   └── vanilla-tilt.js
├── examples/
│   ├── basic/
│   └── glare/
├── .babelrc
├── .gitignore
├── LICENSE
├── package.json
├── README.md
└── webpack.config.js

目录介绍：

• dist/: 包含编译后的文件，可以直接在项目中使用。
  • vanilla-tilt.babel.js: 使用 Babel 编译的完整版本。
  • vanilla-tilt.babel.min.js: 使用 Babel 编译的压缩版本。
  • vanilla-tilt.js: 未压缩的完整版本。
  • vanilla-tilt.min.js: 压缩的完整版本。
• src/: 包含源代码文件。
  • vanilla-tilt.js: 源代码文件。
• examples/: 包含示例代码。
  • basic/: 基本示例。
  • glare/: 带有光晕效果的示例。
• .babelrc: Babel 配置文件。
• .gitignore: Git 忽略文件配置。
• LICENSE: 项目许可证。
• package.json: 项目依赖和脚本配置。
• README.md: 项目说明文档。
• webpack.config.js: Webpack 配置文件。

2. 项目的启动文件介绍

项目的启动文件主要是 dist/ 目录下的文件，推荐使用 vanilla-tilt.min.js 或 vanilla-tilt.babel.min.js 以减少文件大小，提高加载速度。

使用方法：

在 HTML 文件中引入：

<script type="text/javascript" src="path/to/vanilla-tilt.min.js"></script>

然后在需要添加倾斜效果的元素上添加 data-tilt 属性：

<div class="your-element" data-tilt></div>

3. 项目的配置文件介绍

项目的配置文件主要是 package.json 和 webpack.config.js。

package.json

package.json 文件包含了项目的依赖、脚本和其他元数据。

{
  "name": "vanilla-tilt",
  "version": "1.7.2",
  "description": "A smooth 3D tilt javascript library.",
  "main": "dist/vanilla-tilt.js",
  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch",
    "prepublishOnly": "npm run build"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/micku7zu/vanilla-tilt.js.git"
  },
  "keywords": [
    "tilt",
    "vanilla-js",
    "javascript",
    "60fps",
    "smooth",
    "tilt-js",
    "3d",
    "tilt-effect",
    "tilt-library"
  ],
  "author": "Mick",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/micku7zu/vanilla-tilt.js/issues"
  },
  "homepage": "https://github.com/micku7zu/vanilla-tilt.js#readme",
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "babel-loader": "^8.1.0",
    "webpack": "^5.4.0",
    "webpack-cli": "^4.2.0"
  }

vanilla-tilt.jsA smooth 3D tilt javascript library.项目地址:https://gitcode.com/gh_mirrors/va/vanilla-tilt.js