Верстка сложных карточек с анимацией (CSS, JS, jQuery?)

245

03 мая 2022, 04:00

Мне для проекта необходимо сверстать такие же карточки как на скриншотах. По умолчанию активна первая карточка с описанием элемента слева. Потом, когда навожу мышь на следующую карточку, описание слева меняется на описание соответствующей карточки. При этом, когда убираю мышку с карточки, она остается активной. Как это можно сделать? На чистом CSS или на JS/jQuery? Мне не нужно расписывать целое решение, просто подскажите примерно, как реализуется обычно, т.к. с подобным еще не сталкивалась

Answer 1

За основу вы можете взять штуку, называемую "Tabs" (Вкладки) в простонародье..
И собственно переделать её под своё дизайн.

Вот пример, из которого можно сделать нужный вам результат.

$('.tabs-content .tabs').on('click', '.item', function(){
  if(!$(this).hasClass('--active')) {
    let parent = $(this).closest('.tabs-content');
    parent.find('.item.--active').removeClass('--active');
    $(this).addClass('--active');
    parent.find('.content .item[data-id="'+$(this).attr('data-id')+'"]').addClass('--active');
  } else return false;
});

.tabs-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: top;
  width: 100%;
}
.tabs-content .content {
  display: block;
}
.tabs-content .content .item {
  display: none;
}
.tabs-content .content .item.--active {
  display: block;
}
.tabs-content .tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: min-content;
  grid-gap: 10px;
  min-width: 200px;
  width: 100%;
}
.tabs-content .tabs .item {
  width: 100%;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 2px 2px 4px 0px #ccc;
  box-sizing: border-box;
  cursor: pointer;
}
.tabs-content .tabs .item.--active {
  background: linear-gradient(135deg, #83a4d4, #b6fbff);
  cursor: default;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabs-content">
  <div class="content">
    <div class="promo">
      <h1>Tabs design</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
    </div>
    <div class="item --active" data-id="1">
      <h2>Item 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis rhoncus nisi vitae fringilla. Cras quis libero vitae ante malesuada tempor.</p>
    </div>
    <div class="item" data-id="2">
      <h2>Item 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis rhoncus nisi vitae fringilla. Cras quis libero vitae ante malesuada tempor.</p>
    </div>
    <div class="item" data-id="3">
      <h2>Item 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis rhoncus nisi vitae fringilla. Cras quis libero vitae ante malesuada tempor.</p>
    </div>
    <div class="item" data-id="4">
      <h2>Item 4</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis rhoncus nisi vitae fringilla. Cras quis libero vitae ante malesuada tempor.</p>
    </div>
  </div>
  <div class="tabs">
    <div class="item --active" data-id="1">Item 1</div>
    <div class="item" data-id="2">Item 2</div>
    <div class="item" data-id="3">Item 3</div>
    <div class="item" data-id="4">Item 4</div>
  </div>
</div>