3D文本悬停菜单

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

const createElm = function (menuItem) {
  let menuItemsTexts = menuItem.children[0].children[0];

const menuItemsTextsArray = [...menuItemsTexts.textContent];

menuItemsTexts.textContent = "";

const textsArray = [];

menuItemsTextsArray.forEach((menuItemText) => {
    textsArray.push(`<span>${menuItemText}</span>`);
  });

textsArray.forEach((textArray) => {
    menuItemsTexts.innerHTML += textArray;
  });

const parentElm = menuItemsTexts.parentElement;

const parentElmHeight = parentElm.clientHeight;
  parentElm.style.height = `${parentElmHeight}px`;

const cloneItem = menuItemsTexts.cloneNode(true);
  parentElm.appendChild(cloneItem);
};

menuItem.addEventListener("mouseleave", function () {
    gsap.to(this.children[0].children[0].children, {
      y: "0",
    });
    gsap.to(this.children[0].children[1].children, {
      y: "0",
    });
  });
};

const targetItems = document.querySelectorAll(".js-menu-item");

targetItems.forEach((targetItem) => {
  const menuItem = targetItem;
  createElm(menuItem);
  animation(menuItem);
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg