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

Для создания овала используется небольшой код на 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

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

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

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

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

Секция-галерея на GSAP

Блок или секция с меняющимися мышкой фотографиями

Двигающийся по секции мяч

Двигающийся по секции мяч на CSS

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

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

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

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

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

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

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

Пример:

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

HTML:

CSS:

JS:

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

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

Секция-галерея на GSAP

Двигающийся по секции мяч

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

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