ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Вертикальный аккордеон CSS3 для изображение

Вертикальный аккордеон CSS3 для изображение

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

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

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

Все проверено по функционалу и по основной работе:

Адаптивный вертикальный аккордеон CSS картинок

Так будет переходить по своему дизайн на мобильных гаджет:

Гармошка из фотографий

Установка:

HTML

Код
<div class="akupanelka-konteynes">
  <div class="panelka pevekoda" style="background-image: url('Здесь ссылка на изображение #1')">
  <div>ZorNet.Ru — Заголовок</div>
  </div>
  <div class="panelka" style="background-image: url('Здесь ссылка на изображение #2')">
  <div>ZorNet.Ru — Заголовок</div>
  </div>
  <div class="panelka" style="background-image: url('Здесь ссылка на изображение #3')">
  <div>ZorNet.Ru — Заголовок</div>
  </div>
  <div class="panelka" style="background-image: url('Здесь ссылка на изображение #4')">
  <div>ZorNet.Ru — Заголовок</div>
  </div>
  <div class="panelka" style="background-image: url('Здесь ссылка на изображение #5')">
  <div>ZorNet.Ru — Заголовок</div>
  </div>
</div>

CSS

Код
.akupanelka-konteynes * {
  box-sizing: border-box;
}
.akupanelka-konteynes {
  display: flex;
  overflow: hidden;
  margin: 20px 0;
  height: 400px;
}
.panelka {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50px;
  color: #fff;
  flex: 0.5;
  cursor: pointer;
  position: relative;
  margin: 0 8px;
  transition: flex 0.7s cubic-bezier(0.05, 0.6, 0.4, 0.9);
}
.panelka div {
  text-shadow: 0 0 12px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.7);  
  font-family: Verdana, sans-serif;  
  font-weight: bold;  
  font-size: 28px;
  opacity: 0;
  position: absolute;
  bottom: 30px;
  left: 40px;
  margin: 0;
  transition: opacity 0s ease-in 0s;
}
.panelka.pevekoda {
  flex: 5;
}
.panelka.pevekoda div {
  opacity: 1;
  transition: opacity 0.3s ease-in 0.4s;
}
@media screen and (max-width: 480px) {
  .akupanelka-konteynes {
  position: relative;
  }
  .panelka {
  width: 10%;
  position: relative;
  height: 80px;
  top: 0;
  border: 4px solid #FFF;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
  flex: 1;
  }
  .panelka.pevekoda {
  flex: 1;
  width: 100%;
  position: absolute;
  height: 360px;
  left: 0;
  margin: 40px 0 0;
  z-index: -1;
  box-shadow: none;
  }
}

JS

Код
const panelkas = document.querySelectorAll('.panelka');
panelkas.forEach(panelka => {
  panelka.addEventListener('click', () => {
  removepevekodaClasses();
  panelka.classList.add('pevekoda');
  });
});
function removepevekodaClasses() {
  panelkas.forEach(panelka => {
  panelka.classList.remove('pevekoda');
  });
}

Как дополнение, это заголовки, что появляются на картинках, в самом низу левой стороны угла, где при перелистывании их изначально не видать, но как только раскрывается полный кадр, то плавно появляется название.

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

Источник: atuin.ru
25 Марта 2021 Загрузок: 4 Просмотров: 1357 Комментариев: (8)

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

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

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

Комментарии: 8
Kosten
Kosten 25 Марта 2021 20:051
0
Так понял, что вы хотите дизайн, как на мобильном аппарате, то здесь роще табами воспользоваться.

-SAM-
-SAM- 26 Марта 2021 03:142
0
По той же аналогии, что вам помогали сделать информер в предыдущих ваших темах. То есть активное объявление делается так:
Код
<div class="panelka<?if($NUMBER$="1")?> pevekoda<?endif?>" style="[...]
Это кусок кода из шаблона вида информера.
noavatar
Qwazor 26 Марта 2021 10:023
0
О блин совсем забыл, спасибо.
noavatar
Qwazor 29 Марта 2021 11:454
0
Может кто то подсказать, возможно в js что то добавить, чтобы автоматически крутилось?) Как слайдер типо))
Сопрано
Сопрано 29 Марта 2021 17:185
0
Не представляю, как может крутится, разве через какое то время меняется автоматически картинка. Но не разу не встречал, чтоб такой тип акора функционировал, хотя есть вероятно, и здесь нужно заказывать, чтоб создали.
-SAM-
-SAM- 31 Марта 2021 01:546
0

UPD.: Qwazor, ввёл в Google запрос "js slider toggle class timer" - на StackOverflow уже разбирались с подобным вопросом (id: 35014948). Вот пример рабочий оттуда:
noavatar
Qwazor 31 Марта 2021 09:297
0
Цитата -SAM- ()
Вот пример рабочий оттуда:

Отлично работает! Спасибо!
Grician
Grician 29 Апреля 2022 11:288
0
А возможно как-то сделать, что бы он и на мобилках так же выглядел?
avatar