• Эффект появления при "скролле" мышью

    AOS - анимация

    далее...

  • Возможность доп. анимации

    title - meta - description

    далее...

  • Слайд-шоу имеет несколько режимов

    push - pull - slide - fade - scale

    далее...

Выбирая и копируя Particles for Gantry 5 - ту или иную готовую частицу, обращаем внимание на структуру файлов и папок. Сложные частицы обязательно состоят из 3-4 блоков, стили (размеры и цвет букв, фон частицы) прописываются в папке scss , переходы (реакция на передвижение курсора, нажатие и т.п.) могут быть осуществлены с помощью javascipt в папках html.twig или  js, также могут быть ссылки на код css - все это требует внимательности при переносе частиц на Ваш проект.

CSS  JS   PARTICLES  SCSS

 

Рассмотрим наиболее популярные частицы Gantry5  - частицы-исходники с коммерческих сайтов от ROCKETTHEME. Оговорюсь, почти все частицы требуют доработки.

Управляйте просмотром в таблице, нажимая на заголовки (сортировка по наличию) или осуществите поиск в окне

Возможности бесплатных шаблонов для JOOMLA 3 на разных фреймворках: T3, HELIX 3, HELIX ULTIMATUM, ASTROID, WRAP 7, YOO, GANTRY 5 - сравнение
Возможности администрирования бесплатных шаблонов T3 Helix3 HelixU As Wrap7 YooP Gantry5
Сохранение без перезагрузки
Возможность кастомизации (создание уникального стиля)
Предпросмотр изменений
Сигналы о несохраненных изменениях
Интерфейс настроек
Закрепление меню (Sticky Header)
Favicon
Apple Touch Icon
Ссылки на соцсети
Предзагрузчик (Preloader)
Наличие опции преоладера
Предпросмотр предзагрузчика
Кастомизация предзагрузчика
Кнопка «Наверх»
Наличие опции "кнопка вверх"
Закреплённая кнопка
Кастомизация кнопки
Логотип и вариации

Все частицы от Rockettheme можно сгруппировать по группам:

  • первая группа - это различные меню, ведущие в свои тематические разделы  и повышающие удобство работы с сайтом

Таких частиц шесть плюс частица поиск:

 menu  accordion menu  mobile menu  horizontal menu  icon menu  simple menu

Это могут быть как горизонтальные, так и вертикальные меню. 

*** - Чтобы меню выглядело привлекательно, дополнительно необходимо использовать соответствующий CSS класс и размер иконок

  • вторая большая группа - это кнопки, информирующие и приглашающие совершить переход или действие

 Это прежде всего

Block Content  Content List  Ethereal Block  Info List  Promo Content  Grid Content  Simple Content

и  некоторые другие.

Так выглядит частица contentlist

info list antares

Ниже представлена частица infolist 

infolist demo

  • третья группа - это всевозможные слайдеры 

Среди них можно выделить

Carousel  SLIDERSHOW  Flex Slider  News Slider  News Ticker  Owl Cards  Owl Carousel  Owl Showcase  Panel Slider  и др.

Частица Flickity, найденная на просторах интернета - универсальный самоподстраивающийся по высоте слайдер jQuery

Частица Slideshow JL - 2018 от joomlead - позволяет выводит в режиме карусели всевозможные картинки с текстом в режиме оверлея плюс представляет различные типы анимации как самих картинок, так и оверлея - представленная частица была создана на базе Overlay JL и  модифицирована : не работали background-color + fontsize 

  • Эффект появления при "скролле" мышью

    AOS - анимация

    далее...

  • Возможность доп. анимации

    title - meta - description

    далее...

  • Слайд-шоу имеет несколько режимов

    push - pull - slide - fade - scale

    далее...

Testimonial alt tag

“Шаблон Akuatik от Rockettheme - исключительная тема для веб-сайта. Его косые частицы замечательны.”

– Dread Pirate Roberts генеральный директор компании

Testimonial alt tag

“Шаблон Akuatik не похож на любую из тем, которую когда-либо использовали дизайнеры от Rockettheme.”

– Princess Buttercup CEO of The Company Inc

Testimonial alt tag

“Akuatik идеально подходит для малого бизнеса и даже крупных корпораций. Это блестящий современный, но профессиональный дизайн!”

– Valerie Doe CEO of The Company Inc

Типовой flexslider от шаблона antares при правильной настройке и расположении позволяет использовать паралакс эффект в режимах slideshow, showcase или testimonial. К сожалению, без коррекции scss файла внешний вид далек от совершенства. Некоторые слайдеры требуют, чтобы их поместили в определенную секцию (раздел) шаблона с дополнительным css классом - иначе работать не будут, например slideshow от supra 

  • четвертая группа - это различные TAB-s, переход по вкладкам которых осуществляется вручную

Content Tabs VIDGETS   Header Tabs    Pricing Tabs

Не все скачанные частицы корректно выводятся на странице, например, в частице contenttabs (по умолчанию) белые буквы на белом фоне не видать. При этом почти все табы имеют стандартные css классы и поэтому одновременное использование нескольких табов с разных шаблонах без коррекции файлов scss невозможно - стили накладываются друг на друга - выдаваю причудливые метаморфозы 

  • специфичная группа частиц, отвечающая за формат теста, звук и видео в удобном или специальном формате

Animated Text  Audio Player  VIDEO BACKGROUND  Video  Video Grid   Video Carousel    Progress Bar

Самописная частица на базе BG Slideshow от шаблона Supra Rockettheme выгодно отличается от всех слайдеров Gantry5 (см. ниже) и имеет эффектные переходы при наведении на тест и картинки (скрипт vegas)

 

  • шестая группа частиц, отвечающая за вывод изображениий на сайте

Grid Promo Gallery   Image Block   Image Grid   Mosaic Grid   POPUP GRID   Promo Image   Testimonial  Image Overlay

После проверки всего шаблона antares от rockettheme выяснилось, что из 20 частиц, представленных на шаблоне, всего 3-4 будут работать правильно с использованием стилей scss и скриптов js - остальное сырой материал, который надо дорабатывать, настраивать, лечить. Займемся этим - см. статью Лечение частиц Gantry5 от Rockettheme (часть 1)

Материал дополняется и корректируется ....