0

Есть табы.

введите сюда описание изображения

По умолчанию цвет текста - серый. При переключении нужно чтобы красный цвет плавно заменял серый со смещением. Вот так

введите сюда описание изображения

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

Какие-то решения есть с -webkit-background-clip: text; и -webkit-text-fill-color: transparent; но результат не получил. Может кто делал такое, есть рабочие примеры.

Аналог - табы в Твиттере.

Есть вот такой вариант - Но, при этом не проскроллить табы по горизонтали. Мешается -webkit-background-clip: text; Ну а без него не работает((

.clip-text {
  margin-left: 100px;
  margin-top: 100px;
  border: 1px solid green;
  display: flex;
  font-size: 20px;
  width: 400px;
  
  font-weight: bold;
  line-height: 1;
  position: relative;
  color: red;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  overflow-x: auto;
  background-image: url(https://picsum.photos/480/200?random);
  background-color: red;
  background-size: 100px 100%;
  background-repeat: no-repeat;
  background-position: 20px;
}

span {
    margin-right: 20px;
  }
<div class="wrapper">
      <div class="clip-text">
        <span>JINTOS</span>
        <span>22JINTOS</span>
        <span>JINTOS</span>
        <span>22JINTOS</span>
        <span>JINTOS</span>
        <span>22JINTOS</span>
        <span>JINTOS</span>
        <span>22JINTOS</span>
        <span>JINTOS</span>
        <span>22JINTS</span>
    </div>
  </div>

2
  • не относится к вопросу: исправьте у себя опечатку: не главнОЕ, а главнАЯ ;-) 8 апр 2021 в 10:28
  • @Sevastopol' Суть не в работе табов, а в перемещении блока с бэкграундом. Он перемещается если менять position, но не в данном примере это не увидеть, так как нельзя проскролить из-за background-clip 8 апр 2021 в 10:41

2 ответа 2

2

Для старта пойдёт, думаю.
Чуть позже может доведу до нормального поведения.

let el = document.querySelector('.wrapper');

el.addEventListener('mouseenter', function(e) {
    if(e.target.classList.contains('-hover')) {
    el.style.cssText = `
    --ew: ${e.target.getBoundingClientRect().width}px;
    --ex: ${e.target.getBoundingClientRect().left - el.getBoundingClientRect().left}px;`;
  }
}, true);
.wrapper {
  border-bottom: 1px solid #ccc;
  --ew: 0;
  --ex: 0;
  position: relative;
}

.wrapper::after {
  content: '';
  display: block;
  width: var(--ew);
  height: 2px;
  background: red;
  position: absolute;
  left: var(--ex);
  bottom: -1px;
  transition: 
    width .3s linear,
    left .3s linear;
}

.wrapper .clip {
  display: flex;
  flex-direction: row;
  justify-content: space-between;;
  align-items: flex-start;
  width: 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-color: #777;
  background-image: linear-gradient(90deg, red, red);
  background-size: var(--ew) 100%;
  background-repeat: no-repeat;
  background-position: var(--ex) center;
  transition: 
    background-position .3s linear,
    background-size .3s linear;
}

.wrapper .clip span {
  display: inline-block;
  padding: .5em .25em;
  color: transparent;
  box-sizing: border-box;
  cursor: pointer;
}

.wrapper .clip span:not(:last-child) {
  margin-right: 10px;
}
<div class="wrapper">
  <div class="clip">
    <span class="-hover">Главная</span>
    <span class="-hover">Портфолио</span>
    <span class="-hover">Ещё что-то</span>
    <span class="-hover">ыыы</span>
    <span class="-hover">JINTOS</span>
    <span class="-hover">22JINTOS</span>
  </div>
</div>

1
  • Выглядит хорошо) Спасибо. Но если ограничить wrapper в 300 - 400px, то табы не скроллятся горизонтально опять же( 8 апр 2021 в 12:00
1

Возьмите свое решение со смещением маски для текста и отдельно реализуйте плавающую черточку, вроде такой:

.container {
  position: relative;
  display: flex;
  flex-direction: row;
}

.line {
  position: absolute;
  bottom: 0;
  left: 5px;
  width: calc(15vw - 15px);
  border: 2px solid red;
  transition: 0.5s;
}

a {
  width: 15vw;
  padding: 10px 0;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}

a:hover {
  color: red;
}

a:nth-child(1):hover ~ .line {
  transform: translateX(0);
}

a:nth-child(2):hover ~ .line {
  transform: translateX(15vw);
}

a:nth-child(3):hover ~ .line {
  transform: translateX(30vw);
}

a:nth-child(4):hover ~ .line {
  transform: translateX(45vw);
}

a:nth-child(5):hover ~ .line {
  transform: translateX(60vw);
}
<div class="container">
  <a href="">Link 1</a>
  <a href="">Link 2</a>
  <a href="">Link 3</a>
  <a href="">Link 4</a>
  <a href="">Link 5</a>
  <div class="line"></div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.