Верстка html - css- sass
[maxbutton id="3" url="#hover-v1" text="Transition Плавный на hover (решение 1)" ]
[maxbutton id="3" url="#hover-v2" text="Transition Плавный на hover (решение 1)" ]
[maxbutton id="3" url="#hover-v3" text="Transition Плавный (решение 3) с параметром скорости" ]
[maxbutton id="3" url="#gist-button" text="Gist Button Style" ]
[maxbutton id="8" url="#fontsawesome" text="Установка FontsAwesome и Инструкция!" ]
[maxbutton id="3" url="#items_block" text="items-список блоком" ]
[maxbutton id="3" url="#h3_span" text="span внутри тэга <h3>" ]
[maxbutton id="3" url="#treugol" text="Треугольный уголок" ]
[maxbutton id="10" url="#new_section" text="Новая Секция Section в 2 команды" ]
[maxbutton id="3" url="#converter" text="CONVERTER CSS SASS" ]
[maxbutton id="3" url="#cursor_pointer" text="Cursor-Pointer" ]
[maxbutton id="9" url="#inset_border" text="Border - ALL" ]
[maxbutton id="17" url="#darken" text="Darken - затемнение опорного цвета" ]
[maxbutton id="18" url="#lighten" text="Lighten - Осветление опорного цвета" ]
[maxbutton id="3" url="#fonts" text="Font's - вставка шрифта" ]
[maxbutton id="3" url="#padding" text="Padding - слева-справа-с верху-с низу" ]
[maxbutton id="9" url="#col-sm" text=".col-sm-10.col-sm-offset-1 " ]
[maxbutton id="11" url="#carousel" text="OwlCarousel2 - Скачать и Документация" ]
[maxbutton id="3" url="#adress" text="Выравнивание адресного блока" ]
[maxbutton id="3" url="#center-text" text="Центрирование текста - Global Class" ]
[maxbutton id="3" url="#span" text="Групповое оборачивание в <span>" ]
[maxbutton id="3" url="#kesh" text="<?> - что бы не кэшировался" ]
[maxbutton id="9" url="#txtfile" text="iMakerTxtFile - Создание текстовых файлов" ]
[maxbutton id="10" url="#MagnificPopUp" text="Починили ёрзание фона под MagnificPopUp" ]
[maxbutton id="9" url="#height_item" text="Боремся с ПОДРАВНИВАНИЕМ текста у Items" ]
[maxbutton id="10" url="#button_focus" text="Состояние кнопки ПОСЛЕ НАЖАТИЯ" ]
[maxbutton id="9" url="#style_css" text="Применение SASS/CSS стилей из GULP в MODX" ]
[maxbutton id="3" url="#menu_color" text="Перекраска стилей мобильного menu" ]
[maxbutton id="9" url="#menu_yakor" text="Плавный переход Меню к якорю" ]
[maxbutton id="16" url="#scroll_to_point" text="Mouse-wheel СКРОЛЛ ДО ПОИНТА" ]
[maxbutton id="10" url="#image-responsive" text="Responsive - Изображение в статье.." ]
[maxbutton id="12" url="#download_fonts" text="КАЧАЕМ ВЕБ-ШРИФТ С ЛЮБОГО САЙТА" ]
[maxbutton id="17" url="#preloader" text="PRELOADER - ПРЕЛОАДЕР" ]
[maxbutton id="18" url="#button_goto" text="Добавить КНОПКУ-GO TO" ]
[maxbutton id="17" url="#paralax" text="PARALAX - Делаем" ]
[maxbutton id="18" url="#slider-auto" text="СЛАЙДЕР - Автоматический" ]
[maxbutton id="17" url="#akkordion" text="AKKORDION - Часто задаваемые вопросы" ]
[maxbutton id="18" url="#animate" text="Animate - Подключаем!" ]
[maxbutton id="17" url="#menu-drop" text="ПУНКТЫ МЕНЮ Одинаковые" ]
[maxbutton id="18" url="#otzivi-karousel" text="ОТЗЫВЫ - КАРУСЕЛЬ + OVERLAY" ]
[maxbutton id="17" url="#hidden" text="hidden-xs - прячем слово" ]
[maxbutton id="18" url="#transform" text="Transform + Rotate" ]
[maxbutton id="17" url="#rgba" text="rgba - Процентное дозирование COLOR" ]
[maxbutton id="18" url="#table_adaptive" text="Адаптивим ТАБЛИЦУ ЦЕН" ]
[maxbutton id="17" url="#universal_color" text="Универсальный COLOR" ]
[maxbutton id="18" url="#flip-container" text="flip-container" ]
А почему не WordPress? Почему MODX?
Новая инструкция создания якорей - безопасная и надежная:
Далее
далее
Далее
далее,
ДАЛЕЕ СОХРАНЯЕМ:
ГОТОВО! РАБОТАЕТ!
[maxbutton id="9" url="#link" text="Делаем Ссылку" ]
Ссылка в текущем ОКНЕ:
|
1 2 3 4 5 6 7 |
* * <a href="1.html">Ссылка откроется в этом окне</a> * * |
Ссылка в новом ОКНЕ:
|
1 2 3 4 5 6 7 |
* * <a href="2.html" target="_blank">Откроется в новом окне</a> * * |
АТРИБУТЫ ССЫЛКИ:
accesskey Активация ссылки с помощью комбинации клавиш.
coords Устанавливает координаты активной области.
download Предлагает скачать указанный по ссылке файл.
href Задает адрес документа, на который следует перейти.
hreflang Идентифицирует язык текста по ссылке.
name Устанавливает имя якоря внутри документа.
rel Отношения между ссылаемым и текущим документами.
rev Отношения между текущим и ссылаемым документами.
shape Задает форму активной области ссылки для изображений.
tabindex Определяет последовательность перехода между ссылками при нажатии на кнопку Tab
target Имя окна или фрейма, куда браузер будет загружать документ.
title Добавляет всплывающую подсказку к тексту ссылки.
type У казывает MIME-тип документа, на который ведёт ссылка.
Плавный переход на hover (решение 1)
main.sass
|
1 2 3 4 5 6 7 8 9 10 11 |
<strong>.main-menu</strong> text-align: center > <strong>ul</strong> > <strong>li</strong> > <strong>a</strong> display: block padding: 10px 18px color: <strong>$blue_light</strong> <span style="background-color: #ffff99;"> transition: color .8s ease</span> <strong>&</strong>:hover color: <strong>$blue_gray</strong> |
Плавный переход на hover (решение 2)
Добавим класс плавного изменения сразу в переменные:
|
1 2 |
<span style="color: #ff6600;"><strong>.my_trans</strong></span> transition: <span style="color: #800080;">all</span> <span style="color: #ff6600;">.6s</span> ease |
и используем класс перехода:
|
1 |
<span style="color: #800080;"><strong>@extend</strong></span> <span style="color: #ff6600;">.my_trans</span> |
Плавный переход на hover (решение 3 универсальное)
И вызов соответственно:
Gist Button Style
|
1 2 |
<span style="font-size: 10pt;"> <span style="background-color: #ffcc00;"> <a href="#" class="button button-small button-gray">Заказ</a> </span> </span> |
Установка и подключение FontsAwesome
<i class="fa fa-mobile"></i> +7 926 674 52 25
<i class="fa fa-image"></i>
<i class="fa fa-angle-left"></i>
<i class="fa fa-angle-right"></i>
|
1 2 |
<span id="result_box" class="short_text" lang="ru"><span style="background-color: #1f9e75; color: #ffffff;"> <i class = "fa fa-map-marker"> </i> </span> </span> |
|
1 2 |
<span id="result_box" class="short_text" lang="ru"><span style="background-color: #1f9e75; color: #ffffff;"> <i class = "fa fa-arrow-up"> </i> </span> </span> |
|
1 2 |
<span id="result_box" class="short_text" lang="ru"><span style="background-color: #1f9e75; color: #ffffff;"> <i class = "fa fa-arrow-circle-up"> </i> </span> </span> |
Качаем 
- Это уже подготовленный файл с правильным внутренним путем.
Другими словами: Нужно что бы был правильный путь до самого шрифта: fontawesome-webfont.eot
Элементарно! Путь до файла!
А если скачивать Font Awesome с официального сайта - то будут другие пути.
И кладем папку с в папку libs:
Далее:
ЭТО ЕЩЕ НЕ ВСЕ!
Переносим файлы со шрифтами:
ГОТОВО! FontsAwesome - Подключен!
Как пользоваться:
Идем на страницу иконок:
И стилизуем иконку:
Смотрим:
Готово!
[maxbutton id="4" text="Items - списки:" ]
Результат:
[maxbutton id="4" text="span внутри тэга <h3> " ]
[maxbutton id="5" text="Padding и margin - оформление" ]
Однако - при уменьшении экрана - фото все же репитится !
Что бы этого не было:
[maxbutton id="5" text="Конвертер CSS > SASS" ]
[maxbutton id="5" text="Треугольный уголок SASS" ]
Тут урок очень редкий)
html:
|
1 |
<<strong>div</strong> class="<strong>treugol</strong>"><i class="<strong>fa fa-image</strong>"></i><<strong>/div</strong>> |
sass:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<strong>.treugol</strong> position: <strong>absolute</strong> top: <strong>0</strong> right: <strong>0</strong> width: <strong>80px</strong> height: <strong>80px</strong> background-color: <strong>transparent</strong> -webkit-border-radius: <strong>10px</strong> -moz-border-radius: <strong>10px</strong> border-radius: <strong>10px</strong> <strong>i</strong> position: <strong>absolute</strong> padding-left: <strong>49px</strong> padding-top: <strong>8px</strong> font-size: <strong>23px</strong> color: <strong>$white</strong> <strong>&::before</strong> content: '' position: <strong>absolute</strong> border-top: <strong>0px</strong> solid <strong>transparent</strong> border-right: <strong>70px</strong> solid <strong>$accent</strong> border-bottom: <strong>70px</strong> solid <strong>transparent</strong> right: <strong>0</strong> |
Готово:
Цветные треугольники:
SASS
.text-otzivi
&::before
content: ''
position: absolute
border-top: 30px solid $btn
border-bottom: 30px solid $blue
border-left: 30px solid $red
border-right: 30px solid $accent
left: 185px
top: 260px
[maxbutton id="7" text="Новая Секция Section в 2 команды" ]
section.s-wide.s-works.container>.row>h2{Выполненные работы}3)
Более подробный сниппет:
.container>.row>.col-sm-12>h2{Выполненные работы} 
Кроме того, снип по созданию Item's:
.col-sm-4{ Item новый }*3
Например таких Items:
И отдельно создать новый обернутый заголовок:
h4{Валентина Петровна}
Результат:
[maxbutton id="4" text="CONVERTER CSS SASS" ]
[maxbutton id="4" text="Cursor-Pointer" ]
cup
cursor: pointer
[maxbutton id="4" text="Внутренний border" ]
Border color:
bc#f
Срабатывает со 2-го раза:
Результат:
border-color: #fff
Border Radius:
brs2
Border-none:
bdn
Border-Bottom-4px-Solid:
bb4-s
Border-RGBA:
|
1 2 |
<span style="background-color: #ffcc00;"> border: 1px solid rgba($gray_text,.25) </span> |
bd1-s
bd5-s-$accent
brs10em
Box-shadow:
bxs
box-shadow: rgba($gray_text,.35) 5px 5px 7px
box-shadow: $grey_2 0 0 0 5px inset
ЗАТЕМНЕНИЕ ОПОРНОГО ЦВЕТА
|
1 2 3 4 5 6 7 8 9 |
* * background-color: darken($fiolet, 5%) border: 1px solid darken($fiolet, 5%) * * |
ОСВЕТЛЕНИЕ ОПОРНОГО ЦВЕТА
|
1 2 3 4 5 6 7 8 |
* * background-color: lighten($fiolet, 5%) border: 1px solid lighten($fiolet, 5%) * * |
< ПРОЦЕНТНОЕ ДОЗИРОВАНИЕ ЦВЕТА >
|
1 2 3 4 5 6 7 |
* * background-color: rgba($fiolet, .6) * * |
Универсальный COLOR
|
1 2 3 4 5 6 7 8 9 10 |
* * background-color: rgba(darken($net-blue, 8%), .93) //rgba($net-blue, .3) border: 1px solid rgba(darken($white, 10%), .99) * * |
Fonts шрифты: Ковычки только МЕНЯТЬ!!!
font-family: "RobotoRegular_azorr", sans-serif
font-family: "RobotoBold_azorr", sans-serif
font-family: "Exo2Bold_azorr", sans-serif
font-family: "OpenSansBold_azorr", sans-serif
font-family: "OpenSansLight_azorr", sans-serif
font-family: "OpenSansRegular_azorr", sans-serif
font-family: "OpenSansSemiBold_azorr", sans-serif
padding: 40px 20px 20px
[maxbutton id="4" text="Bootstrup колонки col-sm-12" ]
.col-sm-10.col-sm-offset-1
.col-sm-8.col-sm-offset-2
.col-sm-6.col-sm-offset-3
.col-sm-4.col-sm-offset-4
.col-sm-2.col-sm-offset-5
[maxbutton id="4" text="OwlCarousel2 - Скачать и Документация" ]
Плагин Owl Carousel 2 + Документация:
[maxbutton id="5" text="Выравнивание адресного блока" ]
[maxbutton id="5" text="Центрирование текста - Global Class" ]
[maxbutton id="5" text="Групповое оборачивание в <span>" ]
[maxbutton id="5" text=" <?> - что бы не кэшировался" ]
'!' - Означает Не кэшировать данные!
++ - Означает, что мы вводим какое то Системное значение!
[maxbutton id="5" text=" iMakerTxtFile - Создание текстовых файлов" ]
А здесь рассмотрим, как быстро создавать текстовые файлы в паке на MAC.
Качаем программку iMakerTxtFile
Например здесь:
https://sageleo.com/wp-content/uploads/2017/05/iMakerTxtFile.zip
Распаковываем в папке и далее один ньюанс:
Для того чтобы перенести Значек программы ( иконку ) на панель папки - необходимо Разрешить использование сторонней программы в настройках самого MAC:
Разрешим нужную программу:
И затем, перетащим иконку программы на панель папки удерживая (Comand) Cmd
Теперь для создания текстового файла - кликнуть на иконке (на панели папки) и получим окно создания файла:
Готово! Работает! Файлы создаются!
[maxbutton id="12" text="Починили ёрзание фона под MagnificPopUp" ]
Что конкретно МЫ сделали:
Удалили в main.sass этот код:
|
1 2 3 4 5 6 |
* * html, body height: 100% * * |
Кроме того: Исправляем ошибку МОРГАНИЯ ТЕМНОГО ФОНА при СТАРТЕ сайта:
И обязательно для некоторых секций мы зададим ТИПОВОЙ (ОДИНАКОВЫЙ) - Background!!!
Отлично!
Что еще))
ИСПРАВИЛИ ГЕНЕРАЦИЮ ФАЙЛА ВСЕХ БИБЛИОТЕК:
Что мы сделали:
И поработаем над GULP - файлом:
И добавим этот ТАСК "scripts" в вызов ТАСКА "watch"
Отлично! Теперь все библиотеки у нас собираются в один ФАЙЛ.
[maxbutton id="12" text="И боремся с ПОДРАВНИВАНИЕМ ТЕКСТА у Items" ]
при ЗАГРУЗКИ страницы (Потому как при РЕ-САЙЗЕ страницы - проблем нет! )
И еще добавим ТЭГ переноса для страховки в сами Item-s:
[maxbutton id="12" text="Состояние кнопки ПОСЛЕ НАЖАТИЯ" ]
Смотрим все состояния кнопок:
И собственно делаем это:
Это все! Все нажатия будут как на 1-м скрине.
[maxbutton id="12" text="Применение SASS/CSS стилей из GULP в MODX" ]
Мы спокойно можем стилизовать наш локальный сайт запущенный под GULP с удобным препроцессором SASS в CSS, - а затем, применить все стили, скомпилированные в файл:
для этого просто копируем файлик на сервер:
Отлично! Стили применены для сайта размещенного на удаленном хостинге!
[maxbutton id="3" text="Перекраска стилей мобильного menu" ]
ЕЩЕ Я ПЕРЕКРАШИВАЛ ПУНКТЫ МЕНЮ:
Адаптивим ТАБЛИЧКУ ЦЕН:
Что конкретно адаптивил:
[maxbutton id="9" url="#menu_yakor" text="Плавный переход Меню к якорю" ]
ТЕОРИЯ ПРОСТОГО ЯКОРЯ:
КНОПКА:
[maxbutton id="12" url="#contacts" text="Посадка секции КОНТАКТЫ" ]
|
1 2 3 4 5 6 7 |
* * [maxbutton id="12" url="#contacts" text="Посадка секции КОНТАКТЫ" ] * * |
ЯКОРЬ - К КОТОРОМУ ПЕРЕХОДИМ:
КНОПКА КАК ЗАГОЛОВОК:
|
1 2 3 4 5 6 7 |
* * [maxbutton id="14" url="contacts" text="Посадка секции КОНТАКТЫ" ] * * |
ТЕОРИЯ ПРОСТОГО ЯКОРЯ ЗАКОНЧЕНА!
Будем делать плавный переход к Якорю по нажатию на меню с помощью обычного рукотворного скрипта Common.js
И пропишем ID - для соответствующих блоков:
И еще скорректируем длину (глубину) прокрутки скролла вниз:
что бы избавиться от проблемы "НЕ докрутки" скролла
Далее сделаем ВЫВОД на MODX нашего меню с Якорными ссылками:
Ну во первых - Нужно выполнить: gulp bulid
И перенести на сервер 2 файла которые заново сформировались:
ЗАТЕМ в Чанках пропишем такие же <id> - какие мы уже прописали на локальной версии
Само меню лучше прописывать точно так же как и на верстке - для того что бы РАБОТАЛА наша плавная прокрутка до нужного блока:
Но еще лучше вырезать все пункты МЕНЮ в отдельный ЧАНК, что бы оперативно выводить МЕНЮ в любое место:
Поэтому, для начала создадим категорию специально для <MENU>
Потом создадим Дополнительное поле для МЕНЮ - которое будем выводить в нужные места:
Затем перейдем в ДОП.ПОЛЕ МЕНЮ - и вставим в него наши пункты МЕНЮ:
И затем делаем вывод Дополнительного поля МЕНЮ в нужные места:
Отлично - МЕНЮ ВЫВОДИТСЯ и работает ПЛАВНЫЙ ПЕРЕХОД Якорных пунктов меню до соответствующих блоков:
ГОТОВО!
[maxbutton id="16" url="scroll_to_point" text="Mouse-wheel СКРОЛЛ ДО ПОИНТА" ]
Для того что бы работал scroll - при нажатии по нашей анимированной мышке, необходимо следующее:
РАБОТАЕТ:
[maxbutton id="10" url="#menu_yakor" text="Responsive - изображение в статье.." ]
И стили:
Но для полной адаптивности внесем строки еще и в media.sass
Отлично:
[maxbutton id="12" text="КАЧАЕМ ВЕБ-ШРИФТ С ЛЮБОГО САЙТА" ]
ГОТОВО!
[maxbutton id="17" url="preloader" text="PRELOADER - ПРЕЛОАДЕР" ]
ДЕЛАЕМ ПРЕЛОАДЕР - с бэекграундом всего сайта:
- Добавим SASS - стили прелодера:
КОД SASS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
* * /* ------------------- ПРЕЛОДЕР ------------------ */ .loader background: none repeat scroll 0 0 $white bottom: 0 height: 100% left: 0 position: fixed right: 0 top: 0 width: 100% z-index: 1000 .loader_inner background-image: url("../img/preloader/preloader.gif") background-repeat: no-repeat background-position: center center background-size: cover /* background-color: rgba($white, .4) */ height: 60px width: 60px margin-top: -30px margin-left: -30px left: 50% top: 50% position: absolute img width: 100% /* ------------------- ПРЕЛОДЕР ------------------ */ * * |
2) Добавим HTML-верстку самого прелодера:
ВСТАВЛЯТЬ ПОСЛЕ ТЭГА <BODY>
HTML-код прелодера:
|
1 2 3 4 5 6 7 8 9 10 11 |
* * <!-- ------------------- ПРЕЛОДЕР ------------------ --> <div class="loader"> <div class="loader_inner"></div> </div> <!-- ------------------- ПРЕЛОДЕР ------------------ --> * * |
3) Добавим JS - скрипты для прелодера:
JS-Scripts - для прелодера:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
* * /*Прелодер*/ $(window).load(function() { $(".loader_inner").fadeOut(); $(".loader").delay(400).fadeOut("slow"); }); /*Прелодер*/ * * |
4) Физически добавим файл GIF-ки:
ВСЕ! ВСЕ ДОЛЖНО РАБОТАТЬ!
РЕЗУЛЬТАТ РАБОТЫ!
ГОТОВО!
ПРОГРАММНЫЙ ПРЕЛОДЕР - ЛЕГКИЙ И СТИЛЬНЫЙ
1) Пишем HTML-код прелодера
|
1 2 3 4 5 6 7 8 9 |
* * <!-- ------------------- ПРЕЛОДЕР ------------------ --> <div class="preloader"><div class="pulse"></div></div> <!-- ------------------- ПРЕЛОДЕР ------------------ --> * * |
2) Пишем SASS-стиль прелодера
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
* * /* ====================================================================== */ /* ====================== ПРЕЛОДЕР СТИЛЬНЫЙ ) =========================== */ @mixin opacity($opacity) opacity: $opacity / 100 filter: alpha(opacity = $opacity) .preloader position: fixed top: 0 left: 0 bottom: 0 right: 0 z-index: 100 background-color: $dark .pulse position: relative left: 50% top: 50vh margin-left: -40px margin-top: -40px &::before, &::after content: '' border: 5px solid #555 width: 80px height: 80px border-radius: 500px position: absolute &::before animation: pulse-outer .8s ease-in infinite &::after animation: pulse-inner .8s linear infinite @keyframes pulse-outer 0% @include opacity(100) 50% @include opacity(50) 100% @include opacity(0) @keyframes pulse-inner 0% @include opacity(0) transform: scale(0) 100% @include opacity(100) transform: scale(1) /* ====================== ПРЕЛОДЕР =========================== */ /* =========================================================== */ * * |
3) Common.js - пишем скрипт..
|
1 2 3 4 5 6 7 8 9 10 11 |
* * /* ------------------- Прелодер -------------------- */ $(window).on('load', function() { $('.preloader').delay(1000).fadeOut('slow'); }) /* ------------------- Прелодер -------------------- */ * * |
ГОТОВО! ВСЕ ДОЛЖНО РАБОТАТЬ!
[maxbutton id="18" url="button_goto" text="Добавить КНОПКУ-GO TO" ]
Добавляем кнопку:
Заполняем вот так ПОЛЯ:
Код кнопки - ВСТАВИЛСЯ!
Затем, копируем - этот код:
И вставляем его ниже, в то место куда нужно ПЕРЕЙТИ:
Затем, Написать слово: "Далее" -> Выделить и нажать на кнопку "Якорь":
ОДНО ПОЛЕ: Вставим без "#" - ID - якоря...
OK! - ГОТОВО!
[maxbutton id="17" url="paralax" text="PARALAX - Делаем" ]
Начнем внедрение ПАРАЛАКСА в проект:
Страница плагина тут:
Ссылка: https://pixelcog.github.io/parallax.js/
1) Подключаем библиотеку Parallax непосредственно в GULP
2) Кладем сам файлик библиотеки Parallax - в папку /libs
И еще не забываем положить 2-й файлик с библиотекой:
3) Добавим строчку в заглавие секции в которую хотим подключить PARALLAX:
ВАЖНО: НУЖНО УБРАТЬ ЗАЛИВКУ ФОНА В СЕКЦИИ, в которой хотим подключить Parallax!
Сам код строчки ( HTML ):
|
1 2 3 4 5 6 7 |
* * <header class="header-info text-center overlay" data-parallax="scroll" data-image-src="img/web-develop/porshe_race.jpg" data-z-index="0"> * * |
КОД HTML SECTION-PARALAX
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
* * <!-- ====================================================================================== --> <!-- Start - Section "НАШИ ПРЕИМУЩЕСТВА" --> <section class="paralax_1920 text-center overlay_1920" data-parallax="scroll" data-image-src="img/img-fotograph/1920x1080px/shturmovik_1920.jpg" data-z-index="0"> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="text_animate"> <h2>Мы делаем интересные фотографии Ваших событий</h2> </div> </div> <div class="col-sm-10 col-sm-offset-1"> <div class="middle-text-1920"> <p>Чтобы Ваши особые моменты были с вами всегда!</p> </div> <!-- КНОПКА --> <a href="#callback" class="button-black button-white button-1920" data-form="Всем клиентам скидки" data-text="Всем клиентам скидки - Отправить заявку" >Заказать фотосессию</a> <!-- КНОПКА --> </div> </div> </div> </section> <!-- End Section "НАШИ ПРЕИМУЩЕСТВА" --> <!-- ====================================================================================== --> * * |
КОД SASS PARALAX 1920
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
* * /* ==================================================================== */ /* НАЧАЛО--- PARALAX - С ПАНОРАМНЫМ ФОТО + OVERLAY ---------------------*/ .paralax_1920 padding: 230px 0 min-height: 200px h2 text-align: center margin-top: 20px padding-top: 20px font-family: "OpenSansBold_azorr", sans-serif font-size: 60px line-height: 70px color: $white .middle-text-1920 p font-family: "OpenSansLight_azorr", sans-serif color: $white font-size: 30px margin-top: 5px /* КОНЕЦ--- PARALAX - С ПАНОРАМНЫМ ФОТО + OVERLAY ----------------------*/ /* ==================================================================== */ * * |
Смотрим что получилось!
ВСЕ! ВСЕ ДОЛЖНО РАБОТАТЬ!
Никаких скриптов в common.JS - не пишем! (Все что нужно уже есть в плагине parallax.min.js )
Смотрим результат:
OK! - ГОТОВО!
[maxbutton id="18" text="Слайдер Bootstrup Автоматический" ]
https://bootstrap-4.ru/docs/4.0/components/carousel/
- Нарежем картинки для Слайдера и положим в нужную папку:
GO в HTML страницы и вставляем код слайдера:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
* * <!-- 1 -УЗКИЙ ЗАГОЛОВОК для ИНФО-БЛОКА ------------------------------------------------> <section class="s-wide s-zagolovok-info text-center slider-size"> <div class="container"> <div class="row"> <div class="col-sm-12"> <!-- data-interval="2000" - Это скорость перелистывания 2 сек) --> <!-- data-pause="false" - Отключаем остановку слайдера при наведении курсора --> <!-- data-ride="carousel" - автосмена включается после загрузки --> <!-- data-wrap="false" - Промотать все слайды 1 раз и остановиться --> <!--============================== SLIDER - AUTOMATE =================================--> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-keyboard="true" data-interval="3000" data-pause="false"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> <li data-target="#carouselExampleIndicators" data-slide-to="3"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <!-- --------- Слайд ------------ --> <div class="carousel-item" style="background-image: url(img/slider/slide-1.jpg);"> <!-- <img class="d-block w-100" src="img/slider/slide-1.jpg" data-color="lightblue" alt="First Image"> --> </div> <!-- --------- Слайд ------------ --> <!-- --------- Слайд ------------ --> <div class="carousel-item" style="background-image: url(img/slider/slide-2.jpg);"> <!-- <img class="d-block w-100" src="img/slider/slide-1.jpg" data-color="lightblue" alt="First Image"> --> </div> <!-- --------- Слайд ------------ --> <!-- --------- Слайд ------------ --> <div class="carousel-item" style="background-image: url(img/slider/slide-3.jpg);"> <!-- <img class="d-block w-100" src="img/slider/slide-1.jpg" data-color="lightblue" alt="First Image"> --> </div> <!-- --------- Слайд ------------ --> <!-- --------- Слайд ------------ --> <div class="carousel-item" style="background-image: url(img/slider/slide-4.jpg);"> <!-- <img class="d-block w-100" src="img/slider/slide-1.jpg" data-color="lightblue" alt="First Image"> --> </div> <!-- --------- Слайд ------------ --> <!-- Controls --> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!--============================== SLIDER - AUTOMATE =================================--> </div> </div> </div> </section> <!-- 1 -УЗКИЙ ЗАГОЛОВОК для ИНФО-БЛОКА ------------------------------------------------> * * |
[maxbutton id="17" url="#" text="СЛАЙДЕР - Автоматический" ]
Начинаем интеграцию слайдера в WEB-проект:
HTML - код вставляем в СЕКЦИЮ:
САМ JS - КОД ДЛЯ ВСТАВКИ В HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
* * <!-- 1 -УЗКИЙ ЗАГОЛОВОК для ИНФО-БЛОКА ------------------------------------------------> <section class="s-wide s-zagolovok-info text-center"> <div class="container"> <div class="row"> <div class="col-sm-12"> <!--============================== SLIDER - AUTOMATE =================================--> <!-- ======================================== SLIDER SIMPLE ======================================== --> <div class="slider"> <div class="img-slide"> <!-- bd --> <ul> <li></i><a target="_blank" href="https://www.ikon-media.ru/index/preimushhestva.html"><img src="img/slider/slide-2.jpg" /></a></li> <li></i><a target="_blank" href="https://www.ikon-media.ru"><img src="img/slider/slide-1.jpg" /></a></li> <li></i><a target="_blank" href="https://www.ikon-media.ru"><img src="img/slider/slide-3.jpg" /></a></li> <li></i><a target="_blank" href="https://www.ikon-media.ru"><img src="img/slider/slide-4.jpg" /></a></li> </ul> </div> <div class="hd"> <ul> </ul> </div> <div class="pnBtn prev"> <span class="bg-po-bokam"></span> <a class="arrow" href="javascript:void(0)"></a> </div> <div class="pnBtn next"> <span class="bg-po-bokam"></span> <a class="arrow" href="javascript:void(0)"></a> </div> </div> <!-- ======================================== SLIDER SIMPLE ======================================== --> <!--============================== SLIDER - AUTOMATE =================================--> </div> </div> </div> </section> <!-- 1 -УЗКИЙ ЗАГОЛОВОК для ИНФО-БЛОКА ------------------------------------------------> * * |
Там же в HTML - подключаем скрипты:
Код скриптов:
|
1 2 3 4 5 6 7 |
* * <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script type="text/javascript" src="js/superslide.2.1.js"></script> * * |
И опять тут же, в самом низу HTML - Порядок подключения скриптов - ВАЖЕН! (С ними были проблемки)
И сам КОД-HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
* * <!-- ------ Script's ------ --> <script type="text/javascript"> jQuery(".slider .img-slide li").first().before( jQuery(".slider .img-slide li").last() ); jQuery(".slider").hover(function(){ jQuery(this).find(".arrow").stop(true,true).fadeIn(800) },function(){ jQuery(this).find(".arrow").fadeOut(800) }); jQuery(".slider").slide( { titCell:".hd ul", mainCell:".img-slide ul", effect:"leftLoop",autoPlay:true, vis:4,autoPage:true, trigger:"click", delayTime:500, interTime:4000} ); </script> <!-- | effect:"leftLoop" | effect:"topLoop" - top - не работает | --> <!-- | vis:3 - НА 3 СЛАЙДА | vis:4 - НА 4 СЛАЙДА | --> * * |
ТЕПЕРЬ ВСТАВЛЯЕМ SASS - СТИЛИ (Уже адаптированные для GULP):
САМ КОД SASS - СТИЛЕЙ:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
/* ================ STYLE SIMPLE SLIDER =================== */ /* ================ STYLE SIMPLE SLIDER =================== */ .slider width: 100% min-width: 400px height: 450px position: relative overflow: hidden background: $white text-align: center .img-slide width: 1000px position: absolute left: 50% margin-left: -490px li width: 980px overflow: hidden i font-size: 50px position: absolute padding-top: 380px img display: block width: 980px height: 450px border: 0 .tempWrap overflow: visible !important ul margin: 0 padding: 0 list-style: none margin-left: -980px !important .hd background-color: rgba($white, .7) //ЦВЕТ ПОЛОСЫ position: absolute width: 100% height: 52px // ВЫСОТА БЕЛОЙ ПРОЗРАЧНОЙ ПОЛОСЫ - НАВИГАЦИИ - также увеличивается отступ с низу bottom: 10px // Положение по вертикали ТОЧЕК left: 0 z-index: 1 text-align: center li display: inline-block *display: inline zoom: 1 width: 33px height: 33px line-height: 90px //убрали - ОПУСТИЛИ В НИЗ ЦЫФРЫ: 1-2-3 overflow: hidden background: url(../img/slider/slider-btn-good.png) 0 -39px no-repeat margin: 0 10px //РАЗБЕЖКА ТОЧЕК cursor: pointer filter: alpha(opacity = 60) opacity: 0.9 &.on background-position: 0 0 opacity: 1 .pnBtn position: absolute z-index: 1 top: 0 width: 100% height: 450px cursor: pointer .prev left: -50% margin-left: -490px .next left: 50% margin-left: 490px .pnBtn .bg-po-bokam display: block position: absolute left: 0 top: 0 width: 100% height: 450px background: $white opacity: 1 .arrow display: none position: absolute top: 57px /* Расположение стрелок < > по вертикали */ z-index: 1 width: 60px height: 400px &:hover opacity: 0.6 .prev .arrow right: 0 background: url(../img/slider/slider-arrow.png) -180px 0 no-repeat // -180px 0 Gray Arrow // -120px 0 White Arrow // .next .arrow left: 0 background: url(../img/slider/slider-arrow.png) -60px 0 no-repeat // -60px 0 Gray Arrow // 0 0 White Arrow // /* ================ STYLE SIMPLE SLIDER =================== */ /* ================ STYLE SIMPLE SLIDER =================== */ |
ДАЛЕЕ ПОДКЛЮЧАЕМ СКРИПТ В GULP:
КОД СТРОКИ:
|
1 2 3 4 5 6 7 8 |
* * './app/libs/slider-simple/superslide.2.1.js' * * |
ДАЛЕЕ КЛАДЕМ ФАЙЛИКИ ПО ПАПКАМ:
И ЕЩЕ СЮДА КЛАДЕМ ФАЙЛИК:
ВСЕ ДОЛЖНО РАБОТАТЬ!
СТРАНИЦА ГДЕ БЫЛ РАЗМЕЩЕН СЛАЙДЕР:
Разработка и создание сайтов под ключ на MODX.html
ГОТОВО!
[maxbutton id="17" url="#akkordion" text="AKKORDION - Часто задаваемые вопросы" ]
Начали..
САМ HTML - КОД:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
* * <!-- 1 -УЗКИЙ ЗАГОЛОВОК для ИНФО-БЛОКА ------------------------------------------------> <section class="s-faq"> <div class="container"> <div class="row"> <div class="col-sm-12"> <!-- =========================== FAQ Section SIMPLE ============================== --> <div class="ziehharmonika"> <h3 class="hoverclass">Сколько времени занимает разработка сайта?</h3> <div> <p> Количество времени, затрачиваемое на разработку сайта, зависит от множества факторов, которые включают в себя тематику и объем проекта, используемые при его реализации средства, дополнительные модули, плагины одтельно разрабатываемую графику. <br> В зависимости от структуры <strong>web-сайта</strong>, количества страниц и шаблон этих страниц и будет определяться итоговое время, затрачиваемое на разработку ресурса. </p> </div> <h3 class="hoverclass">Кто оплачивает Хостинг и домен?</h3> <div> <p>Раз в месяц нужно продлевать хостинг (услуга предоставления места на сервере), а раз в год - доменное имя. Если упускать момент своевременной оплаты хостинга, вы рискуете позициями вашего сайта в поисковой выдаче. Поэтому также можно продлевать хостинг сразу на полгода или даже год, если ваш бизнесс не носит временный характер. <br><br> Для сайтов, получающих основную прибыль от размещения контекстной рекламы или продажи ссылок, ухудшение позиций выдачи - серьезный провал. Если же вы забудете продлить доменное имя, вы вовсе рискуете потерять свой сайт. Поэтому с хостингом и доменным именем шутить не стоит. Благо, стоимость этих услуг обычна невелика, а компании-провайдеры, в большинстве случаев, уведомляют о сроке платежа заранее. Однако, если Вы уехали в платежный период на дилительное время (более 1 месяца) - то хостер имеет полное право удалить Ваш сайт после не оплаты продления хостинга более чем 1 месяц. И тогда сайт уже будет потерян на всегда. Стоимость восстановление такого потерянного сайта, сопоставима со стоимостью создания нового сайта! Поэтому все луче оплачивать своевременно. </p> </div> <h3 class="hoverclass">Как сделать отличный дизайн?</h3> <div> <p> <strong>Принцип гештальта.</strong> <br><br> <strong>Гештальт</strong> – это немецкое слово, означающее «сущность или очертание общей формы бытия» и это определение может стать одним из важнейших правил дизайна. Обычно разработчики больше сосредоточиваться на деталях веб-дизайна, чем на общем виде. Они заостряют внимание на закругленных уголках, тенях, шрифтах…и т.д., это все хорошо, но может на самом деле не иметь никакого значения, если клиенту с первого взгляда на понравится замысел; чего многие не понимают, это того, что мозг сначала видит общие очертания любой модели, а затем начинает фокусировать внимание и видеть частности… </p> </div> </div> <!-- =========================== FAQ Section SIMPLE ============================== --> </div> </div> </div> </section> <!-- 1 -УЗКИЙ ЗАГОЛОВОК для ИНФО-БЛОКА ------------------------------------------------> * * |
ДАЛЕЕ ТУТ ЖЕ СПУСКАЕМСЯ В НИЗ HTML и ДОБАВЛЯЕМ СКРИПТЫ:
САМ КОД СКРИПТОВ ДЛЯ HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
* * <link rel="stylesheet" href="css/main.min.css"> <script src="libs/animate/animate-css.js"></script> <script src="js/scripts.min.js"></script> <!-- Очередность размещения важна! --> <script src="js/js-akkord/ziehharmonika.js"></script> <script> $(document).ready(function() { $('.ziehharmonika').ziehharmonika({ collapsible: true, prefix: '★' }); }); </script> * * |
Далее,
Далее,
САМ КОД СТИЛЯ SASS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
* * /* ---------------------------------------------------------------------------- */ /* ------------------------------ СТИЛИ F-A-Q -------------------------------- */ .s-faq padding-top: 60px padding-bottom: 100px h2 text-align: center margin-top: 0 line-height: 33px background-color: $white .ziehharmonika padding-right: 10px p /* Простой текст */ font-family: "OpenSansLight_azorr", sans-serif font-size: 16px h3 &:hover +mt(.4s) background-color: darken($blue, 7%) background: $gray_ikon color: $white font-family: "OpenSansLight_azorr", sans-serif font-weight: 200 font-size: 22px text-align: left padding: left: 12px right: 12px top: 10px bottom: 10px cursor: pointer margin-top: 0 margin-bottom: 20px padding-right: 40px transition: 0.25s all position: relative &.active margin-bottom: 21px background: $blue font-family: "OpenSansLight_azorr", sans-serif font-weight: 200 &::before content: attr(data-prefix) font-family: "OpenSansLight_azorr", sans-serif font-weight: 200 font-size: 18px margin-right: 9px &.alignLeft padding-left: 35px > div display: none background: $white border-radius: 4px border: 1px solid #cdcdcd text-align: left padding: 31px 33px margin-bottom: 9px .arrowDown width: 0 height: 0 border-style: solid border-width: 13.0px 7.5px 0 7.5px border-color: #272e35 transparent transparent transparent position: absolute bottom: 0 left: 40px transition: 0.25s all opacity: 0 .active .arrowDown bottom: -13px border-color: $blue transparent transparent transparent opacity: 1 .collapseIcon position: absolute right: 20px top: 45% font-size: 25px font-weight: 300 -ms-transform: translate(0, -50%) transform: translate(0, -50%) &.alignLeft right: initial left: 20px /* ------------------------ ТУТ ЗАКАНЧИВАЮТСЯ СТИЛИ FAQ ----------------------- */ /* ---------------------------------------------------------------------------- */ * * |
Далее,
КЛАДЕМ ФАЙЛ СКРИПТА В ПАПКУ:
ПОЖАЛУЙ ЭТО ВСЕ!
ГОТОВО!
[maxbutton id="18" url="#animate" text="Animate - Подключаем!" ]
Скачиваем Animate.css
Прямая ссылка: https://raw.github.com/daneden/animate.css/master/animate.css
ЗАТЕМ,
КОД ПОДКЛЮЧЕНИЯ:
|
1 2 3 4 5 6 7 8 9 |
* * <link rel="stylesheet" href="css/animate.min.css"> * * |
ПОДКЛЮЧАЕМ ПЛАГИНЫ, ЕСЛИ ОНИ ЕЩЕ НЕ ПОДКЛЮЧЕНЫ:
И УЖЕ МОЖНО ПРОПИСЫВАТЬ ПАРАМЕТРЫ ДЛЯ ЭЛЕМЕНТОВ, КОТОРЫЕ ХОТИМ ОЖИВИТЬ:
КОД ПАРАМЕТРОВ:
|
1 2 3 4 5 6 7 8 9 |
* * button-animate animated bounce * * |
ЗАТЕМ ИДЕМ В SASS:
ИЛИ НА ПРЯМУЮ В HTML - МОЖНО УКАЗАТЬ ПАРАМЕТРЫ:
|
1 2 3 4 5 6 7 |
* * <h2 class="animated pulse delay-2s">< SASS / CSS ></h2> * * |
ВСЕ ДОЛЖНО РАБОТАТЬ!
ССЫЛКА НА ВИДЫ АНИМАЦИИ:
https://github.com/daneden/animate.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
* * bounce flash pulse rubberBand shake headShake swing tada wobble jello bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig flipInX flipInY flipOutX flipOutY lightSpeedIn lightSpeedOut rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight hinge jackInTheBox rollIn rollOut zoomIn zoomInDown zoomInLeft zoomInRight zoomInUp zoomOut zoomOutDown zoomOutLeft zoomOutRight zoomOutUp slideInDown slideInLeft slideInRight slideInUp slideOutDown slideOutLeft slideOutRight slideOutUp heartBeat * * |
ГОТОВО! ТЕПЕРЬ МОЖНО ВСЕ АНИМИРОВАТЬ!
И ДЕЛАЕМ СТАРТ АНИМАЦИИ ПО СКРОЛУ
Нам понадобится скрипт АКТИВАЦИИ АНИМАЦИИ при СКРОЛЕ:
КОД СКРИПТА:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
* * //Animate CSS + WayPoints javaScript Plugin //Example: $(".element").animated("zoomInUp", "zoomOutDown"); //Author URL: https://webdesign-master.ru (function($) { $.fn.animated = function(inEffect, outEffect) { $(this).css("opacity", "0").addClass("animated").waypoint(function(dir) { if (dir === "down") { $(this).removeClass(outEffect).addClass(inEffect).css("opacity", "1"); } else { $(this).removeClass(inEffect).addClass(outEffect).css("opacity", "1"); }; }, { offset: "50%" }).waypoint(function(dir) { if (dir === "down") { $(this).removeClass(inEffect).addClass(outEffect).css("opacity", "1"); } else { $(this).removeClass(outEffect).addClass(inEffect).css("opacity", "1"); }; }, { offset: -$(window).height() }); }; })(jQuery); * * |
ДАЛЕЕ
в COMMON.JS напишем функцию с параметрами анимации:
|
1 2 3 4 5 6 7 8 |
* * $(".animate-Text p").animated("slideInUp", "slideInUp"); * * |
И ВСЯ СХЕМА ПОДКЛЮЧЕНИЯ В HTML:
ДАЛЕЕ в SASS можно делать контроль СКОРОСТИ АНИМАЦИИ
РАБОТАЕТ!
ГОТОВО!
[maxbutton id="17" url="#" text="ПУНКТЫ МЕНЮ Одинаковые" ]
ВЛОЖЕННЫЕ ПУНКТЫ МЕНЮ ОДИНАКОВОЙ ШИРИНЫ:
РАБОТАЕТ!
[maxbutton id="18" url="otzivi-karousel" text="ОТЗЫВЫ - КАРУСЕЛЬ + OVERLAY" ]
Погнали:
1) HTML код
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
* * <!-- ===================================================================================================== --> <!--================== <SECTION> "ОТЗЫВЫ - КАРУСЕЛЬ" ======================================================--> <section class="s-review dark overlay_review" style=" background-image: url(img/img-fotograph/otzivi-bg/girl-bg.jpg);"> <div class="container"> <div class="row"> <div class="col-sm-12"> <h2 class="h2 text-center h-first">Отзывы наших клиентов</h2> </div> <div class="col-sm-8 col-sm-offset-2"> <div class="quotes"></div> <!-- БЛОК С КВЫЧКАМИ --> <div class="owl-carousel reviews"> <!-- Item-Отзывы 1 --> <div class="item-review"> <div class="review-name"><h3>Оксана</h3></div> <div class="review-data"><h4>29.07.18 (Стрижка)</h4></div> <div class="review-stars"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="review-text">Мне очень повезло! Я случайно попала в салон красоты S&Mitler, когда возвращалась с работы. Времени, записываться на стрижку, у меня не было. И, на удачу, я попала в смену стилиста Марины. Я сама не знала, как я хочу постричься, но Марина предлагала несколько вариантов. И в итоге я получила колоссальное удовольствие от конечного итога! Марина с моими волосами сделала что-то невероятно красивое! После стрижки волосы стали более объемными и гладкими!</div> </div> <!-- Item-Отзывы 1 --> <!-- Item-Отзывы 2 --> <div class="item-review"> <div class="review-name"><h3>Александра</h3></div> <div class="review-data"><h4>29.07.18 (Маникюр)</h4></div> <div class="review-stars"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="review-text">Мне очень повезло! Я случайно попала в салон красоты S&Mitler, когда возвращалась с работы. Времени, записываться на стрижку, у меня не было. И, на удачу, я попала в смену стилиста Марины. Я сама не знала, как я хочу постричься, но Марина предлагала несколько вариантов. И в итоге я получила колоссальное удовольствие от конечного итога! Марина с моими волосами сделала что-то невероятно красивое! После стрижки волосы стали более объемными и гладкими! Спасибо Мариночке за индивидуальный подход и качество выполненной работы!!!</div> </div> <!-- Item-Отзывы 2 --> </div> <!-- END owl-carousel reviews --> </div> </div> </div> </section> <!-- ===================================================================================================== --> <!--================== <SECTION> "ОТЗЫВЫ - КАРУСЕЛЬ" ======================================================--> * * |
2) SASS - стиль
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
* * /* ================== СТИЛЬ ОТЗЫВЫ - КАРУСЕЛЬ ==================== */ .s-review padding-top: 40px padding-bottom: 60px h2 /* СТИЛЬ ЗАГОЛОВКА СЕКЦИИ */ font-family: "OpenSansLight_azorr", sans-serif font-size: 36px font-weight: 400 color: $white .overlay_review /* ОВЕРЛЕЙ ДЛЯ ОТЗЫВОВ */ &::before content: '' position: absolute top: 0 left: 0 width: 100% height: 100% background-color: $fiolet opacity: .92 .reviews text-align: center .owl-dots width: 100% text-align: center margin-top: 60px .owl-dot width: 8px height: 8px background-color: #fff border-radius: 10em display: inline-block margin: 5px transition: background-color .5s ease, transform .5s ease &.active background-color: lighten($fiolet, 40%) transform: scale(1.3) .item-review cursor: hand .review-name h3 font-family: 'Times New Roman', serif font-style: italic font-size: 35px font-weight: bold color: $white margin-top: -8px .review-data h4 font-family: 'Times New Roman', serif font-style: italic font-size: 12px color: lighten($fiolet, 60%) margin-top: -30px .review-stars margin: 18px 0 35px font-size: 14px color: lighten($white, 40%) .fa margin: 0 2.5px .review-text font-family: "OpenSansLight_azorr", sans-serif font-weight: 300 color: lighten($fiolet, 65%) font-weight: 300 .quotes /* СТИЛЬ ДЛЯ КОВЫЧЕК */ position: absolute width: 100% &::before, &::after content: ',,' position: absolute font-size: 56px color: $white font-family: 'Times New Roman', serif font-weight: bold line-height: 0 transform: rotate(180deg) display: block top: 180px &::before top: 210px left: -50px &::after right: -15px top: 175px transform: rotate(0) /* ================== СТИЛЬ ОТЗЫВЫ - КАРУСЕЛЬ ==================== */ * * |
2) COMMON.JS - Скрипт
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
* * // Карусель ОТЗЫВЫ ------------------------------------ $('.reviews').owlCarousel({ loop: true, items: 1, smartSpeed: 700, nav: false, autoHeight: true }); // Карусель ОТЗЫВЫ ------------------------------------ * * |
ЭТО ВСЕ! ВАЖНО ЕЩЕ УСТАНОВИТЬ САМ ПЛАГИН OWL-Carousel
И ВСЕ ДОЛЖНО РАБОТАТЬ!
Далее,
"hidden-sm"
|
1 2 3 4 5 6 7 |
* * Заказать <span class="hidden-sm hidden-md hidden-sm hidden-xs">фотосессию</span> * * |
<Transform + Rotate - на :hover>
|
1 2 3 4 5 6 7 8 9 |
* * transition: all .6s ease &:hover transform: rotate(8deg) translate(-40px, -10px) * * |
[maxbutton id="18" url="#flip-container" text="flip-container" ]
