Создайте страницу анимированной сплит-экрана

Ваша посадочная страница является важным элементом в вашем Макет сайта Отказ Это первая реальная возможность, в которой вы должны представить свой бизнес, или продукт, который вы продаете, поэтому его дизайн является ключом. Посадочные страницы спроектированы с одной целевой целью, известной как призыв к действию (CTA). Использование цветов и изображений для дополнения вызовов к действию и Пользовательский опыт является обязательным.

• Смотрите рабочий кодепен для этого руководства

В этом руководстве мы пройдем, как построить участие в целевой странице для вымышленного модного бренда. Он будет сосредоточен вокруг конструкции сплит-экрана с большими изображениями и анимированными переходами, которые случаются на паре. Эта страница будет иметь два четких вызова к кнопкам действий, и мы будем использовать HTML, Сасс Для стилизации и прикосновения ванильного JavaScript, который использует синтаксис ES6 (не забудьте, чтобы убедиться, что ваш веб хостинг подходит для ваших потребностей сайта). Слишком сложный? Создайте веб-сайт без необходимости в коде, попробуйте простое Строитель сайта Отказ

01. Установить

Если вы используете CodePen, убедитесь, что CSS установлен на «SCSS» в настройках пера. Вы можете сделать это изменение, нажав на вкладку «Настройки», выберите «CSS» и измените препроцессор CSS в SCSS в раскрывающихся параметрах.

Тогда мы можем начать добавлять в нашем HTML. Мы собираемся обернуть раздел под названием «Left» и раздел «вправо» в классе контейнера, с обоими разделами, приведенными классом «экрана».

 & lt; class = "Контейнер" & gt;
  & lt; Класс раздела = "экран слева" и gt;
  & lt; / раздел & gt;
  & lt; Секция класса = "экран справа" и gt;
  & lt; / раздел & gt;
& lt; / div & gt; 

02. Завершите HTML

Чтобы завершить наш HTML, мы добавим в заголовок для каждого раздела, используя H1. тег. Под тем, что нам нужно будет добавить в кнопку, которая будет ссылаться на другую страницу, если это был реальный проект. Мы дадим это класс кнопка держать вещи приятно и просто.

 & lt; class = "Контейнер" & gt;
   & lt; Класс раздела = "экран слева" и gt;
    & lt; h1 & gt; мужская мода & lt; / h1 & gt;
      & lt; кнопка & gt;
       кнопка «Класс =» = «#» и GT; Узнайте больше и LT; / A & GT;
      & lt; / button & gt;
    & lt; / раздел & gt;

    & lt; Секция класса = "экран справа" и gt;
       & lt; h1 & gt; женская мода & lt; / h1 & gt;
        & lt; кнопка & gt;
          кнопка «Класс =» = «#» и GT; Узнайте больше и LT; / A & GT;
        & lt; / button & gt;
     & lt; / раздел & gt; 

03. Исследуйте переменные SASS

Одна вещь, которую мы все любим о SASS, это использование переменных. Несмотря на то, что нативные переменные CSS получают больше поддержки, мы будем держать вещи в безопасности, используя Sass. Мы поставим их в верхнюю часть нашего .scss , и вы можете выбрать любые цвета, которые вы хотите, но используете RGBA Значения дадут нам больше гибкости.

 / ** Переменные ** /

$ контейнер-барgcolor: # 444;
$ left-bgcolor: RGBA (136, 226, 247, 0,7);
$ Left-Button-Hover: RGBA (94, 226, 247, 0,7);
$ right-bgcolor: RGBA (227, 140, 219, 0,8);
$ правая кнопка-наклона: RGBA (255, 140, 219, 0,7);
$ Ширина Ширина: 75%;
$ маленькая ширина: 25%;
$ AnimatesPeed: 1000 мс; 

04. Отрегулируйте стиль тела

Во-первых, мы рассмотрим всю прокладку по умолчанию и поле для тела, а затем установите семью шрифта, чтобы открыть SAN. Это повлияет на кнопку только на кнопке, поэтому это не имеет значения, на какой шрифт мы используем. Затем мы установим ширину и высоту 100% И убедитесь, что все, что переполняется на оси X, скрыты.

 HTML, Body {
  прокладки: 0;
  Маржа: 0;
  Семья шрифтов: «Открытые SANS», Sans-Serif;
  Ширина: 100%;
  Высота: 100%;
  Overflow-X: скрыто;
} 

05. Стиль титулов секции

Пришло время выбрать шрифт Google для заголовков раздела - мы выбрали дисплей Playfair. Затем использовать переводчик Мы можем убедиться, что заголовки разделов всегда сосредоточены на оси X.

 H1 {
  Размер шрифта: 5rem;
  Цвет: #fff;
  Должность: абсолютный;
  Слева: 50%;
  Топ: 20%;
  Преобразование: Translatex (-50%);
  Белое пространство: NOWRAP;

  Font-Samea: «Дисплей Playfair», Serif;
} 

06. Сделать CTA выделяться

Наши кнопки будут действовать как наши призывы к действию, поэтому они должны быть большими, смелыми и расположены, где их легко нажать. Обе кнопки будут иметь белую границу и интересный переходный эффект. Стили по умолчанию для обеих кнопок будут одинаковыми, однако мы изменим их цвета на находятся.

 .Button {
  Дисплей: блок;
  Должность: абсолютный;
  Слева: 50%;
  Топ: 50%;
  Высота: 2.6rem;
  Padding-Top: 1.2rem;
  Ширина: 15rem;
  текстовый выровнян: центр;
  цвет белый;
  Граница: 3PX Solid #FFF;
  Границы-радиус: 4PX;
  вес шрифта: 600;
  Текстовое преобразование: прописные буквы;
  Текстовое украшение: нет;
  Преобразование: Translatex (-50%);
  Переход: все .2s; 

Основные кнопки будут иметь хороший простой эффект Hover, и мы будем использовать переменные SASS, которые мы указали для цвета, который будет похожий цвет на фоне страницы.

 .Screen.left .Button: hover {
  Фоновый цвет: $ left-button-hover;
  Пограничный цвет: $ left-button-hover;
}

.screen.right .button: hover {
  Фон-цвет: $ правая кнопка-наклона;
  Границы-цвет: $ правая кнопка-наклон; 

07. Установите фона и экраны контейнера

Класс контейнера будет действовать как наша оболочка страницы, и мы установим положение этого относительно, просто потому, что мы хотим разместить экраны на абсолютное позиционирование. Мы дадим контейнер по умолчанию фона цвета, но, конечно, этого не будет видно, потому что мы будем устанавливать разные цвета на оба фона экрана.

. Container {
  Должность: родственник;
  Ширина: 100%;
  Высота: 100%;
  Фон: $ контейнер-барgcolor;
  
    .экран {
      Должность: абсолютный;
      Ширина: 50%;
      Высота: 100%;
      Переполнение: скрыто;
    }
} 

08. Добавить фоновые изображения

Обе левые, так и правые разделы будут отображать изображение, и вы можете найти лицензионные изображения с роялти-изображения от веб-сайтов, таких как Несомненно , Pixabay. или же Шевели (который я использовал в этом руководстве). Чтобы облегчить вещи, я использовал бесплатный хостинг и совместную поддержку изображений, которые называются IMGBB, которые мы можем связать в наших CSS.

 .screen.left {
  Слева: 0;
  Фон: URL ('https://preview.ibb.co/cpabrm/pexels_foto_450212_1.jpg') Центр Центр не повторяется;
  Фон-размер: крышка;
  
    & amp;: до {
       Должность: абсолютный;
      содержание: "";
      Ширина: 100%;
      Высота: 100%;
      Фон: $ left-bgcolor;
    }
} 

Правая сторона страницы также будет отображать фоновое изображение с помощью IMGBB, и мы установим цвет фона на розовый. Опять же, мы устанавливаем размер фона для крышка Отказ Это позволит нам покрыть весь содержащий элемент, который в нашем случае является .экран учебный класс.

 .Screen.right {
  справа: 0;
  Фон: URL ('https://preview.ibb.co/mtopcr/seth_doyle_82563_1.jpg') Центр Центра не повторяется;
  Фон-размер: крышка;
  
   & amp;: до {
      Должность: абсолютный;
      содержание: "";
      Ширина: 100%;
      Высота: 100%;
      Фон: $ right-bgcolor;
    }
} 

09. Добавьте переходы и эффекты зависания

Скорость анимации для нашего эффекта зависания на обоих экранах будет управляться переходом, который удерживает значение нашей переменной $ animatespeed , который составляет 1000 мс (одна секунда). Затем мы закончим, давая анимацию некоторое ослабление, что легко и выходит, что поможет нам более гладкую анимацию.

 .Screen.left, .screen.right, .Screen.right: раньше, .Screen.Left: до {
  Переход: $ AnimatesPeed Все простоты;
} 

То, что мы хотим произойти сейчас, так это то, что когда вы паритете на левом экране, будет добавлен класс к этому разделу, используя JavaScript (который мы напишем на более позднем этапе). Когда этот класс добавлен, то этот экран будет растянуть к любой ширине переменной, которую мы указали, - которая будет 75%, а затем правая сторона будет установлена ​​на меньшую вариабельную вариант ширины (25%).

. Влево .left {
  Ширина: $ Ширина Hever;
}

.hover-Left .right {
  Ширина: $ маленькая ширина;
}
.hover-Left .right: до {
  Z-индекс: 2;
} 

Это работает точно так же, как левая сторона, где будет добавлен новый класс на колесике мыши, используя JavaScript, а правильный экран будет соответственно простираться. Нам также нужно убедиться, что Z-индекс установлен в 2. Таким образом, кнопка CTA становится более заметной.

 .hover - правый .right {
  Ширина: $ Ширина Hever;
}

.haver - правый .left {
  Ширина: $ маленькая ширина;
}

.hover - правый .left: до {
  Z-индекс: 2;
} 

10. Переехать в JavaScript

Мы будем использовать связь ванильного JavaScript, чтобы помочь нам добавлять и удалять классы CSS, и мы также будем использовать некоторые новые функции ES6. Первое, что нам нужно сделать, это объявить некоторые постоянные переменные.

Потому что мы будем использовать документ более одного раза, мы установим постоянную переменную под названием док И храните документ в том, чтобы мы могли сохранить слово «документ» приятно и коротко.

 const doc = документ; 

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

 const Right = doc.Queryselector (". Верно");
const слева = doc.queryselector (". Слева");
const container = doc.Queryselector (". Контейнер"); 

С использованием оставили Постоянная переменная, которую мы объявили на последнем шаге, теперь мы можем добавить его слушателя события. Это событие будет мышиный событие и вместо использования функции обратного вызова мы будем использовать другую функцию ES6 Функции стрелки '(() = & gt;) Отказ

 // Добавляет класс к элементу контейнера на Hover
Left.addeventListener («MouseenTer», () = & GT; {
  Container.ClassList.add («Навес левый»);
}); 

11. Добавить и удалить класс

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

 // Удаляет класс, который был добавлен на Hover
Lever.addeventListener («MouseLeave», () = & gt; {
  Container.ClassList.Remove («Навес левый»);
}); 

До сих пор мы все сделали на левом экране. Теперь мы завершим javaScript и добавляем и удалите классы на элементах вправо. Опять же, мы использовали синтаксис функции arrow здесь, чтобы все выглядеть красиво и аккуратно.

 right.addeventListener ("Mouseenner", () = & gt; {
  Container.ClassList.add («Навесное правильное»);
});

right.addeventListener («MouseLeave», () = & gt; {
  Container.ClassList.Remove («Навес вправо»);
}); 

12. Сделайте это отзывчивым

Нет проекта - независимо от того, насколько велик или маленький - следует избегать реагирования. Итак, на этом этапе мы добавим некоторые медиа-запросы к нашим CSS и сделаем этот небольшой проект как адаптивный на мобильные устройства как можно лучше. Стоит проверить Оригинальный кодепен чтобы увидеть, как это работает.

 @media (максимальная ширина: 800px) {
  h1 {
    Размер шрифта: 2rem; }

  .кнопка {
    Ширина: 12rem;
  } 

Мы убедились, что когда ширина нашей страницы спускается до 800PX, шрифт и кнопки уменьшат в размере. Итак, чтобы закончить все, что мы хотим нацелить высоту, и убедитесь, что наши кнопки переместится вниз по странице, когда высота страницы ниже 700 пикселей.

 @media (максимальная высота: 700px) {
  .кнопка {
    Топ: 70%;
}} 

Хотите сохранить свои страницы? Экспортировать их как PDF и сохранить их в безопасном облачное хранилище Отказ

Веб-дизайн события Генерировать Лондон Возвращение 19-21 сентября 2018 года, предлагая упакованное расписание отраслевых докладчиков, полный день семинаров и ценных сетевых возможностей - не пропустите это. Получить свой генерирующий билет сейчас Отказ

Эта статья была первоначально опубликована в Nat Nat Magazine Выпуск 305. Отказ Подпишись сейчас Отказ

Прочитайте больше:

• 5 сенсационных новых веб-сайтов, которые будут вдохновлены
• Создать анимированный трехмерный текстовый эффект
• 19 Большие сайты прокрутки параллакса