
Небольшой код на JavaScript (1 кб. без сжатия), который позволяет открывать одну секцию из группы поверх остальных и выводить дополнительную информацию.
Небольшой код на 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 |
<main class="sgroup-container"> <section class="sgroup"> <div class="close-sgroup">×</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">×</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">×</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">×</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> |
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 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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; 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%; } } |
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 |
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(); |
Разделитель для секций в виде бегущих волн с использованием SVG и CSS
Новогодняя блок-секция с поздравлением
Вариант оформления блока с шестиугольными фотографиями разного размера
Блииин почему в опенкарте не работает! Такая крутая штука!
Супер! Спасибо что поделился такой прикольной штучкой!