Секция с овалом

Для создания овала используется небольшой код на JavaScript

Пример:

Секция с овалом:

Радиус овала для десктопа равен высоте секции, а на узких экранах 1.5 от ее ширины

HTML:

<section id="section">
	<div class="oval-row">
		<div class="w50 bannerImage"></div>
		<div class="w50 bannerText">
			<div class="oval"></div>
			<p>Текст в секции</p>           
		</div>
	</div>
</section>

<p>Текст в секции</p>

</div>

</section>

CSS:

#section * {
	margin: 0;
	box-sizing: border-box;
}
.oval-row {
	display: flex;
	flex-wrap: wrap;
}
.w50 {
	flex: 0 0 50%;
}
#section {
	overflow: hidden;
	margin: 20px 0;
}
#section .oval-row {
	flex-direction: row-reverse;
}
#section .bannerImage {
	background: url("bg.jpg");
	background-size: cover;
	background-position: center center;
	background-color: #337AB7;
}
#section .bannerText {
	background-color: #337AB7;
	position: relative;
	z-index: 1;
	padding: 120px 40px;;
}
#section .bannerText .oval {
	position: absolute;
	background-color: #337AB7;
	top: -50%;
	right: 0;
	box-shadow: 20px 8px 16px rgba(0,0,0,0.2);
	border-radius: 50%;
	z-index: -1;
	content: '';
}
#section .bannerText h2 {
	font-size: 48px;
	line-height: 48px;
	color: #FFF;
}
#section .bannerText p {
	font-size: 26px;
	line-height: 30px;
	color: #FFF;
}
@media screen and (max-width: 767px) {
	#section .oval-row {
		display: block;
	}
	#section .bannerText {
		padding: 0 40px 60px 40px;
	}
}

#section * {

margin: 0;

box-sizing: border-box;

}

.oval-row {

display: flex;

flex-wrap: wrap;

}

.w50 {

flex: 0 0 50%;

}

#section {

overflow: hidden;

margin: 20px 0;

}

#section .oval-row {

flex-direction: row-reverse;

}

#section .bannerImage {

background: url("bg.jpg");

background-size: cover;

background-position: center center;

background-color: #337AB7;

}

#section .bannerText {

background-color: #337AB7;

position: relative;

z-index: 1;

padding: 120px 40px;;

}

#section .bannerText .oval {

position: absolute;

background-color: #337AB7;

top: -50%;

right: 0;

box-shadow: 20px 8px 16px rgba(0,0,0,0.2);

border-radius: 50%;

z-index: -1;

content: '';

}

#section .bannerText h2 {

font-size: 48px;

line-height: 48px;

color: #FFF;

}

#section .bannerText p {

font-size: 26px;

line-height: 30px;

color: #FFF;

}

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

#section .oval-row {

display: block;

}

#section .bannerText {

padding: 0 40px 60px 40px;

}

JS:

function calculateDesktopOffset(length) {
	return '-' + (length / 2) * Math.tan(15 * Math.PI / 180) + 'px';
}
function makeOvalOverlay() {
	var section = document.getElementById("section");
	var bannerText = section.getElementsByClassName('bannerText')[0];
	var bannerImage = section.getElementsByClassName('bannerImage')[0];
	var oval = section.getElementsByClassName('oval')[0];
	var $height = bannerText.clientHeight;
	var $width = bannerText.clientWidth;
	if (window.innerWidth < 768) {
		bannerImage.style.height = $width / 1.4 + 'px';
		oval.style.width = $width * 3 + 'px';
		oval.style.height = $width * 3 + 'px';
		oval.style.right = '-' + $width * 0.76 + 'px';
		oval.style.top = '-' + $width * 0.2 + 'px';  
		} else {
		bannerImage.style.height = 'auto';
		oval.style.width = $height * 2 + 'px';
		oval.style.height = $height * 2 + 'px';
		oval.style.right = calculateDesktopOffset($height); 
		oval.style.top = "-50%"; 
	}	
}

makeOvalOverlay();
window.addEventListener('resize', function(){
	makeOvalOverlay();
});

function calculateDesktopOffset(length) {

return '-' + (length / 2) * Math.tan(15 * Math.PI / 180) + 'px';

}

function makeOvalOverlay() {

var section = document.getElementById("section");

var bannerText = section.getElementsByClassName('bannerText')[0];

var bannerImage = section.getElementsByClassName('bannerImage')[0];

var oval = section.getElementsByClassName('oval')[0];

var $height = bannerText.clientHeight;

var $width = bannerText.clientWidth;

if (window.innerWidth < 768) {

bannerImage.style.height = $width / 1.4 + 'px';

oval.style.width = $width * 3 + 'px';

oval.style.height = $width * 3 + 'px';

oval.style.right = '-' + $width * 0.76 + 'px';

oval.style.top = '-' + $width * 0.2 + 'px';

} else {

bannerImage.style.height = 'auto';

oval.style.width = $height * 2 + 'px';

oval.style.height = $height * 2 + 'px';

oval.style.right = calculateDesktopOffset($height);

oval.style.top = "-50%";

}

makeOvalOverlay();

window.addEventListener('resize', function(){

makeOvalOverlay();

});

За основу взято решение, найденное на codepen.io у пользователя Zach Handing

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

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

Помощь по установке кода Ответы на часто задаваемые вопросы и решение типовых ошибок и проблем

Страница находится в стадии разработки

Поддержать блог Любые Ваши (пусть даже и скромные) суммы значительно повышают мотивацию развивать блог, делиться наработками и придумывать новые.

Опубликовано: 22.07.2020
Рубрики: Секции
Метки: CSS, JavaScript
7190 просмотров

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

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

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

Капли воды на CSS

Капли воды для оформления фона блока или секции

Разделители для разноцветных секций

Сборник разделителей для перехода между секциями разного цвета.

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

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

Сервал: 28.08.2023 в 16:33

Спасибо большое!

Ответить
Сервал: 14.08.2023 в 18:24

Здравствуйте, Александр! Подскажите, пожалуйста, почему при добавлении второго такого же блока, второй блок не становится овальным, первый тем временем работает?

Ответить
- Alexander: 28.08.2023 в 14:02
  
  Нужно JS переписывать, он сделан под одну секцию по ее айди
  
  Ответить

Пример:

Секция с овалом:

HTML:

CSS:

JS:

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

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

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