vue3 项目引入vanilla-tilt

最新推荐文章于 2024-05-11 09:56:38 发布

MW0309

最新推荐文章于 2024-05-11 09:56:38 发布

阅读量609

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_42222342/article/details/130491354

版权

文章介绍了如何在Vue项目中集成vanilla-tilt库，通过npm安装、导入库、选择DOM元素和设置参数来实现元素的倾斜效果。示例代码展示了对多个.box-item类的元素应用tilt效果，同时提供了对应的CSS样式以增强视觉体验。

摘要由CSDN通过智能技术生成

文档地址

https://micku7zu.github.io/vanilla-tilt.js/

GitHub地址

https://github.com/gijsroge/tilt.js

第一步引入vanilla-tilt包

npm install vanilla-tilt

第二步页面引入

import VanillaTilt from 'vanilla-tilt';

第三步页面声明一个classdom节点

  <div class="box-item">
        <img src="../public/astrocat.png">
        <h4>测试</h4>
        <p>111</p>
      </div>

第四部使用vanilla-tilt

 VanillaTilt.init(document.querySelector(".box-item"), {
		max: 50,
		speed: 400
	});
	
	//It also supports NodeList
	VanillaTilt.init(document.querySelectorAll(".box-item"));

完整代码

<script setup lang="ts">
import { onMounted } from "vue";
import VanillaTilt from 'vanilla-tilt';

onMounted(() => {
  VanillaTilt.init(document.querySelector(".box-item"), {
		max: 50,
		speed: 400
	});
	
	//It also supports NodeList
	VanillaTilt.init(document.querySelectorAll(".box-item"));
});

</script>

<template>
  <div>
    <div class="box">
      <div class="box-item">
        <img src="../public/astrocat.png">
        <h4>测试</h4>
        <p>111</p>
      </div>
      <div class="box-item">
        <img src="../public/astrocat.png">
        <h4>测试</h4>
        <p>111</p>
      </div>
      <div class="box-item">
        <img src="../public/astrocat.png">
        <h4>测试</h4>
        <p>111</p>
      </div>
      <div class="box-item">
        <img src="../public/astrocat.png">
        <h4>测试</h4>
        <p>111</p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.box{
  width: 60%;
  height: 400px;
  display: flex;
  margin: 100px auto;
}
.box-item{
  width: 20%;
  height: 100%;
  margin-right: 20px;
  background-color: #171b22;
  border: 1px solid #31363d;
  border-radius: 10px;
  text-align: center;
  transform-style: preserve-3d;
  transform: perspective(1000px);
}
.box-item img{
  width: 80%;
  margin-top: -40px;
  transform: translateZ(30px)
}
.box-item h4{
  color: #e6ecf2;
  margin-top: 20px;
  transform: translateZ(30px)
}
.box-item p{
  margin: 35px;
  font-size: 12px;
  color: #7f859c;
  text-align: left;
  transform: translateZ(30px)
}
</style>