Пример:
Ada Wong
Senua
Aloy
Lara Croft
Bayonetta
HTML:
Первая панель с фотографией имеет дополнительный класс active.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="panel-container"> <div class="panel active" style="background-image: url('photo-1.jpg')"> <div>Заголовок</div> </div> <div class="panel" style="background-image: url('photo-2.jpg')"> <div>Заголовок</div> </div> <div class="panel" style="background-image: url('photo-3.jpg')"> <div>Заголовок</div> </div> <div class="panel" style="background-image: url('photo-4.jpg')"> <div>Заголовок</div> </div> <div class="panel" style="background-image: url('photo-5.jpg')"> <div>Заголовок</div> </div> </div> |
CSS:
В зависимости от ширины контейнера или количества фотографий, CSS-код возможно придется корректировать.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
.panel-container * { box-sizing: border-box; } .panel-container { display: flex; overflow: hidden; margin: 20px 0; height: 400px; } .panel { 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); } .panel 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; } .panel.active { flex: 5; } .panel.active div { opacity: 1; transition: opacity 0.3s ease-in 0.4s; } @media screen and (max-width: 480px) { .panel-container { position: relative; } .panel { 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; } .panel.active { flex: 1; width: 100%; position: absolute; height: 360px; left: 0; margin: 40px 0 0; z-index: -1; box-shadow: none; } } |
JS:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const panels = document.querySelectorAll('.panel'); panels.forEach(panel => { panel.addEventListener('click', () => { removeActiveClasses(); panel.classList.add('active'); }); }); function removeActiveClasses() { panels.forEach(panel => { panel.classList.remove('active'); }); } |
интересно а почему вы на Jquery не пишите? проще ведь, хотя понимаю что где то без JavaScript не обойтись ..
jQuery тоже JavaScript
Я на нем и пишу обычно, т.к. намного удобнее работать с элементами.
Чистый JS редко использую, в основном если частично откуда то заимствоваю 🙂
А возможно как то сделать, что бы и мобильный вид был такой же?
Удалите стили:
@media screen and (max-width: 480px) { ... }Но мне кажется не уместится
В мобильном виде не отображается главное изображение
ссылка
В чем может быть проблема? И еще вопрос. JS код куда прописывать?
Добавьте сюда:
.panel-container { position: relative; z-index: 10; }Спасибо!
Спасибо большое. взял себе на блог)))