Группа из 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, Фото
6418 просмотров

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

Эффекты смены двух фотографий на CSS

Варианты анимированной замены одной фотографии на другую средствами CSS

Наклонная галерея

Небольшой скрипт на jQuery с наклонной каруселью фотографий

WebGL слайдер фотографий

Слайдер на WebGL с красивой сменой фотографий по клику

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

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

Богдан: 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:

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

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

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