Содержание
- 01. Подготовьтесь к работе
- 02. Завершите HTML.
- 03. Изучите переменные Sass
- 04. Отрегулируйте стиль кузова.
- 05. Стиль заголовков разделов.
- 06. Сделайте призывы к действию особенными
- 07. Установите фон контейнера и экраны.
- 08. Добавьте фоновые изображения.
- 09. Добавьте переходы и эффекты наведения.
- 10. Перейдите на JavaScript.
- 11. Добавить и удалить курс
- 12. Сделайте его отзывчивым
Целевая страница - важный элемент в макете вашего сайта. Это первая реальная возможность представить свой бизнес или продукт, который вы продаете, поэтому его дизайн является ключевым. Целевые страницы разработаны с единственной конкретной целью, известной как призыв к действию (CTA). Использование цветов и изображений в дополнение к призывам к действию и пользовательскому опыту является обязательным.
- См. Рабочий CodePen для этого руководства
В этом руководстве мы расскажем, как создать привлекательную целевую страницу для вымышленного модного бренда. Он будет сосредоточен вокруг дизайна с разделенным экраном с большими изображениями и анимированными переходами, которые происходят при наведении курсора.На этой странице будут две четкие кнопки призыва к действию, и мы будем использовать HTML, Sass для стилизации и немного ванильного JavaScript, использующего синтаксис ES6 (не забудьте убедиться, что ваш веб-хостинг соответствует потребностям вашего сайта). Слишком сложно? Создайте сайт без кода, попробуйте простой конструктор сайтов.
01. Подготовьтесь к работе
Если вы используете CodePen, убедитесь, что для CSS установлено значение «SCSS» в настройках пера. Вы можете внести это изменение, щелкнув вкладку настроек, выбрав «CSS» и изменив препроцессор CSS на SCSS в раскрывающихся параметрах.
Затем мы можем начать добавлять в наш HTML. Мы собираемся заключить раздел под названием 'left' и раздел 'right' в контейнерный класс, при этом обоим разделам будет присвоен класс 'screen'.
div> раздел> / раздел> раздел> / раздел> / div>
02. Завершите HTML.
Чтобы завершить наш HTML, мы добавим заголовок для каждого раздела, используя h1 тег. Под ним нам нужно будет добавить кнопку, которая будет ссылаться на другую страницу, если это был реальный проект. Мы дадим этому класс кнопка чтобы все было красиво и просто.
div> section> h1> Мужская мода / h1> button> a href = "#"> Подробнее / a> / button> / section> section> h1> Женская мода / h1> button> a href = "#"> Learn Подробнее / a> / кнопка> / раздел>
03. Изучите переменные Sass
Единственное, что нам всем нравится в Sass, - это использование переменных. Несмотря на то, что собственные переменные CSS получают все большую поддержку, мы будем обеспечивать безопасность, используя Sass. Мы разместим их в верхней части нашего .scss, и вы можете выбрать любые цвета, которые захотите, но используя rgba ценности дадут нам больше гибкости.
/ * * Переменные * * / $ container-BgColor: # 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); $ hover-width: 75%; $ small-width: 25%; $ animateSpeed: 1000 мс;
04. Отрегулируйте стиль кузова.
Во-первых, мы очистим все отступы и поля по умолчанию для тела, а затем установим семейство шрифтов на Open Sans. Это повлияет только на кнопку, поэтому не имеет большого значения, какой шрифт мы используем. Затем мы установим ширину и высоту на 100% и убедитесь, что все, что выходит за пределы оси X, скрыто.
html, body {padding: 0; маржа: 0; семейство шрифтов: 'Open Sans', без засечек; ширина: 100%; высота: 100%; переполнение-x: скрыто; }
05. Стиль заголовков разделов.
Пришло время выбрать шрифт Google для заголовков разделов - мы выбрали Playfair Display. Затем, используя translateX мы можем убедиться, что заголовки разделов всегда центрируются по оси X.
h1 {размер шрифта: 5rem; цвет: #fff; позиция: абсолютная; осталось: 50%; верх: 20%; преобразовать: translateX (-50%); белое пространство: nowrap; семейство шрифтов: ’Playfair Display’, с засечками; }
06. Сделайте призывы к действию особенными
Наши кнопки будут действовать как призыв к действию, поэтому они должны быть большими, жирными и располагаться там, где на них будет легко нажимать. Обе кнопки будут иметь белую рамку и интересный эффект перехода. Стили по умолчанию для обеих кнопок будут одинаковыми, однако мы изменим их цвет при наведении курсора.
.button {дисплей: блок; позиция: абсолютная; осталось: 50%; верх: 50%; высота: 2,6 бэр; набивка: 1,2 бэр; ширина: 15бэр; выравнивание текста: центр; цвет белый; граница: 3px solid #fff; радиус границы: 4 пикселя; font-weight: 600; преобразование текста: прописные буквы; текстовое оформление: нет; преобразовать: translateX (-50%); переход: все .2s;
Основные кнопки будут иметь приятный простой эффект наведения, и мы будем использовать переменные Sass, которые мы указали для цвета, который будет аналогичен цвету фона страницы.
.screen.left .button: hover {цвет фона: $ left-button-hover; цвет границы: $ left-button-hover; } .screen.right .button: hover {background-color: $ right-button-hover; цвет границы: $ right-button-hover;
07. Установите фон контейнера и экраны.
Класс контейнера будет действовать как наша оболочка страницы, и мы установим его относительную позицию просто потому, что мы хотим позиционировать экраны в абсолютное позиционирование. Мы дадим контейнеру цвет фона по умолчанию, но, конечно, этого не будет видно, потому что мы будем устанавливать разные цвета для обоих фонов экрана.
.container {позиция: относительная; ширина: 100%; высота: 100%; фон: $ container-BgColor; .screen {позиция: абсолютная; ширина: 50%; высота: 100%; переполнение: скрыто; }}
08. Добавьте фоновые изображения.
В левом и правом разделах будет отображаться изображение, и вы можете найти бесплатные стоковые изображения с таких сайтов, как Unsplash, Pixabay или Pexels (которые я использовал в этом руководстве). Чтобы упростить задачу, я использовал бесплатную службу хостинга и обмена изображениями под названием imgbb, на которую мы можем ссылаться в нашем CSS.
.screen.left {слева: 0; фон: URL (’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’) в центре без повтора; размер фона: обложка; &: перед {положением: абсолютным; содержание: ""; ширина: 100%; высота: 100%; фон: $ left-bgColor; }}
В правой части страницы также будет отображаться фоновое изображение с использованием imgbb, и мы установим цвет фона на розовый. Опять же, мы устанавливаем размер фона на покрытие. Это позволит нам покрыть весь содержащий элемент, которым в нашем случае является .экран класс.
.screen.right {right: 0; фон: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) в центре без повтора; размер фона: обложка; &: перед {положением: абсолютным; содержание: ""; ширина: 100%; высота: 100%; фон: $ right-bgColor; }}
09. Добавьте переходы и эффекты наведения.
Скорость анимации для нашего эффекта наведения на обоих экранах будет контролироваться переходом, который содержит значение нашей переменной. $ animateSpeed, что составляет 1000 мс (одну секунду). Затем мы закончим, придав анимации немного смягчения, которое помогает сделать анимацию более плавной.
.screen.left, .screen.right, .screen.right: до, .screen.left: до {transition: $ animateSpeed, все легкость входа-выхода; }
Сейчас мы хотим, чтобы при наведении курсора на левый экран в этот раздел добавлялся класс с использованием JavaScript (который мы напишем позже). Когда этот класс добавляется, этот экран будет растягиваться до любой ширины указанной нами переменной - которая будет составлять 75%, а затем правая сторона будет установлена на меньшую ширину переменной (25%).
.hover-left .left {ширина: $ ширина наведения; } .hover-left .right {width: $ small-width; } .hover-left .right: перед {z-index: 2; }
Это работает точно так же, как левая сторона, где новый класс будет добавлен при наведении курсора мыши с использованием JavaScript, и правый экран будет соответственно растягиваться. Нам также необходимо убедиться, что z-индекс установлен на 2 поэтому кнопка CTA становится более заметной.
.hover-right .right {width: $ hover-width; } .hover-right .left {width: $ small-width; } .hover-right .left: перед {z-index: 2; }
10. Перейдите на JavaScript.
Мы будем использовать немного ванильного JavaScript, чтобы помочь нам добавлять и удалять классы CSS, а также мы будем использовать некоторые из новых функций ES6. Первое, что нам нужно сделать, это объявить некоторые постоянные переменные.
Потому что мы будем использовать документ более одного раза мы будем устанавливать постоянную переменную с именем док и сохраните в нем документ, чтобы слово «документ» оставалось коротким и красивым.
const doc = документ;
Теперь нам нужно установить еще три константы, которые будут хранить .верно, .оставил а также .контейнер селекторы. Причина, по которой мы используем константы, заключается в том, что мы знаем, что не хотим изменять их значение, поэтому использование констант имеет смысл. Теперь, когда они установлены, мы можем продолжить и добавить к ним некоторые события мыши.
const right = doc.querySelector (". право"); const left = doc.querySelector (". left"); const container = doc.querySelector (". контейнер");
С помощью оставил постоянную переменную, которую мы объявили на последнем шаге, теперь мы можем добавить к ней прослушиватель событий. Это событие будет центр мыши событие, и вместо использования функции обратного вызова мы будем использовать другую функцию ES6, называемую Стрелочные функции »(() =>).
// добавляет класс к элементу контейнера при наведении курсора влево. addEventListener ("mouseenter", () => {container.classList.add ("hover-left");});
11. Добавить и удалить курс
На последнем шаге наш слушатель событий добавил центр мыши событие, которое нацелено на основной класс контейнера и добавляет новый класс с именем левый к элементу левого раздела. Теперь, когда этот вызов добавлен, нам нужно удалить его при наведении курсора. Мы сделаем это с помощью мышь событие и .Удалить() метод.
// удаляет класс, который был добавлен при наведении курсора влево. addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");});
До сих пор мы все делали на левом экране. Теперь мы закончим JavaScript и добавим и удалим классы в элементах правого раздела. Мы снова использовали синтаксис стрелочной функции, чтобы все выглядело красиво и аккуратно.
right.addEventListener ("mouseenter", () => {container.classList.add ("hover-right");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("hover-right");});
12. Сделайте его отзывчивым
Ни один проект - независимо от того, насколько он большой или маленький - не должен быть отзывчивым. Итак, на этом этапе мы добавим несколько медиа-запросов в наш CSS и сделаем этот небольшой проект максимально адаптируемым к мобильным устройствам. Стоит проверить исходный CodePen, чтобы увидеть, как это работает.
@media (max-width: 800px) {h1 {font-size: 2rem; } .button {width: 12rem; }
Мы позаботились о том, чтобы при уменьшении ширины страницы до 800 пикселей шрифт и кнопки уменьшились в размере. Итак, чтобы завершить работу, мы также хотим настроить высоту и убедиться, что наши кнопки перемещаются вниз по странице, когда высота страницы становится ниже 700 пикселей.
@media (max-height: 700px) {.button {top: 70%; }}
Хотите сохранить свои страницы? Экспортируйте их в формате PDF и сохраните в безопасном облачном хранилище.
Событие веб-дизайна Создать Лондон возвращается 19-21 сентября 2018 года, предлагая насыщенный график ведущих докладчиков, целый день семинаров и ценные возможности для нетворкинга - не упустите его. Получите свой билет Generate сейчас.
Эта статья изначально была опубликована в сетевом журнале Выпуск 305. Подпишитесь сейчас.
