Домой / Для сайта / Превращаемые фоновые секции
Превращаемые фоновые секции

Превращаемые фоновые секции

Отличный и оригинальный пример использования тега section. В этом примере страница разделена на 4 отзывчивых секции. В каждую из секций можно добавлять любую информацию. После клика по секции она откроется на все окно. Чтобы уменьшить секцию до исходного размера необходимо еще раз по ней кликнуть мышкой.

Для создания данного примера использовали CSS и немного скрипта, для работы которого необходимо подключить библиотеку jQuery.

Если есть вопросызадавайте их в комментариях.

Демо

HTML

<div class="wrapper">
 <section class="section-1 section">

 </section>

 <section class="section-2 section">
 </section>

 <section class="section-3 section">

 </section>

 <section class="section-4 section">

 </section>
</div>

CSS

.section {
 background-size: cover;
 position: absolute;
 height: 100vh;
 width: 25vw;
 top: 0;
 overflow: hidden;
 -moz-transform: skew(-10deg, 0deg);
 -ms-transform: skew(-10deg, 0deg);
 -webkit-transform: skew(-10deg, 0deg);
 transform: skew(-10deg, 0deg);
 -moz-transition: all 300ms ease-out;
 -o-transition: all 300ms ease-out;
 -webkit-transition: all 300ms ease-out;
 transition: all 300ms ease-out;
 border-left: 5px solid white;
 border-right: 5px solid white;
 cursor: pointer;
}
.section::before {
 content: "";
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: -2;
 background-color: #3498db;
 -moz-transition: all 500ms ease-out;
 -o-transition: all 500ms ease-out;
 -webkit-transition: all 500ms ease-out;
 transition: all 500ms ease-out;
}
.section::after {
 content: "";
 display: block;
 position: absolute;
 top: 0;
 left: -15%;
 background-position: center;
 background-size: 100%;
 background-repeat: no-repeat;
 width: 130%;
 height: 100%;
 opacity: 0.3;
 z-index: -1;
 -moz-transform: skew(10deg, 0deg);
 -ms-transform: skew(10deg, 0deg);
 -webkit-transform: skew(10deg, 0deg);
 transform: skew(10deg, 0deg);
 -moz-transition: all 300ms ease-out;
 -o-transition: all 300ms ease-out;
 -webkit-transition: all 300ms ease-out;
 transition: all 300ms ease-out;
 overflow: hidden;
}
.section:hover {
 width: 40%;
 z-index: 30;
}
.section:hover::after {
 background-size: 50%;
}
.section:hover:last-of-type {
 left: 63%;
}
.section.expanded {
 width: 100% !important;
 left: 0px;
 z-index: 100;
 -moz-transform: skew(0deg, 0deg);
 -ms-transform: skew(0deg, 0deg);
 -webkit-transform: skew(0deg, 0deg);
 transform: skew(0deg, 0deg);
}
.section.expanded::after {
 -moz-transform: skew(0deg, 0deg);
 -ms-transform: skew(0deg, 0deg);
 -webkit-transform: skew(0deg, 0deg);
 transform: skew(0deg, 0deg);
 background-size: 50%;
 background-position: left;
}
.section.expanded:hover:last-of-type {
 left: 0px;
}
.section.expanded:hover::after {
 background-size: 50%;
 background-position: left;
}

.section-1 {
 left: 0;
}
.section-1::before {
 background-color: #1db45d;
}
.section-1::after {
 background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/141552/internships.svg");
}

.section-2 {
 left: 25%;
}
.section-2::before {
 background-color: #3498db;
}
.section-2::after {
 background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/141552/mentor.svg");
}

.section-3 {
 left: 50%;
}
.section-3::before {
 background-color: #9b59b6;
}
.section-3::after {
 background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/141552/ribbon.svg");
}

.section-4 {
 left: 75%;
}
.section-4::before {
 background-color: #f06d3a;
}
.section-4::after {
 background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/141552/skills.svg");
}

JS

$('.section').on('click', function(){
 $(this).toggleClass('expanded');
})

Отличный и оригинальный пример использования тега section. В этом примере страница разделена на 4 отзывчивых секции. В каждую из секций можно добавлять любую информацию. После клика по секции она откроется на все окно. Чтобы уменьшить секцию до исходного размера необходимо еще раз по ней кликнуть мышкой. Для создания данного примера использовали CSS и немного скрипта, для работы которого необходимо подключить библиотеку jQuery. Если есть вопросы, задавайте их в комментариях. HTML CSS .section { background-size: cover; position: absolute; height: 100vh; width:&hellip;

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.8 ( 4 голосов )
95

Оставить комментарий

Ваш email не будет опубликован.

*