Верстка 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="Делаем Ссылку" ]

 

Ссылка в текущем ОКНЕ:

 

 

 

 

Ссылка в новом ОКНЕ:

 

 

 

 

     АТРИБУТЫ ССЫЛКИ:   

 

   accesskey     Активация ссылки с помощью комбинации клавиш.

   coords     Устанавливает координаты активной области.

   download     Предлагает скачать указанный по ссылке файл.

   href     Задает адрес документа, на который следует перейти.

   hreflang     Идентифицирует язык текста по ссылке.

   name     Устанавливает имя якоря внутри документа.

   rel     Отношения между ссылаемым и текущим документами.

  rev    Отношения между текущим и ссылаемым документами.

   shape     Задает форму активной области ссылки для изображений.

   tabindex     Определяет последовательность перехода между ссылками при нажатии на кнопку Tab

   target     Имя окна или фрейма, куда браузер будет загружать документ.

   title     Добавляет всплывающую подсказку к тексту ссылки.

   type      У казывает MIME-тип документа, на который ведёт ссылка.

 

 

Начнем:

   Плавный переход на hover  (решение 1)  

 

main.sass

 

 

Далее

 

   Плавный переход на hover  (решение 2)  

 

Добавим класс плавного изменения сразу в переменные:

 

 

 

и используем класс перехода:

 

 

 

Далее:

 

  Плавный переход на hover  (решение 3 универсальное)

 

 

И вызов соответственно:

 

 

Далее:

 

 

   Gist Button Style   

 

 

 

 

 

 

Далее:

 

   Установка и подключение 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>  

 

 

 

 

 

 

 

 

 

 

 

 

Качаем  

 

  • Это уже подготовленный файл с правильным внутренним путем.

Другими словами: Нужно что бы был правильный путь до самого шрифта:        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:

 

 

sass:

 

Готово:

 

 


 

    Цветные треугольники:   

 

   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 команды" ]

 
 
1)
 
 
section.s-wide.s-works
 
 
 
2)
 
 
.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:

 

 

 

 


 

 

 

 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  

 

 

 

 

 

Далее

 

       ЗАТЕМНЕНИЕ ОПОРНОГО ЦВЕТА        

 

 

 

 

Далее,

 

 

       ОСВЕТЛЕНИЕ ОПОРНОГО ЦВЕТА        

 

 

 

 

Далее,

 

 

< ПРОЦЕНТНОЕ ДОЗИРОВАНИЕ ЦВЕТА >

 

 

 

 

Далее

 

Универсальный COLOR

 

 

 

 

 

Далее

 

 

 

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   этот код:

 

 

Кроме того: Исправляем ошибку МОРГАНИЯ ТЕМНОГО ФОНА при СТАРТЕ сайта:

 

 

 

И обязательно для некоторых секций мы  зададим ТИПОВОЙ (ОДИНАКОВЫЙ) - 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="Посадка секции КОНТАКТЫ" ]

 

 

 

 

ЯКОРЬ - К КОТОРОМУ ПЕРЕХОДИМ:

 

 

 

 

КНОПКА КАК ЗАГОЛОВОК:

 

 

 

 

     ТЕОРИЯ ПРОСТОГО ЯКОРЯ ЗАКОНЧЕНА!     

 

 

Будем делать плавный переход к Якорю по нажатию на меню с помощью обычного рукотворного скрипта    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 - ПРЕЛОАДЕР" ]

 

ДЕЛАЕМ ПРЕЛОАДЕР - с бэекграундом всего сайта:

 

  1. Добавим   SASS - стили   прелодера:

 

 

 

КОД SASS:

 

 

2)  Добавим     HTML-верстку    самого прелодера:

 

 

    ВСТАВЛЯТЬ ПОСЛЕ ТЭГА   <BODY>    

 

 

 

HTML-код прелодера:

 

 

3) Добавим    JS - скрипты    для прелодера:

 

 

JS-Scripts - для прелодера:

 

 

 

 

4) Физически     добавим файл GIF-ки:  

 

 

 

ВСЕ! ВСЕ ДОЛЖНО РАБОТАТЬ!

 

РЕЗУЛЬТАТ РАБОТЫ!

 

 

ГОТОВО!

 

 

 

ПРОГРАММНЫЙ ПРЕЛОДЕР - ЛЕГКИЙ И СТИЛЬНЫЙ

 

 

 

 

 

1) Пишем HTML-код прелодера

 

 

 

 

 

 

 

2) Пишем SASS-стиль прелодера

 

 

 

 

 

 

 

3) Common.js  - пишем скрипт..

 

 

 

 

 

 

 

ГОТОВО! ВСЕ ДОЛЖНО РАБОТАТЬ!

 

Далее

 

[maxbutton id="18" url="button_goto" text="Добавить КНОПКУ-GO TO" ]

 

Добавляем кнопку:

 

 

Заполняем вот так ПОЛЯ:

 

 

Код кнопки - ВСТАВИЛСЯ!

 

Затем, копируем - этот код:

 

 

 

И вставляем его ниже, в то место куда нужно ПЕРЕЙТИ:

 

Затем, Написать слово:  "Далее"  -> Выделить и нажать на кнопку  "Якорь":

 

 

ОДНО ПОЛЕ: Вставим без "#" - ID - якоря...

 

 

 

OK! - ГОТОВО!

 

 

Далее,

 

 

[maxbutton id="17" url="paralax" text="PARALAX - Делаем" ]

 

 

Начнем    внедрение ПАРАЛАКСА    в проект:

 

 

Страница плагина тут:

 

Ссылка:   http://pixelcog.github.io/parallax.js/

 

 

 

 

1)     Подключаем библиотеку Parallax    непосредственно в  GULP

 

 

 

2) Кладем сам файлик библиотеки Parallax - в папку    /libs  

 

 

 

И еще не забываем положить 2-й файлик с библиотекой:

 

 

 

3)  Добавим строчку в заглавие секции в которую хотим подключить PARALLAX:

 


ВАЖНО:  НУЖНО УБРАТЬ ЗАЛИВКУ ФОНА В СЕКЦИИ, в которой хотим подключить Parallax!


 

 

Сам код строчки ( HTML ):

 

 

 

КОД HTML SECTION-PARALAX

 

 

 

 

КОД SASS PARALAX 1920

 

 

 

 

Смотрим что получилось!

 

 

 

 

ВСЕ! ВСЕ ДОЛЖНО РАБОТАТЬ!

 

Никаких скриптов    в common.JS - не пишем!   (Все что нужно уже есть в плагине  parallax.min.js )

 

Смотрим результат:

 

 

 

OK! - ГОТОВО!

 

 

Далее,

 

[maxbutton id="18" text="Слайдер Bootstrup Автоматический" ]

 

http://bootstrap-4.ru/docs/4.0/components/carousel/

 

 

 

  1.  Нарежем картинки для Слайдера и положим в нужную папку:

 

 

 

GO в HTML страницы и вставляем код слайдера:

 

 

 

 

 

Далее,

 

 

[maxbutton id="17" url="#" text="СЛАЙДЕР - Автоматический" ]

 

 

Начинаем интеграцию слайдера в WEB-проект:

 

HTML -  код вставляем в СЕКЦИЮ:

 

 

 

САМ JS - КОД ДЛЯ ВСТАВКИ В HTML:

 

 

 

 

 

Там же в HTML - подключаем скрипты:

 

 

 

Код скриптов:

 

 

 

 

И опять тут же, в самом низу HTML - Порядок подключения скриптов - ВАЖЕН! (С ними были проблемки)

 

 

 

 

И сам КОД-HTML:

 

 

 

 

ТЕПЕРЬ ВСТАВЛЯЕМ SASS - СТИЛИ (Уже адаптированные для GULP):

 

 

 

 

САМ КОД SASS - СТИЛЕЙ:

 

 

 

 

ДАЛЕЕ  ПОДКЛЮЧАЕМ СКРИПТ В GULP:

 

 

 

КОД  СТРОКИ:

 

 

 

 

 

 

 

ДАЛЕЕ КЛАДЕМ ФАЙЛИКИ ПО ПАПКАМ:

 

 

 

 

И ЕЩЕ СЮДА КЛАДЕМ ФАЙЛИК:

 

 

 

 

ВСЕ ДОЛЖНО РАБОТАТЬ!

 

 

 

 

СТРАНИЦА ГДЕ БЫЛ РАЗМЕЩЕН СЛАЙДЕР:

Разработка и создание сайтов под ключ на MODX.html

 

 

ГОТОВО!

 

 

Далее,

 

 

[maxbutton id="17" url="#akkordion" text="AKKORDION - Часто задаваемые вопросы" ]

 

 

Начали..

 

 

 

САМ HTML - КОД:

 

 

 

 

ДАЛЕЕ ТУТ ЖЕ СПУСКАЕМСЯ В НИЗ HTML и ДОБАВЛЯЕМ СКРИПТЫ:

 

 

 

САМ КОД СКРИПТОВ ДЛЯ HTML:

 

 

 

 

Далее,

 

 

 

 

Далее,

 

 

 

САМ КОД СТИЛЯ SASS:

 

 

 

 

Далее,

 

КЛАДЕМ ФАЙЛ СКРИПТА В ПАПКУ:

 

 

 

ПОЖАЛУЙ ЭТО ВСЕ!

 

 

 

ГОТОВО!

 

 

далее,

 

[maxbutton id="18" url="#animate" text="Animate - Подключаем!" ]

 

 

 

Скачиваем      Animate.css   

 

Прямая ссылка:   https://raw.github.com/daneden/animate.css/master/animate.css

 

ЗАТЕМ,

 

 

 

КОД ПОДКЛЮЧЕНИЯ:

 

 

 

 

ПОДКЛЮЧАЕМ ПЛАГИНЫ, ЕСЛИ ОНИ ЕЩЕ НЕ ПОДКЛЮЧЕНЫ:

 

 

 

 

И УЖЕ МОЖНО ПРОПИСЫВАТЬ ПАРАМЕТРЫ ДЛЯ ЭЛЕМЕНТОВ, КОТОРЫЕ ХОТИМ ОЖИВИТЬ:

 

 

 

 

КОД ПАРАМЕТРОВ:

 

 

 

 

 

ЗАТЕМ ИДЕМ В SASS:

 

 

 

 

 

ИЛИ НА ПРЯМУЮ В HTML - МОЖНО УКАЗАТЬ ПАРАМЕТРЫ:

 

 

 

 

 

ВСЕ ДОЛЖНО РАБОТАТЬ!

 

 

 

 

 

ССЫЛКА НА ВИДЫ АНИМАЦИИ:

 

https://github.com/daneden/animate.css

 

 

 

 

 

ГОТОВО! ТЕПЕРЬ МОЖНО ВСЕ АНИМИРОВАТЬ!

 

 

    И ДЕЛАЕМ СТАРТ АНИМАЦИИ ПО СКРОЛУ      

 

 

 

 

 

Нам понадобится скрипт АКТИВАЦИИ АНИМАЦИИ при СКРОЛЕ:

 

 

 

 

КОД СКРИПТА:

 

 

 

 

ДАЛЕЕ

 

в COMMON.JS  напишем  функцию с параметрами анимации:

 

 

 

 

И ВСЯ СХЕМА ПОДКЛЮЧЕНИЯ В HTML:

 

 

 

 

ДАЛЕЕ в SASS можно делать контроль СКОРОСТИ АНИМАЦИИ

 

 

 

РАБОТАЕТ!

 

 

ГОТОВО!

 

 

Далее,

 

 

[maxbutton id="17" url="#" text="ПУНКТЫ МЕНЮ Одинаковые" ]

 

 

ВЛОЖЕННЫЕ ПУНКТЫ МЕНЮ ОДИНАКОВОЙ ШИРИНЫ:

 

 

 

 

РАБОТАЕТ!

 

 

Далее

 

[maxbutton id="18" url="otzivi-karousel" text="ОТЗЫВЫ - КАРУСЕЛЬ + OVERLAY" ]

 

 

 

 

Погнали:

 

1)  HTML код

 

 

 

 

 

 

2)  SASS - стиль

 

 

 

 

 

 

2)  COMMON.JS - Скрипт

 

 

 

 

ЭТО ВСЕ!  ВАЖНО ЕЩЕ УСТАНОВИТЬ САМ ПЛАГИН OWL-Carousel

 

И ВСЕ ДОЛЖНО РАБОТАТЬ!

 

 

 

 

Далее,

 

"hidden-sm"

 

 

 

 

Далее,

 

<Transform + Rotate - на :hover>

 

 

 

 

Далее

 

[maxbutton id="18" url="#flip-container" text="flip-container" ]