Як швидко створити індивідуальну Головну сторінку за допомогою сітки Bootstrap і бібліотеки jQuery

image

Як ми знаємо, перша думка людини виявляється самим вірним. І це працює в усьому: думка про машину, одязі, архітектурі і т. д. З веб-ресурсами – те ж саме. При відкритті будь-якого сайту, в першу чергу ми звертаємо увагу на головну сторінку цього сайту і буквально за пару секунд ми розуміємо, будемо ми далі залишатися на цьому сайті чи ні.

Мені хотілося б поділитися з вами завданням, яке поставили мені і моїй команді. Реалізувати її довелося з усією відповідальністю (що, втім, звичайна справа в розробці).

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

Що було далі? Дивіться під катом!

Вибір платформи для розробки
Для верстки проекту був обраний HTML і CSS Framework Bootstrap – набір інструментів від Twitter для створення користувацьких сторінок. Він робить розробку значно простіше. Bootstrap Framework має набір готових рішень на основі CSS і HTML для створення типографіки, форм, кнопок, сіток і т. д. Він був обраний в якості основи і скелета сайту, та як нам потрібно було отримати на виході крос-браузерний, адаптивний вигляд нашого сайту.

Основні переваги Bootstrap Framework:

  1. Економія часу. Дозволяє заощадити час і зусилля, використовуючи шаблони дизайну і класи, і сконцентруватися на інших розробках
  2. Висока швидкість. Динамічні макети Bootstrap масштабуються на різні пристрої і дозволу екрану без будь-яких змін в розмітці
  3. Простота у використанні
  4. Сумісність з браузерами
  5. Відкрите програмне забезпечення
Для вибору іконок була обрана бібліотека FontAwesome. Це, свого роду, иконочный шрифт, тобто шрифт, в якому замість літер та цифр, містяться спеціальні символи і знаки. Ви можете оформляти їх через CSS точно так само, як робите це зі звичайним текстом.

До переваг бібліотеки можна віднести:

  1. Оформлення через CSS
  2. Векторна природа дозволяє легко масштабувати іконки до будь-якого розміру без втрати якості
  3. HTTP Один запит замість кількох (на відміну від растрових зображень)
  4. швидке завантаження з-за невеликого розміру
  5. широка браузерна підтримка, включаючи IE6
Так як нам потрібно було реалізувати сторінку з певними ефектами (слайдер, анімація відкриття пошуку і так далі) була обрана бібліотека jQuery. Дана бібліотека фокусується на взаємодії між HTML і JavaScript.

До переваг бібліотеки можна віднести:

  1. Полегшує маніпулювання моделлю документа DOM
  2. Безліч різних анімаційних ефектів
  3. Крос-браузерна сумісність
  4. Модульність jQuery. Ви можете наростити функціонал, підключаючи модулі
  5. Простота використання

В поставлених завданнях для реалізації слайдера був вибрав плагін під jQuery OwlCarousel. Про достоїнства і переваги плагіна можна говорити довго, але найголовнішими і основними є те, що він:

  • простий у використанні
  • знаходиться у вільному доступі
  • містить детальну документацію
  • безкоштовний
  • постійно оновлюваний.
Однією з головних задач, яка була поставлена перед командою, було зробити так, щоб перший екран можна було проскроллить відразу ж, а далі застосувати вже звичайний скролл. Для цього ми використовували плагін scrollify. Він легкий, гнучкий і просто в установці.

Більш докладний використання даних плагінів я опишу далі.

Підготовка HTML документа до використання

Щоб почати працювати з усіма інструментами, які були перераховані вгорі, потрібно налаштувати документ, в якому буде відбуватися роботи. Також треба підключити всі бібліотеки, плагіни і т. д.

Так як стаття пишеться з розрахунком на те, що у вас є вже досвід frontend розробки, детально не будемо вдаватися в подробиці, як слід підключати і прописувати шляху.

Нижче я наводжу код, в якому йде підключення всіх таблиць стилів, включаючи нашу. Кастомний таблиця стилів потрібна для того, щоб ви могли стилізувати будь-які елементи на сторінці, а також змінити стилі для бібліотек.

<link rel="stylesheet" href="{your-path}/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="{your-path}/font-awesome/font-awesome-4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="{your-path}/main.css">
<link rel="stylesheet" href="{your-path}/partials.css">
<link rel="stylesheet" href="{your-path}/owl.carousel/assets/owl.carousel.css">
<link rel="stylesheet" href="{your-path}/header.css">
<link rel="stylesheet" href="{your-path}/home-page.css">
<link rel="stylesheet" href="{your-path}/animate/animate.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="{your-path}/bootstrap/js/bootstrap.min.js"></script>
<script src="{your-path}/owl.carousel/owl.carousel.min.js"></script>
<script src="{your-path}/jquery.scrollify.min.js"></script>
<script src="{your-path}/main.js"></script>

За даним кодом видно, що я підключив всі бібліотеки, які були описані вище. Всі таблиці стилів я підключив в тегу. Всі jQuery бібліотеки, плагіни, а також наш файл зі скриптами, підключили кінці тіла документа.

Далі хотілося б поділитися завданнями. Які ефекти, переходи, анімації тощо потрібно реалізувати:

  1. Слайдер на першому екрані, який буде fullscreen. (Рис. 1) Повинно бути три екрана слайдера, які будуть перемикатися за допомогою кнопок, з ефектами (на рис.1 ці кнопки позначаються fadeIn (плавне згасання) і fadeOut (плавне поява). В залежності від екрану і пристрої, слайдер повинен руйнуватися і назад запускатися.
  2. Рядок пошуку повинна анимироваться при відкритті і закритті. При відкритому стані пошуку повинно бути модальне вікно, яке буде розкриватися на весь екран. (Рис. 2)
  3. Перший скрін, на якому знаходиться слайдер, при скролле повинен проскроллиться до секції нижче.
  4. При наведенні на блоки вони повинні збільшуватися в розмірі і розкривати блок з описом. (Рис. 3)

Рис. 1


Рис. 2


Рис. 3

Завдання 1

Як було описано вище, для слайдера ми будемо використовувати OwlCarousel. Цей плагін дуже легко налаштовується. Документацію для нього можна знайти на офіційному сайті www.owlcarousel.owlgraphic.com/.

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

<div class="owl-carousel background-slider">
<div class="background-move item" style="background-image: url('../assets/images/add-offer-bg.jpg');background-size: cover;">
</div>
</div>

Як бачимо за кодом вище, структура слайдера наступна:

  1. Блок з класом, за яким буде викликатися слайдер
  2. Блок з класом item, в якому буде лежати контент слайдера (текст, елементи управління, фон)
Можна помітити, що в класу item є инлайновые стилі background-image і background-size. Ці стилі відповідають за те, щоб на трьох екранах був різний задній фон, а background-size дозволяє нам розтягнути зображення за всі області.

Після того як ми сформували структуру нашого слайдера, нам треба його викликати. Робиться це за допомогою скрипта який буде призведе нижче:

var carousel = $(".background-slider"); // Селектор за яким викликається слайдер
carousel.owlCarousel({
animateOut: 'fadeOut', // Ефект анімації при переході на інші скріни
items:1,
mouseDrag: false,
activeClass: "active-owl",
touchDrag: false,
navigation:false
});

Для досягнення належної анімації, зміни екранів в слайдері недостатньо просто вказати якийсь параметр. Повинна бути підключена таблиця стилів animate.css. Ця бібліотека дозволяє з допомогою CSS анімувати об'єкти різними способами. В даному випадку нам потрібний ефект вицвітання.

Також потрібно було реалізувати три кнопки, за якими будуть перемикатися слайди. В коді, який наведено нижче, задана HTML структура навігації слайдера.

Використовувалися кастомні кнопки навігації, тому що стандартна навігація, яка запропонована слайдером, нам не підходила. Не випадково, що на елементах з класом item можна помітити атрибут data type. Цей атрибут допоможе перемикати потрібний слайдер. У кожного слайда є свій порядковий номер і для того, щоб цю навігацію змусити працювати, кожна кнопка повинна мати порядковий номер слайда.


<div class="navigation-slider text-center" >
<div class="item active-step inline-block" data type="0" data-clicked="true">
<div class="content-item">
<div class="name-step text-center">
<button class="btn btn-change-bg">
OFFER
</button>
</div>
<div class="short-text description-center">
your goods and sevices
<br>
directly to businesses
</div>
</div>
</div>
</div>

Тепер потрібно написати скрипт, який буде відпрацьовувати за натисканні на кожну з цих кнопок, запам'ятовувати їх порядковий номер та передавати в слайдер дані про те, який скрін повинен відображатися в даний момент. Також треба додати клас active-step, щоб виділити активну кнопку, і було інтуїтивно зрозуміло, який скрін включений.

$(".navigation-slider").find('.item').click(function() {
var buttonElementId = $(this).data("type"),
clicked = $(this).data("clicked");
var item = $(".button-slider").find('.item[data type="' + this.currentItem + '"]'); $(this).siblings().removeClass("active-step").data("clicked", true);
$(this).addClass("active-step");
if(clicked){
carousel.trigger('to.owl.carousel',buttonElementId);
}
});

Залишилося ще пару дрібниць по даній задачі, і можна буде довести дану сторінку до ідеалу.

Зробимо дестрой плагіна. Так як ми використовуємо Bootstrap сітку, дестроим слайдер на дозволі, коли ширина екрана буде менше 1200 пікселів. Відповідно, будь-екран, який буде менше 1200 пікселів, буде виглядати, як на малюнку 4.


Рис. 4

Щодо задачі про розподіл трьох слайдів по всій висоті екрана, то застосовується головний скрін, який розбивається на три секції. Наводжу код, в якому я руйную слайдер і ділю головний скрін на три секції:

var windowWidth = $(window).width();
var mainPageBg = $(window).height();
if(windowWidth < 1200 ){
carousel.trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
carousel.css("height","авто");
$(".background-slider .background-move").each(function(){
$(this).height((mainPageBg) / 3 )
});
$.scrollify.disable();
}

У даній статті була зроблена спроба показати, наскільки зовнішній вигляд головної сторінки важливий для вашого сайту. Крім того, було показано, які технології краще використовувати і чому. У наступній статті я розповім, як добитися гарного ефекту відкриття і закриття рядка пошуку, за допомогою CSS.

Спасибі за увагу!

Матеріал підготовлено: greebn9k (Сергій Грибняк), @V1pBoy (Віталій Калашников), silmarilion (Андрій Хахарев)
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.