Меню 3D RotateText Hover (gsap)

3D RotateText Hover menu(gsap) Free Download в HTML, CSS и JavaScript

HTML:

<ul class="menu">
<li class="js-menu-item menu-item">
<a>
<div class="menu-item__text">Top</div>
</a>
</li>
<li class="js-menu-item menu-item">
<a>
<div class="menu-item__text">About</div>
</a>
</li>
<li class="js-menu-item menu-item">
<a>
<div class="menu-item__text">Works</div>
</a>
</li>
<li class="js-menu-item menu-item">
<a>
<div class="menu-item__text">Event</div>
</a>
</li>
<li class="js-menu-item menu-item">
<a>
<div class="menu-item__text">Contact</div>
</a>
</li>
</ul>

Вас также может заинтересовать загрузка: Анимированные значки панели навигации в HTML, CSS и JavaScript

CSS:

@import url("https://fonts.googleapis.com/css2?family=Oranienbaum&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
body {
background-color: #222;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.menu {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 700px;
margin: 0 auto;
}
.menu-item {
list-style: none;
}
.menu-item > a {
text-transform: uppercase;
cursor: pointer;
overflow: hidden;
display: block;
color: #fff;
}
.menu-item__text > span {
display: inline-block;
font-size: 2.25rem;
font-family: "Oranienbaum", serif;
}

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);
};
const animation = function (menuItem) {
gsap.defaults({
ease: "power1",
stagger: {
amount: 0.14,
from: "start",
},
});
menuItem.addEventListener("mouseover", function () {
gsap.to(this.children[0].children[0].children, {
y: "-100%",
});
gsap.to(this.children[0].children[1].children, {
y: "-100%",
});
});
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);
});

Фрагменты кода HTML, CSS и JavaScript включены, AllWebCodes.com

Сделанный! И наслаждайтесь 3D RotateText Hover menu(gsap) Snippets

Загрузить сейчас