ZorNet.Ru — сайт для вебмастера » HTML и CSS » Красивые табы (вкладки) с анимацией CSS3

Красивые табы (вкладки) с анимацией CSS3

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

Применение его обширное, но больше подойдет под современный стиль дизайна или поставить на отдельную страницу, где изначально задать ширину, которая по отдельности ставится, как на переключатели, так на саму основу. Безусловно стильно смотрится скользящая область, которая закреплена под кнопки с ключевыми словами и выставлены для контента, где красиво по стилям выставлена нижнее часть, так как все элементы изначально идут закругленные по дизайну.

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

Полностью функционал проверялся на работоспособность, где для вас представлена demo страница.

Приступаем к установке:

HTML

Код

<ul class="densanove-normaton">
  <div class="souldugive"></div>
  <li>Скрипты</li>
  <li>Шаблоны</li>
  <li>Дизайн</li>
  <li>Стили</li>
</ul>

<div class="asidered-absolutel">
  <div class="betekoteden">
  <h1>ZorNet - портал для вебмастера</h1>
  также пишем все кратко на первой вкладке
  </div>
  <div class="betekoteden">
  <h1>Дизайн</h1>
  здесь краткое описание
  </div>
  <div class="betekoteden">
  <h1>Скрипты</h1>
  Второе описание</br></br> описание продлеваем
  </div>
  <div class="betekoteden">
  <h1>Delta Title</h1>
крайнее вкладка под описание
  </div>
</div>

CSS

Код

.souldugive {
  position: absolute;
  left: 0;
  top: 0;
  background: #1873ab;
  box-shadow: 0 2px 5px -1px rgba(19, 18, 18, 0.58);
  border-radius: 100px;
  height: 100%;
}

.densanove-normaton {
  display: flex;
  padding: 0;
  flex-direction: row;
  border: 1px solid rgba(16, 16, 16, 0.25);
  border-radius: 100px;
  width: 585px;
  height: auto;
  margin: 47px auto;
  position: relative;
}

li {
  text-align: center;
  margin: 0;
  padding: 9px;
  flex: auto;
  font-size: 16px;
  font-weight: 700;
  color: #106598;
  position: relative;
  cursor: pointer;
  list-style: none;
}

h1 {
  margin: 0;
  padding: 0;
  color: #117d75;
}

.asidered-absolutel {
  width: 585px;
  margin: auto;
  overflow: hidden;
  box-shadow: 0 10px 9px -10px rgba(16, 16, 16, 0.42) inset;
  background: #f9f7f7;
  border-bottom: 1px solid rgba(24, 115, 160, 0.3);
  position: relative;
  border-radius: 19px;
}

.betekoteden {
  position: absolute;
  padding: 20px;
  left: 0;
  top: 0;
  line-height: 1.5;
}

Код

console.clear();
var targets = document.querySelectorAll("li");
var articles = document.querySelectorAll(".betekoteden");
var activeTab = 0;
var old = 0;
var heights = [];
var dur = 0.4;
var animation;

for (let i = 0; i < targets.length; i++) {
  targets[i].index = i;
  heights.push(articles[i].offsetHeight);
  TweenMax.set(articles[i], {top: 0, y:-heights[i]});
  targets[i].addEventListener("click", doCoolStuff);
}

TweenMax.set(articles[0], {y:0});
TweenMax.set(".souldugive", {x:targets[0].offsetLeft, width:targets[0].offsetWidth});
TweenMax.set(targets[0], {color:"#dfe1e2"});
TweenMax.set(".asidered-absolutel", {height:heights[0]});

function doCoolStuff() {

  if(this.index != activeTab) {

  if (animation && animation.isActive()) {
  animation.progress(1);
  }
  animation = new TimelineMax();
  old = activeTab;
  activeTab = this.index;

  animation.to(".souldugive", dur, {x:targets[activeTab].offsetLeft, width:targets[activeTab].offsetWidth});

  animation.to(targets[old], dur, {color:"#1b79b1", ease:Linear.easeNone}, 0);
  animation.to(targets[activeTab], dur, {color:"#f2f2f5", ease:Linear.easeNone}, 0);

  animation.to(articles[old], dur, {y:heights[old], ease:Back.easeIn }, 0);
  animation.set(articles[old], {y:-heights[old]});

  animation.to(".asidered-absolutel", dur, {height:heights[activeTab]});

  animation.to(articles[activeTab], 1, {y:0, ease: Elastic.easeOut}, "-=0.25");
  }
}

Будет действительно полезно для дизайна и по своему прямому назначению, то информировать или нести ту, или иную информацию, которую можно переключать.

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

Демонстрация

12 Октября 2018 Просмотров: 2864 Комментариев: (0)

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

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

Kosten

Комментарии: 0