Очень эффектно выглядит на большом экране

Мастер-класс: верстаем интерактивный баннер

Сегодня я расскажу как создать красивый экран, реагирующий на движение мышки пользователя.

1. Разметка

Для начала создадим html-разметку для нашего красивого баннера-навигации.

<section class=”container”>
<div class=”section”>
<div class=”cont_title”>
<h1>Название заповедника</h1>
<h3>Статус</h3>
</div>
<div class=”cont_desc”>
<p>Местоположение</p>
</div>
</div>
</section>

2. Стили

Со структурой нашей страницы разобрались. Теперь пора перейти к самому интересному. Начнем писать стили!

html, body {
margin: 0;
max-width: 100%;
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}
.section {
position: relative;
height: 100%;
align-items: center;
justify-content: center;
box-sizing: border-box;
text-align: center;
flex: 1;
}
.cont_title {
position: relative;
margin: auto;
width: 100%;
height: 300px;
text-align: center;
margin-top: 30vh;
}
.cont_title h1 {
text-transform: uppercase;
text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
font-size: 3.5vw;
margin: 0;
vertical-align: middle;
}
.cont_title h3 {
text-transform: uppercase;
font-size: 1.3vw;
}
.cont_desc {
position: relative;
display: block;
text-align: center;
width: 60%;
height: auto;
margin: auto;
padding-top: 30px;
}
.cont_desc p {
margin: 0;
font-size: 20px;
}
.section:hover {
flex: 1.8;
transition: flex 0.4s;
}
.section:hover > .cont_title h1 {
font-size: 5vw;
transition: font-size 0.4s;
}
.section:hover > .cont_title h3 {
font-size: 1.5vw;
transition: all 0.4s;
}
.cont_desc {
opacity: 0;
}
.section:hover > .cont_desc {
opacity: 1;
transition-delay: 0.5s;
transition: opacity 0.8s;
}
.section {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.section:nth-child(1) {
background-image: url(“http://epic.spb.ru/demo/pic1.jpg");
}
.section:nth-child(2) {
background-image: url(“http://epic.spb.ru/demo/pic2.jpg");
}
.section:nth-child(3) {
background-image: url(“http://epic.spb.ru/demo/pic3.jpg");
}
.section:nth-child(4) {
background-image: url(“http://epic.spb.ru/demo/pic4.jpg");
}
.section:nth-child(5) {
background-image: url(“http://epic.spb.ru/demo/pic5.jpg");
}
@font-face {
font-family: ‘Roboto Condensed’;
font-style: normal;
font-weight: 400;
src: local(“Roboto Condensed”), local(“Roboto Condensed-Regular”), url(https://fonts.gstatic.com/s/Roboto Condensed/v4/jObgDQiPUtmACAaaK3pMG6CWcynf_cDxXwCLxiixG1c.ttf) format(“truetype”);
}
.cont_title h1 {
color: white;
font-family: 'Roboto Condensed', sans-serif;
}
.cont_title h3 {
color: white;
font-family: 'Roboto Condensed', sans-serif;
}
.cont_desc p {
font-family: 'Roboto Condensed', sans-serif;
color: white;
}
.container:hover > .section {
filter: brightness(22%);
}
.container:hover > .section:hover {
filter: brightness(100%);
}
.section {
transition: all 0.4s;
}

--

--

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Workafrolic (±∞)

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю.