HTML:
|
1 2 3 4 5 6 7 8 9 |
<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> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
#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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
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
Спасибо большое!
Здравствуйте, Александр! Подскажите, пожалуйста, почему при добавлении второго такого же блока, второй блок не становится овальным, первый тем временем работает?
Нужно JS переписывать, он сделан под одну секцию по ее айди