ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Анимированная панель вкладок на CSS + JS

Анимированная панель вкладок на CSS + JS

Анимированная панель вкладок на CSS + JS
Здесь подробно описано, как создать эффект дизайна навигационной панели, где присутствует крутая анимация при наведении курсора с помощи CSS и JS. Эта панель так выстроенная, что ее можно расположить по вверх материала на сайте, а также в самом низу подключить функции. С наведением курсора вы будете переводить функции, где в самой основе будет происходить красивый эффект, и все это выстроено при помощи стилистике.

Также подключен JavaScript, который отвечает за полный функционал, что происходит на данных кнопках. Вот так мы создали концепцию взаимодействия с гибкой панелью вкладок, что безусловно само по себе оригинально смотрится. Также думаю, что такой формат можно прописать под вкладки, где выставить нужные по тематике знаки, что также меняются при наведении курсора на данную задачу.

Как пример:



Установка:

HTML


CSS

Код
.menu{

  margin: 0;
  display: flex;
  /* Works well with 100% width */
  width: 32.05em;
  font-size: 1.5em;
  padding: 0 2.85em;
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: var(--bgColorMenu);
   
}

.menu__item{
   
  all: unset;
  flex-grow: 1;
  z-index: 100;
  display: flex;
  cursor: pointer;
  position: relative;
  border-radius: 50%;
  align-items: center;
  will-change: transform;
  justify-content: center;
  padding: 0.55em 0 0.85em;
  transition: transform var(--timeOut , var(--duration));
   
}

.menu__item::before{
   
  content: "";
  z-index: -1;
  width: 4.2em;
  height: 4.2em;
  border-radius: 50%;
  position: absolute;
  transform: scale(0);
  transition: background-color var(--duration), transform var(--duration);
   
}

.menu__item.active {

  transform: translate3d(0, -.8em , 0);

}

.menu__item.active::before{
   
  transform: scale(1);
  background-color: var(--bgColorItem);

}

.icon{
   
  width: 2.6em;
  height: 2.6em;
  stroke: white;
  fill: transparent;
  stroke-width: 1pt;
  stroke-miterlimit: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
   
}

.menu__item.active .icon {

  animation: strok 1.5s reverse;
   
}

@keyframes strok {

  100% {

  stroke-dashoffset: 400;

  }

}

.menu__border{

  left: 0;
  bottom: 99%;
  width: 10.9em;
  height: 2.4em;
  position: absolute;
  clip-path: url(#menu);
  will-change: transform;
  background-color: var(--bgColorMenu);
  transition: transform var(--timeOut , var(--duration));
   
}

.svg-container {

  width: 0;
  height: 0;
}

@media screen and (max-width: 50em) {
  .menu{
  font-size: .8em;
  }
}

JS

Код
"use strict";  

const body = document.body;
const bgColorsBody = ["#ffb457", "#ff96bd", "#9999fb", "#ffe797", "#cffff1"];
const menu = body.querySelector(".menu");
const menuItems = menu.querySelectorAll(".menu__item");
const menuBorder = menu.querySelector(".menu__border");
let activeItem = menu.querySelector(".active");

function clickItem(item, index) {

  menu.style.removeProperty("--timeOut");
   
  if (activeItem == item) return;
   
  if (activeItem) {
  activeItem.classList.remove("active");
  }

   
  item.classList.add("active");
  body.style.backgroundColor = bgColorsBody[index];
  activeItem = item;
  offsetMenuBorder(activeItem, menuBorder);
   
   
}

function offsetMenuBorder(element, menuBorder) {

  const offsetActiveItem = element.getBoundingClientRect();
  const left = Math.floor(offsetActiveItem.left - menu.offsetLeft - (menuBorder.offsetWidth - offsetActiveItem.width) / 2) + "px";
  menuBorder.style.transform = `translate3d(${left}, 0 , 0)`;

}

offsetMenuBorder(activeItem, menuBorder);

menuItems.forEach((item, index) => {

  item.addEventListener("click", () => clickItem(item, index));
   
})

window.addEventListener("resize", () => {
  offsetMenuBorder(activeItem, menuBorder);
  menu.style.setProperty("--timeOut", "none");
});

Здесь панель не раз приходилось встречать в сети интернет, но основном такая концепция анимированной навигационной панели идет на SCSS, а как здесь можно заметить на CSS3.

Демонстрация
2021-05-26 Загрузок: 1 Просмотров: 635 Комментарий: (2)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 2
Grician
Grician 2021-05-27 06:141
0
Что то я не догнал, а куда ссылки пихать и иконки где менять?
Kosten
Kosten 2021-05-27 14:412
0
Ссылки ставят, чтоб по ним переходить, это переключатели, типа анимированного бара.
avatar