Группа из 4-х секций

Небольшой код на JavaScript (1 кб. без сжатия), который позволяет открывать одну секцию из группы поверх остальных и выводить дополнительную информацию.

Пример:

Съедобные грибы

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

Несъедобные грибы

О грибах

Грибная кухня

Группа рассчитана только на 4 секции
В мобильной версии не показывается дополнительная фотография
Фоновое изображение и картинка в открывшейся секции могут отличаться
Количество текста в описании не ограничено

HTML:

<main class="sgroup-container">
	<section class="sgroup">
		<div class="close-sgroup">&times;</div>
		<div class="title-box">Заголовок</div>
		<div class="info-box">
			<div class="info-col-1">
				<img src="photo-1.jpg" alt="" />
			</div>
			<div class="info-col-2">
				<p>Описание</p>
			</div>	
		</div>
	</section>
	<section class="sgroup">
		<div class="close-sgroup">&times;</div>
		<div class="title-box">Заголовок</div>
		<div class="info-box">
			<div class="info-col-1">
				<img src="photo-2.jpg" alt="" />
			</div>
			<div class="info-col-2">
				<p>Описание</p>
			</div>	
		</div>	
	</section>  
	<section class="sgroup">
		<div class="close-sgroup">&times;</div>
		<div class="title-box">Заголовок</div>
		<div class="info-box">
			<div class="info-col-1">
				<img src="photo-3.jpg" alt="" />
			</div>
			<div class="info-col-2">
				<p>Описание</p>
			</div>	
		</div>	
	</section>
	<section class="sgroup">
		<div class="close-sgroup">&times;</div>
		<div class="title-box">Заголовок</div>
		<div class="info-box">
			<div class="info-col-1">
				<img src="photo-4.jpg" alt="" />
			</div>
			<div class="info-col-2">
				<p>Описание</p>
			</div>	
		</div>	
	</section>
</main>

<div class="title-box">Заголовок</div>

</div>

<p>Описание</p>

</div>

</section>

<div class="title-box">Заголовок</div>

</div>

<p>Описание</p>

</div>

</section>

<div class="title-box">Заголовок</div>

</div>

<p>Описание</p>

</div>

</section>

<div class="title-box">Заголовок</div>

</div>

<p>Описание</p>

</div>

</section>

</main>

Оригинальную версию данного решения можно посмотреть на codepen.io у пользователя Marcelo Ribeiro в работе Fullscreen Layout Page Transitions - Pure JS/CSS

CSS:

.sgroup-container {
	position: relative;
	height: 600px;
	margin: 20px 0;
	overflow: hidden;
	background: #000;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 12px 18px rgba(0, 0, 0, 0.1);	
}	
.sgroup {
	position: absolute;
	z-index: 0;
	width: 50%;
	height: 50%;
	overflow: hidden;
	cursor: pointer;
	transform: scale(1);
	transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);
	background-size: cover;
	background-position: 50% 50%;
}
.sgroup:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.4);
	transition: background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sgroup:hover:after {
	content: "";
	background-color: rgba(0,0,0,0.2);
}
.sgroup:nth-child(1) {
	top: 0;
	left: 0;
	background-image: url(photo-1.webp);
}
.sgroup:nth-child(2) {
	top: 0;
	left: 50%;
	background-image: url(photo-2.webp);
}
.sgroup:nth-child(3) {
	top: 50%;
	left: 0;
	background-image: url(photo-3.webp);
}
.sgroup:nth-child(4) {
	top: 50%;
	left: 50%;
	background-image: url(photo-4.webp);
}
.sgroup.is-expanded {
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	height: 100%;
	cursor: initial;
}
.has-expanded-item .sgroup:not(.is-expanded) {
	transform: scale(0);
}
.close-sgroup {
	z-index: 1;
	position: absolute;
	top: 0;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;	
	width: 60px;
	height: 60px;
	line-height: 1;
	font-size: 50px;
	text-align: center;
	color: #fff;
	opacity: 0;
	cursor: pointer;
	pointer-events: none;
	transition: opacity 150ms linear;
	will-change: opacity;
}
.sgroup.is-expanded .close-sgroup {
	opacity: 1;
	transition-delay: 500ms;
	pointer-events: initial;
}
.title-box {
	z-index: 1;
	position: relative;
	display: flex;
	padding: 0 20px;
	height: 100%;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #fff;
	text-shadow: -1px 0 1px #989898, 0 1px 1px #989898, 5px 5px 10px rgba(0, 0, 0, 0.4), -5px -5px 10px rgba(0, 0, 0, 0.4);
	font-size: 30px;
	font-weight: 600;
}
.sgroup.is-expanded:after {
	background-color: rgba(0,0,0,0.7);
}
.sgroup.is-expanded .title-box {
	justify-content: flex-start;
	height: auto;
	margin: 40px;
}
.sgroup.is-expanded .info-box {
	z-index: 1;
	position: relative;
	display: flex;
	padding: 0 20px;
	height: 75%;
	overflow: hidden;
    align-items: center;		
}
.info-box .info-col-1,
.info-box .info-col-2 {
	padding: 0 40px;
}
.info-box .info-col-1 {
	width: 40%;
}
.info-box .info-col-1 img {
	width: 100%;
	border-radius: 10px;
}
.info-box .info-col-2 {
	width: 60%;
	max-height: 100%;
	overflow-y: auto;
	color: #FFF;
	font-size: 16px;
	opacity: 0; 
	transition: opacity 0.5s linear 0.4s;
}
.info-box .info-col-2 p {
	line-height: 1.5;
}
.sgroup.is-expanded .info-box .info-col-2 {
	opacity: 1;
}
@media screen and (max-width: 991px) {
	.title-box {
		font-size:20px;
	}
	.sgroup.is-expanded .info-box {
		flex-wrap: wrap;
	}
	.info-box .info-col-1 {
		display: none;
	}
	.info-box .info-col-2 {
		width: 100%;
		padding: 0 18px;
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

.sgroup-container {

position: relative;

height: 600px;

margin: 20px 0;

overflow: hidden;

background: #000;

border-radius: 10px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 12px 18px rgba(0, 0, 0, 0.1);

}

.sgroup {

position: absolute;

z-index: 0;

width: 50%;

height: 50%;

overflow: hidden;

cursor: pointer;

transform: scale(1);

transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);

background-size: cover;

background-position: 50% 50%;

}

.sgroup:after {

content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: rgba(0,0,0,0.4);

transition: background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);

}

.sgroup:hover:after {

content: "";

background-color: rgba(0,0,0,0.2);

}

.sgroup:nth-child(1) {

top: 0;

left: 0;

}

.sgroup:nth-child(2) {

top: 0;

left: 50%;

}

.sgroup:nth-child(3) {

top: 50%;

left: 0;

}

.sgroup:nth-child(4) {

top: 50%;

left: 50%;

}

.sgroup.is-expanded {

top: 0;

left: 0;

z-index: 100;

width: 100%;

height: 100%;

cursor: initial;

}

.has-expanded-item .sgroup:not(.is-expanded) {

transform: scale(0);

}

.close-sgroup {

z-index: 1;

position: absolute;

top: 0;

right: 10px;

display: flex;

align-items: center;

justify-content: center;

width: 60px;

height: 60px;

line-height: 1;

font-size: 50px;

text-align: center;

color: #fff;

opacity: 0;

cursor: pointer;

pointer-events: none;

transition: opacity 150ms linear;

will-change: opacity;

}

.sgroup.is-expanded .close-sgroup {

opacity: 1;

transition-delay: 500ms;

pointer-events: initial;

}

.title-box {

z-index: 1;

position: relative;

display: flex;

padding: 0 20px;

height: 100%;

justify-content: center;

align-items: center;

text-align: center;

color: #fff;

text-shadow: -1px 0 1px #989898, 0 1px 1px #989898, 5px 5px 10px rgba(0, 0, 0, 0.4), -5px -5px 10px rgba(0, 0, 0, 0.4);

font-size: 30px;

font-weight: 600;

}

.sgroup.is-expanded:after {

background-color: rgba(0,0,0,0.7);

}

.sgroup.is-expanded .title-box {

justify-content: flex-start;

height: auto;

margin: 40px;

}

.sgroup.is-expanded .info-box {

z-index: 1;

position: relative;

display: flex;

padding: 0 20px;

height: 75%;

overflow: hidden;

align-items: center;

}

.info-box .info-col-1,

.info-box .info-col-2 {

padding: 0 40px;

}

.info-box .info-col-1 {

width: 40%;

}

.info-box .info-col-1 img {

width: 100%;

border-radius: 10px;

}

.info-box .info-col-2 {

width: 60%;

max-height: 100%;

overflow-y: auto;

color: #FFF;

font-size: 16px;

opacity: 0;

transition: opacity 0.5s linear 0.4s;

}

.info-box .info-col-2 p {

line-height: 1.5;

}

.sgroup.is-expanded .info-box .info-col-2 {

opacity: 1;

}

@media screen and (max-width: 991px) {

.title-box {

font-size:20px;

}

.sgroup.is-expanded .info-box {

flex-wrap: wrap;

}

.info-box .info-col-1 {

display: none;

}

.info-box .info-col-2 {

width: 100%;

padding: 0 18px;

}

JS:

var Boxlayout = (function () {
	var wrapper = document.body,
    sgroups = Array.from(document.querySelectorAll(".sgroup")),
    closeButtons = Array.from(document.querySelectorAll(".close-sgroup")),
    expandedClass = "is-expanded",
    hasExpandedClass = "has-expanded-item";
	return { init: init };
	function init() {
		_initEvents();
	}
	function _initEvents() {
		sgroups.forEach(function (element) {
			element.onclick = function () {
				_opensgroup(this);
			};
		});
		closeButtons.forEach(function (element) {
			element.onclick = function (element) {
				element.stopPropagation();
				_closesgroup(this.parentElement);
			};
		});
	}
	function _opensgroup(element) {
		if (!element.classList.contains(expandedClass)) {
			element.classList.add(expandedClass);
			wrapper.classList.add(hasExpandedClass);
		}
	}
	function _closesgroup(element) {
		if (element.classList.contains(expandedClass)) {
			element.classList.remove(expandedClass);
			wrapper.classList.remove(hasExpandedClass);
		}
	}
})();
Boxlayout.init();

var Boxlayout = (function () {

var wrapper = document.body,

sgroups = Array.from(document.querySelectorAll(".sgroup")),

closeButtons = Array.from(document.querySelectorAll(".close-sgroup")),

expandedClass = "is-expanded",

hasExpandedClass = "has-expanded-item";

return { init: init };

function init() {

_initEvents();

}

function _initEvents() {

sgroups.forEach(function (element) {

element.onclick = function () {

_opensgroup(this);

};

});

closeButtons.forEach(function (element) {

element.onclick = function (element) {

element.stopPropagation();

_closesgroup(this.parentElement);

};

});

}

function _opensgroup(element) {

if (!element.classList.contains(expandedClass)) {

element.classList.add(expandedClass);

wrapper.classList.add(hasExpandedClass);

}

function _closesgroup(element) {

if (element.classList.contains(expandedClass)) {

element.classList.remove(expandedClass);

wrapper.classList.remove(hasExpandedClass);

}

})();

Boxlayout.init();

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.

Протестировать на смартфоне Открыть QR-код для перехода на эту страницу с телефона

Опубликовано: 29.10.2021 / Обновлено: 18.09.2026
Рубрики: Секции, Фото, аудио и видео
Метки: JavaScript, Фото
7650 просмотров

Смотрите также:

Мыльные пузыри для секции

Появляющиеся от движения курсора мыльные пузыри

Медиа-плейер Plyr для HTML5, YouTube и Vimeo

Медиа-плейер Plyr для воспроизведения HTML5 аудио и видео, YouTube и Vimeo

Секция с заголовком и фотографией

Красивое оформление секции с фотографией и заголовком, который частично заполнен ей

Добавить комментарий:

Ваш комментарий отправлен!

Галина: 28.09.2025 в 18:54

Спасибо, у меня все получилось. Просто супер!

Ответить
Богдан: 16.09.2024 в 18:36

Сначала прописал всё со своими переменными - не работает. Попробовал скопировать с сайта и вставить свои фотки - не работает. Попробовал создать отдельный js-файл и вставить туда скрипт - не работает. Попробовал в html-коде прописать сам скрипт в тегах script - заработало. Не знаю почему. В первом файле-скрипте у меня уже прописана анимация для карусели фотографий, вместе с ней этот скрипт не дружит.

Ответить
- Alexander: 18.09.2024 в 08:17
  
  Посмотрите, что в консоле, если что то не работает, там скорее всего есть ответ.
  А вообще скрипт должен быть ниже хтмл или запускаться после его загрузки
  
  Ответить
Даша: 21.02.2024 в 04:10

Как сделать несколько? Например я хочу сделать 15 секции, но я попробовала и почему не видно только 4 секция и как можно сделать больше?

Ответить
- Alexander: 26.02.2024 в 13:27
  
  Так изначально задумано 🙂
  Если делать под несколько секций или под большее кол-во фото, нужно менять и CSS и JS
  
  Ответить
Алексей: 21.02.2024 в 04:04

А как несколько секций сделать?

Ответить
СЕРГЕЙ: 15.04.2023 в 23:12

Блииин почему в опенкарте не работает! Такая крутая штука!

Ответить
- Эдуард: 17.10.2023 в 02:19
  
  У меня работает) OC 3.0.3.7
  HTML закинь на страницу,где хочешь эту тему увидеть через tinyMCE или другой редактор, далее создай css и js файлы на хосте, отредактируй TWIG файлы HEADER(подключи стили и скрипты).
  Кажется все)
  
  Ответить
Миша: 02.11.2021 в 16:07

Супер! Спасибо что поделился такой прикольной штучкой!

Ответить

Пример:

HTML:

CSS:

JS:

Смотрите также:

Добавить комментарий:

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