跟随鼠标3D倾斜

最新推荐文章于 2025-05-09 19:45:00 发布

一个西瓜大小

最新推荐文章于 2025-05-09 19:45:00 发布

阅读量1.1k

点赞数 18

文章标签：计算机外设 3d 前端

本文链接：https://blog.csdn.net/HeyOldThiefSima/article/details/135510331

版权

这篇文章详细介绍了VanillaTilt.js库，一个用于创建动态倾斜效果的轻量级JavaScript类，支持鼠标事件、设备方向感应器（gyroscope）以及自定义设置。它允许用户控制元素的倾斜角度、速度、眩光效果等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建一个vanilla-tilt.js文件
将一下代码黏贴进去

export var VanillaTilt = (function () {
  'use strict';

  /**
   * Created by Sergiu Șandor (micku7zu) on 1/27/2017.
   * Original idea: https://github.com/gijsroge/tilt.js
   * MIT License.
   * Version 1.7.2
   */

  class VanillaTilt {
    constructor(element, settings = {}) {
      if (!(element instanceof Node)) {
        throw ("Can't initialize VanillaTilt because " + element + " is not a Node.");
      }

      this.width = null;
      this.height = null;
      this.clientWidth = null;
      this.clientHeight = null;
      this.left = null;
      this.top = null;

      // for Gyroscope sampling
      this.gammazero = null;
      this.betazero = null;
      this.lastgammazero = null;
      this.lastbetazero = null;

      this.transitionTimeout = null;
      this.updateCall = null;
      this.event = null;

      this.updateBind = this.update.bind(this);
      this.resetBind = this.reset.bind(this);

      this.element = element;
      this.settings = this.extendSettings(settings);

      this.reverse = this.settings.reverse ? -1 : 1;
      this.glare = VanillaTilt.isSettingTrue(this.settings.glare);
      this.glarePrerender = VanillaTilt.isSettingTrue(this.settings["glare-prerender"]);
      this.fullPageListening = VanillaTilt.isSettingTrue(this.settings["full-page-listening"]);
      this.gyroscope = VanillaTilt.isSettingTrue(this.settings.gyroscope);
      this.gyroscopeSamples = this.settings.gyroscopeSamples;

      this.elementListener = this.getElementListener();

      if (this.glare) {
        this.prepareGlare();
      }

      if (this.fullPageListening) {
        this.updateClientSize();
      }

      this.addEventListeners();
      this.reset();
      this.updateInitialPosition();
    }

    static isSettingTrue (setting) {
      return setting === "" || setting === true || setting === 1;
    }

    /**
     * Method returns element what will be listen mouse events
     * @return {Node}
     */
    getElementListener () {
      if (this.fullPageListening) {
        return window.document;
      }

      if (typeof this.settings["mouse-event-element"] === "string") {
        const mouseEventElement = document.querySelector(this.settings["mouse-event-element"]);

        if (mouseEventElement) {
          return mouseEventElement;
        }
      }

      if (this.settings["mouse-event-element"] instanceof Node) {
        return this.settings["mouse-event-element"];
      }

      return this.element;
    }

    /**
     * Method set listen methods for this.elementListener
     * @return {Node}
     */
    addEventListeners () {
      this.onMouseEnterBind = this.onMouseEnter.bind(this);
      this.onMouseMoveBind = this.onMouseMove.bind(this);
      this.onMouseLeaveBind = this.onMouseLeave.bind(this);
      this.onWindowResizeBind = this.onWindowResize.bind(this);
      this.onDeviceOrientationBind = this.onDeviceOrientation.bind(this);

      this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
      this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind);
      this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);

      if (this.glare || this.fullPageListening) {
        window.addEventListener("resize", this.onWindowResizeBind);
      }

      if (this.gyroscope) {
        wind

最低0.47元/天解锁文章