Как создать анимированные вкладки используя HTML CSS и JavaScript | How to Create an Animated Tabs using HTML CSS & JavaScript

В этом видео мы создадим анимированные вкладки используя HTML CSS и JavaScript. Надеюсь, это видео будет полезным для вас. Скачать коды можно по ссылке ниже.

СКАЧАТЬ

ДЕМО

Кроме того, если у вас есть какие-либо вопросы, предложения или отзывы, то оставьте комментарий ниже. Ваши отзывы помогают нам создавать более ценный контент.

HTML КОД:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Animated Tabs</title>

    <!--css file-->
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="wrapper">
      <div class="tabs">
        <button class="tab active">Home</button>
        <button class="tab">Blog</button>
        <button class="tab">About</button>
        <button class="tab">Contact</button>

        <div class="line"></div>
      </div>

      <div class="tab-content">
        <div class="content active">
          <h2>Home</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum sequi
            provident doloremque modi placeat facilis, in, pariatur eveniet,
            nemo magnam vitae ut nam! Cum autem facere aliquam vitae obcaecati
            odit.
          </p>
        </div>
        <div class="content">
          <h2>Blog</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum sequi
            provident doloremque modi placeat facilis, in, pariatur eveniet,
            nemo magnam vitae ut nam! Cum autem facere aliquam vitae obcaecati
            odit.
          </p>
        </div>
        <div class="content">
          <h2>About</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum sequi
            provident doloremque modi placeat facilis, in, pariatur eveniet,
            nemo magnam vitae ut nam! Cum autem facere aliquam vitae obcaecati
            odit.
          </p>
        </div>
        <div class="content">
          <h2>Contact</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum sequi
            provident doloremque modi placeat facilis, in, pariatur eveniet,
            nemo magnam vitae ut nam! Cum autem facere aliquam vitae obcaecati
            odit.
          </p>
        </div>
      </div>
    </div>

    <script src="app.js"></script>
  </body>
</html>

CSS КОД:


/* Google Fonts(Poppins) */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

* {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f2f2;
}

.wrapper {
  width: 600px;
  background: #fff;
  padding: 30px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
}

.wrapper .tabs {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 2px solid rgb(229, 229, 229);
}

.wrapper .tabs .tab {
  font-size: 18px;
  font-weight: 600;
  color: #919191;
  background: none;
  border: none;
  padding: 18px;
  cursor: pointer;
  transition: 0.3s;
}

.wrapper .tabs .tab.active {
  color: #4070f4;
}

.wrapper .tabs .tab:not(.active):hover {
  color: #717171;
}

.wrapper .line {
  position: absolute;
  width: 90px;
  height: 3px;
  background: #4070f4;
  top: 62px;
  left: 21px;
  border-radius: 10px;
  transition: 0.3s ease-in-out;
}

.wrapper .tab-content {
  padding: 20px;
}

.wrapper .tab-content .content {
  display: none;
  animation: anim 0.5s ease;
}

.wrapper .tab-content .content.active {
  display: block;
}

@keyframes anim {
  from {
    transform: translateX(50px);
    opacity: 0;
  }

  to {
    transform: translateX(0px);
    opacity: 1;
  }
}

.wrapper .tab-content .content h2 {
  margin-bottom: 10px;
}

JAVASCRIPT КОД:


let tabs = document.querySelectorAll(".tab");
let tabsContent = document.querySelectorAll(".content");

tabs.forEach((tab, index) => {
  tab.addEventListener("click", (e) => {
    tabs.forEach((tab) => {
      tab.classList.remove("active");
    });

    tab.classList.add("active");

    tabsContent.forEach((content) => {
      content.classList.remove("active");
    });
    tabsContent[index].classList.add("active");

    let line = document.querySelector(".line");
    line.style.width = e.target.offsetWidth + "px";
    line.style.left = e.target.offsetLeft + "px";
  });
});