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

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

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

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

СЕРГЕЙ: 15.04.2023 в 23:12

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

Ответить
Миша: 02.11.2021 в 16:07

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

Ответить

Пример:

HTML:

CSS:

JS:

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

Анимированный разделитель для секций на CSS

Новогодняя секция

Секция с шестиугольными фотографиями

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

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