Давайте подготовим окружение для нового проекта:
Для начала, скачаем стартовый шаблон:
С обновляемого ресурса:
[maxbutton id="1" url="#set-default" text="Начальные установки" ]
[maxbutton id="1" url="#header" text="Верстаем: Шапка сайта" ]
[maxbutton id="1" url="#menu_main" text="Верстаем: Меню главное" ]
[maxbutton id="12" url="#magnific_popup" text="Magnific-Popup подключаем!" ]
[maxbutton id="11" url="#libs" text="libs.js - Подключение Библиотеки" ]
[maxbutton id="12" url="#blure" text="Blure - Делаем Блюр фона!" ]
Или по постоянным ссылкам:
Мы выберем OptimizedHTML_2.0
РАСПАКОВАТЬ В ПАПКУ БУДУЩЕГО САЙТА:
Нужно установить:
У нас уже стоит!
Далее, откроем в консоли нашу папку:
На MAC-ке ТАК:
И после 5-6 минутного ожидания, вроде установились ПАКЕТЫ:
Иногда просит обновить сам пакет npm:
Не забываем (Для Ре-Запуска проекта):
И тут же запустим GULP
Установили!
Далее проверим работу Gulp:
Во общем пока Анимацию - не подключаем!
Теоретически в OptimizedHTML_2.0 - уже встроена возможность CSS - Анимации.
Для начала подключим необходимые шрифты:
Скопируем все шрифты из папки "Lesson OVK" - в соответствующую папку Стартового шаблона OptimizedHTML_2.0
Остановим сервер и выполним сборку проекта:
И проверим подключение наших шрифтов:
Изменим дефолтный шрифт:
И сразу оформляем стили:
Появился фон:
И что бы верхушка фона прилипала к верху и центру:
Смотрим что получается:
Теперь нам нужно сделать что бы Группа Телефон - на мобильных устройствах оказывался под логотипом.
А меню уже ниже.
https://getbootstrap.com/docs/3.3/css/
И видим в каком порядке происходит вывод:
Затем переставим местами в html - наши колонки:
Видим как поменялся порядок вывода колонок:
И они поменялись местами:
Теперь телефон - на мобильных устройствах будет уезжать под логотип.
[maxbutton id="4" text="Верстаем МЕНЮ главное" ]
Пункт меню "Главная" - у на активен - поэтом укажем класс:
Затем сразу оформим Item - меню:
Получилось так:
Продолжим работать над МЕНЮ:
Затем добавим цвет на hover - меню:
сделаем плавный переход на hover (решение 2 - через глобальный класс)
|
1 2 |
<strong>.my_trans </strong>transition: all <strong>.6s</strong> ease |
и используем класс перехода:
И также подсветим активный пункт МЕНЮ:
Смотрим на меню:
И теперь подключим FontsAwesome:
Подключили и проверим вывод иконки:
Смотрим:
И оформим стиль телефона:
Оформим: "Заказать обратный звонок"
и еще упростим наш transition
И вызов соответственно:
Top-Line - Сверстали!
Далее верстаем контент-текстовый блок:
с кнопкой, Item - списком и фото оборудования.
Накидываем 2 div-a по 6 колонок:
И смотрим:
Далее Item-список:
И видим список встал:
Далее
Далее
Берем готовый Gist Button
И вставляем:
Перекрасим их в ЗЕЛЕНЫЙ
И вуаля)
Отлично! Но картинка может вести себя не предсказуемо.
Поэтому добавим класс:
И финальный результат верстки header (пока без адапации)
Теперь добавим анимированную icon мышку:
Возьмем Gist mousewheel-icon
GO в конвертер
Полученный SASS-код вставляем в main.sass
и преобразуем пробелы в табы:
И оформим сам класс:
Смотрим на мышку-иконку:
Можно немножко кастомизировать наш "mouse-whell"
Перекрасим ее в наш $blue_gray
Далее сделаем Меню Гамбургер для мобильных устройств.
Далее - при сжимании страницы у нас меню перескакивает на следующую строчку:
Поэтому исправим:
Копируем html-гамбургер меню и вставляем:
Далее вставляем CSS и конвертируемым пробелы в TAB-ы
Далее в common.js
==================================================
Этот момент нам бы изучить!!!
Что за цели Яндекс???
==================================================
Кроме того - Наше меню не на месте - поэтому исправим:
и идем в media.sass
А тут перенесем:
И еще чутка стилизуем меню:
>
На малых экранах - пока так:
Симпатично и по центру)
Но наше Меню-Гамбургер все же болтается в стороне.
[maxbutton id="4" text="Адаптивим средину-контент Хэдера" ]
Исправляем:
А картинку оборудования - будем скрывать на малых разрешениях.
И не плохо получилось:
Заголовок отцентрировал + Items по центру с выключкой по левому краю.
И еще поставим кнопку по середине на малых экранах -
для этого обернем в html- ее и напишем медиа-запрос:
Все ровно - по центру:
[maxbutton id="4" text="Доделываем Меню" ]
GO в html:
Смотрим на меню на СРЕДНИХ МОНИТОРАХ:
И так ее переопределяем:
Перекрасили в белые пункты:
И опустим чуть ниже наше Toggle-Menu, что бы оно не прилипало к телефону:
Финальный вид Toggle-Menu:
Адаптивить Header - Закончили!
[maxbutton id="5" text="Урок-15 Верстка. Dark Line Digital преимущества" ]
Накидаем сразу полосу:
Видим ее)
Далее смотрим на нашу полосу и анализируем:
Что же мы видим?
4 блока по 3 колонки: по 3 колонки на Item
Смотрим:
И поскольку мы не будем стилизовать сетку - т.е. не будем добавлять классы сюда >
Теперь стилизуем:
Вообще))
Смотрим результат:
[maxbutton id="5" text="Адаптивим Dark Line Digital преимущества" ]
И получилось норм:
[maxbutton id="5" text="Верстка. Секция <Наш профиль>" ]
Смотрим на дизайн секции:
"Галлерея" - Наш профиль!
Смотрим:
Разметка HTML
Оформление SASS:
Смотрим:
Однако - при уменьшении экрана - фото все же репитится !
Что бы этого не было:
Создадим класс "Table"
Далее создадим разметку для "Треугольника" под иконку
И оформим:
Тут подробно:
Превратим наш "gallary-wrap" в ссылку:
Появляется курсор на фото
Вставляем иконку "Play"
Далее поработаем над "Overlay"
Однако! Наш оверлей - перекрыл иконку "Play"
Поэтому:
И выроним по центру по вертикали иконку "Play"
Смотрим:
Добавим плавное затемнение Overlay
Работаем теперь над Правой Контентной частью:
И уже видим результат:
Далее мы сделаем более универсальным класс list-список что бы можно было независимо его использовать в различных секциях и даже проектах:
Копируем список от сюда:
Вставляем список - Сюда:
Исправляем:
[maxbutton id="5" text="Исправим ошибу исчезновения <Главного меню>" ]
Смотрим результат:
Заменим в list-списке галочки на плюсики:
Перекрасим Плюсики:
Далее КНОПОКИ:
Разметку кнопки просто скопируем из прошлой секции:
|
1 |
<strong><a</strong> href="#" class="<strong>button</strong>">Отправить заявку<strong></a></strong> |
Смотрим:
Теперь кастомизируем ВСЕ ТАКИ наши кнопки для нашей конкретной секции:
Смотрим:
Теперь сделаем ЖЕЛТУЮ кастомную кнопку:
Прям после основного стиля "button"
Смотрим:
Теперь поработаем над Заголовком и отступами всех элементов:
Смотрим готовую верстку:
[maxbutton id="5" text="Адаптивим Секцию Галерея <Наш профиль>" ]
Go в media.sass
Смотрим:
Далее уменьшаем экран:
Получилось!
[maxbutton id="5" text="Плавный скролл по клику " ]
GO в common.js
Готово! Сверстали секцию!
[maxbutton id="6" url="magnific_popup" text="Урок-17 Верстка Плавная галерея Magnific-Popup подключаем!" ]
Для этого нам понадобиться плагин - который называется "Magnific-Popup"
Нихуя - не работает!
ПОэтому!
Видим папку, а в ней до хуя файлов:
Затем подключаем по старинке плагин:
Проверим - подключился ли у нас плагин Magnific-Popup
Далее, GO в index.html
Как подключать Magnific-Popup
для этого откроем документацию:
А лучше сюда)))
Затем
Затем GJ в common.js
[maxbutton id="11" text="libs.js - Подключение Библиотеки" ]
И, последний штрих, - что бы это ВСЕ вообще работало:
И, совсем финальный штрих - что бы работала галерея:
И УРА!!! РАБОТАЕТ!!!
Что бы новая библиотека была включена в сборку:
Работает!
НО не хватает плавности в ЛИСТАНИИ))
Возьмем SASS код для прелодера:
Можно сходить на codepen.io
Тут еще про SASS
Скопируем там же: и вставим:
Работает наш прелодер!
Его можно увидеть:
Давайте сделаем теперь POP-UP для "СЕРТИФИКАТОВ"
Далее - что бы выводить в POP-UP несколько сертификатов, добавим wrapper:
И еще давайте исправим ДВУХ-КРАТНОЕ использование одной и той же функции:
Далее в index.html заменим все
".mfp-certificate" на ".mfp-gallery"
Дальше вычищаем старые классы и для ФОТО-ГАЛЕРЕИИ (Не только ДЛЯ СЕРТИФИКАТОВ)
И доработаем универсальную функцию и для "Серитификатов" тоже:
ГОТОВО! РАБОТАЕТ!
МОЖНО теперь легко повесить Вызов галереи на любую кнопку:
Вот, быстренько повесили на кнопку:
[maxbutton id="5" text="Делаем БЛЮР-фона под нашей Галереей" ]
Готово! Работает!
Причем сразу для всех Галлерий и POP-UP сайта.
[maxbutton id="5" text="Урок 18 Анимируем цифры и секция Направления услуг" ]
Анимируем цифры
10 Плагинов анимации цифр тут:
Тут доработанный плагин с БЛЮРОМ:
Кроме того, нам понадобиться js-script:
Waypoints - 4.0.0 - вроде он уже у нас есть в библиотеке.
Проверяем срабатывание:
МЫ ПРОСТО УПОМЯНУЛИ КЛАСС СЕКЦИИ - ДО КОТОРОЙ СКРОЛЛИМ - И СЦЕНАРИЙ СРАБАТЫВАЕТ!
И также вставим туда код скопированный
от сюда:
Вставляем в наш common.js
У нас уже работает БЛЮР и Увеличение шрифта ЦИФР
Далее, нам нужно собственно - подключить Waypoint
(мы то скопировали себе уже готовый "js/libs.js" )
однако - сделаем все по порядку.
Идем в наши папки проекта и создадим папку:
Идем сюда:
https://aishek.github.io/jquery-animateNumber/
Это "animateNumber"
Это "Waypoint" (используем скрин потом)
Далее двигаемся:
GO в html
Отлично! Пробел будет поставлен - АВТОМАТИЧЕСКИ уже готовой функцией "comma_separator_number_step"
И еще нужно сделать - что бы не было повторного срабатывания:
Идем в common.js
ГОТОВО! ПОСЛЕ 1-го СРАБАТЫВАЯ - ИМЕЕМ СТАТИЧНУЮ ПОЛОСУ С ЦИФРАМИ:
[maxbutton id="5" text="Верстаем секцию <Основные направления услуг>" ]
И поправим стиль <h2> для общего класса s-wide
А для исключительных случаев - будет делать выравнивание по ЛЕВОМУ краю:
Этот:
НО ВОЗМОЖНО МЫ ЕЩЕ ПОИГРАЕМСЯ ОТСТУПАМИ,
поэтому идем дальше:
Проанализируем разметку СЕКЦИИ:
пишим html:
Накидываем Item:
Смотрим что получается:
Сделаем еще КАСТОМНУЮ КНОПКУ:
button-small
Пишем кастомный стиль кнопки:
Далее стилизуем наши Items
Нам тут нужен код: SVG to be an inline SVG
Информационное отступление:
Копируем его и вставляем в common.js
И давайте - назначим какое нибудь свойство SVG:
и оформим стили:
Работает при наведении:
Transition - работает!
И визуально хорошо:
Однако нам нужна еще одна кастомная кнопка:
СЕРАЯ КНОПКА
Для начала добавим класс серой кнопки:
ГОТОВ ITEM
Теперь все прокопируем:
Адаптивим:
РЕШАЕМ ТЕПЕРЬ ПРОБЛЕМУ
с Item-мами РАЗНОЙ ВЫСОТЫ:
Для этого:
Далее:
Нам понадобиться плагин: jQuery.equalHeights
Копируем содержимое плагина в режиме правки (так по уроку),
но я не нашел такой режим - видимо просто качаем, а потом вставляем его в "js/libs.js"
(У нас то он уже подключен и скомпилирован)
Это на случай новой установки:
Пример из скаченного архива с плагином:
Далее идем в common.js
и пишем функцию:
И еще ОДНА ПРЕДОСТОРОЖНОСТЬ!
[maxbutton id="7" text="Урок 19: Верстка. Секция <Наши работы> и Pop-up" ]
Анализируем секцию:
Пишем секцию:
Далее:
Работает сначала над одним Item portfolio, затем размножим:
Смотрим:
Однако могут быть отступы у картинок - поэтому что бы их вообще не было - переделаем чуток:
И действительно - отступы УБРАЛИСЬ!
Далее продолжим писать базовые классы:
Смотрим что получается:
Теперь делаем плавное появление нашего OVERLAY
Работает - при наведении! Появляться белая заливка и наша Лупа - по верх с текстом!
Но мы можем еще добавить "ZOOM"
И можем еще увеличивать картинку!
Работает!
Но у нас ZOOM - сваливается в ЛЕВО: (Исправим это)
И можно эффект ЗУМА сделать еще интересней:
Теперь отлично!
Ну и конечно - мы планируем выводить все картинки из
и уже в MODX - есть возможность делать картинки одинаковой высоты (РЕСАЙЗИТЬ) и даже (КРОПИТЬ)
Далее сделаем POP-UP окно:
html
common.js
Первые испытания POP-UP (Включили еще "Невидимость" у всплывающего POP-UP)
Давайте По-СТИЛИЗУЕМ наш POP-UP:
Отлично - Теперь это более-менее похоже на POP-UP
Получилось отцентрировать ФОТО:
<h2> - находится не в ROW - поэтому перенесем а лучше обособить!
Сейчас очень резко открывается наш POP-UP
Смотрим типы анимации в документации MagnificPopup:
Поработаем над ZOOM-мом:
Спускаемся ниже по документации и копируем код:
И вставляем код в конвертер CSS - > SASS
Далее удалим все префиксы:
Вставим в стили:
Готово! ZOOM - Заработал!
Работаем над стилями:
Адрес текст выровним по левому краю:
Тут подробнее по ходу дела:
Далее финально настроим стили, цвета и отступы нашего POP-UP окна:
Смотрим на финально оформленный POP-UP
НАЧИНАЕМ АДАПТИВИТЬ!
ВАЖНЫЕ ПЕРЕМЕНЫ в АДАПТАЦИИ:
Просто финальные настройки стиля:
Теперь - ДУБЛИРУЕМ НАШ Item ПОРТФОЛИО
Смотрим что получилось:
ГОТОВО!
И еще один КОСЯЧОК - не влезает ОПИСАНИЕ при НАВЕДЕНИИ:
Готово! СВЕРСТАЛИ СЕКЦИЮ ПОРТФОЛИО!
