Группа из 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>

Фотографии взяты с сайта pexels.com
Оригинальную версию данного решения можно посмотреть на codepen.io у пользователя Marcelo Ribeiro в работе Fullscreen Layout Page Transitions - Pure JS/CSS
Если кому-то нравится тема грибов, то о них можно почитать на одном из моих старых сайтов mushroom-site.ru

CSS:

.sgroup-container {
	position: relative;
	height: 600px;
	margin: 20px 0;
}	
.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(/demo/i/mushroom-1.jpg);
}
.sgroup:nth-child(2) {
	top: 0;
	left: 50%;
	background-image: url(/demo/i/mushroom-2.jpg);
}
.sgroup:nth-child(3) {
	top: 50%;
	left: 0;
	background-image: url(/demo/i/mushroom-3.jpg);
}
.sgroup:nth-child(4) {
	top: 50%;
	left: 50%;
	background-image: url(/demo/i/mushroom-4.jpg);
}
.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: 0;
	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;
	font-family: Tahoma, sans-serif;
	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: 30px 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%;
}
.info-box .info-col-2 {
	width: 60%;
	max-height: 100%;
	overflow-y: auto;
	color: #FFF;
	font-size: 16px;
	line-height: 1.6;
	opacity: 0;
	font-family: Verdana, sans-serif;  
	transition: opacity 0.5s linear 0.4s;
}
.sgroup.is-expanded .info-box .info-col-2 {
	opacity: 1;
}
@media screen and (max-width: 991px) {
	.title-box {
		font-size:18px;
	}
	.sgroup.is-expanded .info-box {
		flex-wrap: wrap;
	}
	.info-box .info-col-1 {
		display: none;
	}
	.info-box .info-col-2 {
		width: 100%;
	}
}

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

.sgroup-container {

position: relative;

height: 600px;

margin: 20px 0;

}

.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: 0;

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;

font-family: Tahoma, sans-serif;

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: 30px 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%;

}

.info-box .info-col-2 {

width: 60%;

max-height: 100%;

overflow-y: auto;

color: #FFF;

font-size: 16px;

line-height: 1.6;

opacity: 0;

font-family: Verdana, sans-serif;

transition: opacity 0.5s linear 0.4s;

}

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

opacity: 1;

}

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

.title-box {

font-size:18px;

}

.sgroup.is-expanded .info-box {

flex-wrap: wrap;

}

.info-box .info-col-1 {

display: none;

}

.info-box .info-col-2 {

width: 100%;

}

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
Рубрики: Секции, Фото, аудио и видео
Метки: JavaScript, Фото
5682 просмотра

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

Выделение лиц на фотографии

Увеличение и выделение лиц и других объектов на фотографии

Вертикальный аккордеон для фотографий

Вертикальный аккордеон с раскрывающимися по клику фотографиями

Фото в смартфоне на CSS

Вариант показа фотографии в смартфоне, сделанном средствами CSS

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

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

Даша: 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:

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

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

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