Abr@X@bra.ru
Мастер-класс: верстаем обложку для известного журнала
Мастер-класс: верстаем обложку для известного журнала

Мастер-класс: верстаем обложку для известного журнала

05.09.2017
122

Хочу поделиться как можно сделать очень красивую, интерактивную обложку, которая реагирует на движение мыши.

Что за журнал ее заказал, думаю догадаетесь сами.

Вот что получиться в итоге:


Вот ссылка на готовую работу.

Данную работу также можно посмотреть или скачать с GitHub.

Разметка

Необходимо создать первоначальную разметку:

<div class="sections">

    <div class="sections__item">
        <div class="img" style="background-image: url(img/01.jpg)"></div>
        <div class="desc">
            <h1 class="desc__title">Holley Dorrough</h1>
            <div class="desc__txt">Jordan Hartley</div>
        </div>
    </div>

    <div class="sections__item">
        <div class="img" style="background-image: url(img/02.jpg)"></div>
        <div class="desc">
            <h1 class="desc__title">Riviera Maya - Mexico</h1>
            <div class="desc__txt">Photographer Ana Dias</div>
        </div>
    </div>

    <div class="sections__item">
        <div class="img" style="background-image: url(img/03.jpg)"></div>
        <div class="desc">
            <h1 class="desc__title">SUMMER VALENTINE</h1>
            <div class="desc__txt">Photographer Ana Dias</div>
        </div>
    </div>

    <div class="sections__item">
        <div class="img" style="background-image: url(img/04.jpg)"></div>
        <div class="desc">
            <h1 class="desc__title">Riviera Maya - Mexico</h1>
            <div class="desc__txt">Photographer Ana Dias</div>
        </div>
    </div>

    <div class="sections__item">
        <div class="img" style="background-image: url(img/05.jpg)"></div>
        <div class="desc">
            <h1 class="desc__title">Bangkok</h1>
            <div class="desc__txt">Photographer Ana Dias</div>
        </div>
    </div>

</div>

Разметка довольно простая, есть общий класс обертка - sections. От него наследуются класс - item, данный класс будет чередоваться на то количество раз, сколько нужно отобразить элементов (в данном случае фото) в ряду. Он в свое время является также оберткой и имеет своих детей:

-- класс img – на него инлайново повесил background-image который будет отрисовывать наши фотографии, они были подготовлены заранее.

-- класс desc - данный класс, является родителем и также имеет своих детей:

--- title – данный класс присвоен тегу h1 который отвечает за заголовок.

--- txt – данный класс, отвечает за описание заголовка.

Разметка готова, можем приступать к написанию стилей.  

Стили – sass

Первым делом зададим стили для рутового контейнера обертки - sections:

.sections
  min-width: 768px
  width: 100vw
  height: 100vh
  display: flex

Так как для мобильных устройств будет другая версия, данная будет работать только на десктопных устройствах и планшетах, ставим минимальную ширину - 768px.

Даем ширину - 100vw, чтобы он тянулся всегда на всю ширину экрана.

Даем также высоту - 100vh, чтобы контейнер тянулся, на всю высоту экрана.

И задаем ему -   display: flex, чтобы все вложенные классы которые у него есть (в данном случае это класс item), выровнялись по одной оси.

Далее необходимо написать стили для класса item:

&__item
    flex: 1
    display: flex
    transition: 0.5s
    cursor: pointer
    align-items: center
    position: relative
    justify-content: center
    z-index: 9
    filter: brightness(20%)

flex: 1 – данное свойство, растянет каждый item равномерно на всю ширину экрана.

display: flex – нужен для того, чтобы можно было выровнять по центру текст.  

transition: 0.5s – даст нам плавную анимацию фотографий.

cursor: pointer – при наведение курсора на каждый item, будет появляется вместо курсора, рука.

align-items: center –  выравниваем контент (заголовок и описание) по центру фотографии.

position: relative – чтобы можно было наследоваться через position: absolute детям, в данном примере это класс desc.

justify-content: center – выравниваем контент по центру (по ширине).

filter: brightness(20%) – данное правило, наложит на каждый item, прозрачный черный цвет, чем больше значение к 100% тем прозрачность будет больше.  

Далее необходимо задать стили которые будут работать при наведении на каждый item - hover (их будет несколько).

Первый hover:

&:hover
      flex: 1.5
      filter: brightness(100%)
      transition: 1s

flex: 1.5 – данное правило увеличит по ширине item.

filter: brightness(100%) – полупрозрачный черный цвет, станет полностью прозрачным.

transition: 1s – когда item будет увеличиваться по ширине, увеличение за счет данного правило, будет происходить плавно.

Второй hover:

&:hover .desc
      opacity: 1
      transition: 0.5s
Второй hover, нужен для того, чтобы при наведении появлялось плавно описание (заголовок и описание) за который отвечает класс (обертка) - desc.
&:hover .desc
      opacity: 1
      transition: 0.5s

Далее по списку идет класс - img, который отвечает за вывод фотографий:
.img
      background-position: 50% 50%
      background-repeat: no-repeat
      background-size: cover
      width: 100%
      height: 100vh

background-position – вот таким правилом 50% 50% задаем, чтобы фотографии всегда располагались по центру.

background-repeat – так как фотографии выводим через свойство - background-image, необходимо задать - no-repeat, чтобы они не повторялись.

background-size: cover – растянет равномерно фотографии на всю ширину item -ма.

Далее зададим стили, классу desc, который служит оберткой для описания:

.desc
      position: absolute
      z-index: 100
      opacity: 0

position: absolute – нужен, чтобы данный класс вышел из общего потока, но так как ему не задаем явных стилей типа - top: 0 или left: 0 и т.д. Родитель с классом item за счет свойство flex-box - align-items: center выронит его по центру, по высоте item.

opacity: 0 – сделаем данный класс и его детей невидимыми. Тут нужно вспомнить про второй hover, который присвоен классу item. В нем данное значение изменяем на 1.   

Осталось дело за малым, это задать стили для заголовка h1 и описания.

&__title
        font-family: 'Roboto Medium', sans-serif
        color: #000
        font-size: 31px
        padding: 7px 15px
        background-color: yellow
      &__txt
        font-family: 'Roboto Light',sans-serif
        font-size: 18px
        color: #fff

Тут все очень просто, задаем шрифта, размер шрифта, цвет, желтый background.

Вот и все, так все просто!

Вот ссылка на готовый результат.

Делайте то, что вы любите и любите то, что вы делаете!





Мастер-класс, html, css
Читайте также:
3 новых CSS-функции для изучения в 2017 году

3 новых CSS-функции для изучения в 2017 году

В этом посте, поговорить хочу про CSS, а если быть точнее про новые его фишки которые стоить знать.
Читать
Курс по React JS #1. Пилотный выпуск. Привет React!

Курс по React JS #1. Пилотный выпуск. Привет React!

В этом посте расскажу как написать первое простое приложение на React js.
Читать
Многоуровневое меню Битрикс

Многоуровневое меню Битрикс

Вывести многоуровневое меню в Битрикс достаточно просто, но почему-то довольно часто именно на этом этапе у многих разработчиков...

Читать