Adobe Muse виджет поблочной (слайдовой) прокрутки. Версия 1.0
Демо-сайт: http://muse-widgets.ru/demo/applescroll/
Разработчик виджета: Александр Бузмаков
Обратная связь: http://vk.com/musewidgets
Виджет предназначен для создания эффектного сайта с поблочной (слайдовой) прокруткой в стиле промо-сайта IPhone 5S
И так, вы являетесь счастливым обладателем виджета. В этот раз, я обещаю, не смотря на то, что виджет довольно сложный,
никаких "ID" указывать не нужно (в отличие от прежних моих виджетов).
== УСТАНОВКА ==
Перед началом работы распакуйте архив.
Импортируйте файл "[MW] Поблочная прокрутка" в вашу библиотеку. Для работы чудо-виджета потребуется добавить в папку assets
вашего сайта три хитрых файла (вы найдете их в комплекте, в папке "Файлы для передачи"): jquery.applescroll.css, jquery.applescroll.min.js, jquery.slimscroll.min.js
Для этого воспользуйтесь меню "Файл" > "Добавить файлы для передачи".
Виджет полностью перестраивает стандартную html-структуру сайта Мьюз и использовать его можно только выполняя строгую последовательность действий.
Если на каком-то шаге что-то упустите - все, работать уже не будет. Если не получилось, лучше начать сначала. Главное, понять суть, а эта инструкция вам поможет.
== ПОДГОТОВКА ПРОЕКТА ==
Для удобства работы лучше сразу опредлить сколько блоков будет на сайте и подготовить заранее высоту страницы.
Например, ваш сайт будет состоять из 5 блоков. Стандартная высота блока виджета - 650px (рекомендую ее не менять).
Значит общая высота страницы составит 650х5=3250px. Добавьте еще пару сотен пикс., чтобы внизу страницы осталось свободное пространство,
на случай, если потребуется в дальнейшем добавить еще блок.
!!!ВАЖНО!!! >> Виджет можно использовать только на обычной странице, на странице-шаблоне (стандартное название "Шаблон-А") применять нельзя.
Также в шаблоне нужно убрать верхний и нижний колонтитулы - перейдите в страницу-шаблон и сдвинте направляющие, убрав пространства колонтитулов полностью.
Отступы можно также убрать, чтобы не мешали визуально, поскольку они тоже не будут работать. Затем, закройте шаблон и вернитесь на страницу сайта <<
Когда рабочее пространство готово, можем приступать к работе с виджетом.
Заглянем в папку виджета, который должен уже у вас появиться в вашей библиотеке программы.
В папке виджета находятся 5 модулей: 1)"1-й блок + общие настройки", 2)"Блок-конструктор", 3)"Мобильн. 1-й блок + общие настройки",
4)"Мобильн. Блок-конструктор", 5)"Модуль анимации".
И так, о бо всем по порядку. Первый и второй модули нужны для разработки стандартной (десктопной) версии сайта, третий и четвертый - для разработки
планшетной и мобильной версий сайта. Пятый модуль говорит сам за себя, о нем вспомним чуть позже.
== РАБОТА С ВИДЖЕТОМ ==
Принцип построения сайта будет следующий:
Сначала на страницу помещается первый блок (модуль "1-й блок + общие настройки") - в нем, кроме индивидуальных настроек блока, есть еще и общие натсройки всего сайта.
Поместите этот блок, прижав его к верхней границе браузера.
Далее, вплотную к нему помещается второй блок (модуль "Блок-конструктор"). Последующие блоки также берем из модуля "Блок-конструктор". Копирование предыдущего
блока для создания нового, не рекомендуется. Лучше для создания последующего нового блока каждый раз брать новый модуль "Блок-конструктор".
!!!Важно!!! >> Обратите внимание, что ширина блоков виджета - 960 px. Если ширина вашей страницы другая, то растяните и выровняйте блоки по границам страницы.
Нельзя ратягивать блоки на 100% ширину - виджет работать не будет! <<
Т.к. мы вначале решили для примера, что наш сайт будет состоять из 5-ти блоков, то мы должны последовательно добавить один главный блок и четыре "блок-конструкторов".
Внизу страницы у нас должно остаться пустое пространство. Не переживайте на счет него - оно отображаться не будет.
Далее, необходимо настроить наши блоки. У каждого блока есть свой порядковый номер - он необходим для идентификации блока в структуре сайта и придания ему
индивидуальных настроек. Первый и второй блок "помечаются" автоматически. А вот последующие блоки необходимо "пронумеровать". Для этого, в нижнем левом углу
каждого блока имеется настройка (в виде значка "<>"), на который нужно нажать, чтобы открылась панель настроек параметров.
Переходим к третьему блоку и открываем его параметры. Ставим "3" в "Номер очередности блока на странице". В четвертом блоке - "4", в пятом - "5" и т.д.
Первоначальные настройки на этом закончены. Теперь вы можете сделать предпросмотр страницы в браузере (Ctrl+Shift+E) и посмотреть, что получилось на этом этапе.
Если все сделали правильно, то должен открыться сайт из пяти блоков. Справа появились элементы навигации в виде черных кружочков. Блоки должны
располагаться по центру страницы и плавно сменяться при прокручивании. Обратите внимание, что если вы поменяете масштаб в браузере(удерживая Ctrl, вращайте колесо мыши),
тем самым имитируя монитор бОльшего размера, вы обнаружите, что блоки будут по центру не только по горизонтали, но и будут центрироваться по вертикали - это
такая особенность виджета, ради которой мне пришлось изрядно повозиться, чтобы получить это.
Если же описанного результата вы не получили, значит где-то допущена ошибка, и на данном этапе лучше начать все сначала, следуя инструкции.
Если все ОК, то можно продолжать дальше.
Как вы уже должны были заметить, каждый блок имеет заливку. Но она, по сути, в основном нужна только на первоначальном этапе, чтобы блоки было лучше видно.
Вы можете убрать или изменить заливку при помощи стандартных средств программы, в зависимости от требований проекта.
В основном, блоки нужны прозрачные и их назначение, это объединить (обернуть в
) контент каждого слайда.
Обратите внимание, что блоки "магнитные" - в роде тех, что вы встречали в стандартных виджетах (формах, слайд-шоу и лайтбоксе).
При попадании любого объекта в блок и его перемещения внутри, границы блока начинают
"светиться" жирной синей рамкой, показывая, что объект "примагничен" к данному блоку. Если посмотреть html-код страницы, то можно увидеть, что все объекты,
помещенные в блок, будут "обернуты" в общий контейнер (
...
). Это как раз нужно для разделения сайта на такие блоки-слайды.
!!!Важно!!! >> Следите, чтобы основные "магнитные" блоки не наезжали друг на друга, иначе возникнет ошибка и прокрутка не будет работать должным образом.
Такое может произойти при добавлении какого-нибудь большого объекта, в результате чего, общий блок растянется вниз (в бок или вверх), в результате чего
может произойти "перехлест" блоков и структура нарушится. Если для сайта требуется блок больше по высоте, чем стандартный, то растяните его на нужную высоту.
Последующие блоки сдвиньте вниз, чтобы не было "перехлеста". <<
Давайте обратимся еще к одной интересной настройке - это задний фон каждого слайда, имеющий 100% ширину и высоту.
Фон первого слайда задается в первом главном блоке (слева внизу значек "<>", нажмите на него). Фон может быть как просто заливкой (настройка "фоновый цвет блока"),
так и изображением (настройка "Фоновая картинка блока"). Изображение будет иметь responsive-свойство, т.е. будет полностью заполнять экран.
Рекомендую использовать изображение достаточно большого размера - шириной 1700-2300px. Если у пользователя экран будет большей ширины, то картинка отмасштабируется
с небольшой, почти не заметной, потерей качества.
Если картинка в качестве фона блока не нужна, то можно сделать просто заливку - в "фоновый цвет блока" укажите нужный цвет (в формате #FFFFFF).
Таким же образом задается фон у всех остальных блоков (настройки блока также находятся в левом нижнем углу).
Далее, необходимо прописать якоря и подсказки для каждого блока.
Якоря - это идентификаторы каждого блока, которые отображаются в статусной строке браузера при переходе на
каждый последующий слайд (ссылка при переходе на второй слайд, например, может иметь вид http://mysite.ru#block-2).
Якоря можно использовать при создании дополнительного меню, ссылки с которого будут ссылаться на определенные блоки сайта.
Найдите в настройках виджета поле "Список якорей", в нем, для примера, уже прописаны названия якорей: 'block-1', 'block-2', 'block-3'
Вы можете изменить их на свои и добавить новые. Обратите внимание, что они должны быть на латинице, обрамлены ковычками и прописаны через запятую с пробелом,
после последнего якоря запятая или точка не нужна.
Если вам не нужно ссылаться на определенный блок и вы не хотите, чтобы они отображались в браузере при переходе по сайту, то просто удалите их (очистите поле).
Подсказки - это всплывающие сообщения при наведении на элементы навигации (на кружочки).
Найдите в настройках виджета поле "Список подсказок", в нем, для примера, уже прописаны подсказки: 'Главная', 'О компании', 'Заказать'
Вы можете изменить их на свои и добавить новые. Они могут быть на любом языке, обрамлены ковычками и прописаны через запятую с пробелом,
после последнего якоря запятая или точка не нужна.
Если подсказки не нужны, то просто удалите их (очистите поле).
Сделайте предпросмотр страницы в браузере и проверьте, что все работает, как надо.
Если все ОК, то можете начинать наполнять сайт контентом. Для этого просто добавляйте в "магнитные" блоки требуемые объекты (текст, картинки, формы, лайтбоксы и т.д.)
Постоянно следите, чтобы "магнитные" блоки не наезжали друг на друга или не выходили за пределы страницы. Малейшая ошибка, и сайт будет отображаться не корректно.
После того, как сайт в основном заполнен, можно приступить к "украшательствам".
Вернемся в общие настройки и посмотрим, что там еще имеется на "закуску"))
"Элементы навигации Откл/вкл" - включает или отключает отображение элементов навигации (кружочков).
"Расположение навигации" - выберете, с какой стороны будут отображаться кружочки навигации - справа или слева.
"Цвет элементов навигации" - задает цвет кружочков и подсказок.
"Размер шрифта подсказок (px)" - думаю, объяснять тут не чего.
"Анимационный эффект прокрутки" - эффект при переходе с блока на блок. Выберете один из 12 вариантов. Между некоторыми из них, визуально, разница может быть
не очень заметна, тем не менее, эффекты разные.
"Скорость прокрутки (мс)" - чем больше цифра, тем плавнее будет переход.
"Возврат к 1-му слайду по окончанию страницы" - прокручивается страница до конца и при дальнейшей прокрутке перекидывает вверх на первый блок сайта.
"Бесконечная прокрутка, Вкл/Откл" - прокручивается страница до конца и при дальнейшей прокрутке сайт начинается снова, получается "бесконечный эффект".
"Прокрутка внутри блока, Вкл/Откл" - опция включает прокрутку внутри блока в случае, если контент блока будет большим и не помещаться в один экран. Скроллбар будет стилизованным.
Настроек очень много, я думаю, вы сможете сделать реально крутой сайт!
== АНИМАЦИЯ ==
И так, теперь займемся магией.
Наконец, я реализовал анимацию, для создания которой не требуется указывать ID (как в других моих виджетах "первого" поколения).
В возможностях виджета задать анимацию в восьми любых блоках из 20 возможных. Ограничения связаны с техническими особенностями виджета.
Этого слихвой хватит, чтобы сделать ваш сайт классным и запоминающимся. Если же вам покажется этого мало, то значит я вообще ничего не понимаю в веб-дизайне))
В блок, где требуется анимация, добавьте специальный модуль, который так и называется, "Модуль анимации". Вы можете добавить только два модуля на блок.
Можно добавить и больше, но все последующие модули будут наследовать настройки первого.
Модуль анимации имеет такие-же "магнитные" свойства, как и основной блок. Все, что будет в него помещено, унаследует от него настройки анимации.
Это может быть один объект, или группа объектов. Вы можете растягивать габариты модуля анимации под нужный размер, чтобы в него поместились требуемые объекты.
Для тестирования и понятия принципа действия, поместите пару модулей анимации в любой из блоков сайта. В них добавьте любые объекты, например, прямоугольники.
Далее, вернитесь к первому блоку и найдите в правом нижнем углу значек "<>" - это настройки анимации.
Откройте параметры и задайте требуемому блоку и его двум модулям анимации, любой из 46-ти понравивившихся анимационных эффектов.
Если на вашем сайте более восьми блоков и вам надо задать анимацию объектам, например, в 10-том блоке, то измените нумерацию в настройках, указав номер требуемого блока.
Обратите внимание, что анимация самого первого блока задается в общих параметрах виджета (левый нижний угол первого блока).
Там же, в настройках первого блока, задается длительность анимации (в секундах). Эта настройка будет действовать на всю анимацию на сайте. Отдельно, для какого-либо модуля, эта настройка не предусмотрена.
Пробуйте! Главное - не "переборщить" (все должно быть в меру).
== ПОЛНОЭКРАННОЕ СЛАЙД-ШОУ ==
Полноэкранное слайд-шоу реализовано в виджете довольно "по-хитрому".
Для этого, возьмите стандартный виджет "Слайд-шоу > Основной" и поместите его на шаблонную страницу ("Шаблон-А"). При этом, отключите в его настройках
галочки "Вперед", "Назад", "Подписи", "Счетчик", "Разрешить перелистывание" и включите галочку "Во весь экран".
!!!Важно!!! >> Не используйте виджет "Слайд-шоу > Полноэкранный режим" - это работать не будет! <<
На самом деле, таким образом, мы получим на заднем плане сайта полноэкранное слайд-шоу. И для того, чтобы его отобразить на основной странице сайта
в нужном месте, необходимо сделать определенный блок прозрачным. Для этого нужно сделать две вещи:
1.В самом первом блоке сайта, в общих настройках виджета и опции "Номер блока с полноэкранным слайд-шоу", укажите номер нужного блока, в котором должно отображаться слайд-шоу.
2.Перейдите к этому блоку и в его индивидуальных настройках очистите поля "Фоновая картинка блока" и "Фоновый цвет блока".
Теперь, сделайте предпросмотр страницы в браузере и убедитесь, что все получилось.
== ФИКСИРОВАННОЕ ВЕРХНЕЕ МЕНЮ ==
Чтобы сделать верхнее фиксированное меню потребуется четко выполнить несколько действий - если что-то упустите, работать не будет.
1.Необходимо освободить место вверху страницы под меню. Для этого выделите все блоки сайта и переместите их вниз на расстояние, требуемое для размещения меню.
2.Создайте новый слой в панели "Слои" (можете его так и назвать, "меню"). В этом слое создайте горизонтальное меню при помощи стандартного виджета "Меню".
Убедитесь, что меню появилось именно в этом слое. Если меню сразу не попало в этот слой, то переместите его туда.
3.Зафиксируйте меню при помощи стандартного инструмента фиксации (поставьте маркер вверху по центру).
3.В настройках виджета меню выбирете тип меню "вручную", т.к. в нем нам нужно будет проставить ссылки на якоря.
4.Создайте требуемое кол-во кнопок меню, соответстующее кол-ву блоков, на которые нужен переход по ссылкам в меню.
5.Растяните меню на нужную ширину, например, по ширине страницы.
!!!Важно!!! >> Не растягивайте меню на 100% ширину - будет отображаться не корректно! <<
6.Если нужно сделать фон меню на 100% ширину, то просто добавьте подниз прямоугольник-подложку (в этом же слое). Не забудьте применить к нему инструмент фиксации.
7.Проставьте ссылки в кнопках меню на соответствующие блоки.
В ссылке необходимо прописывать полный путь к блоку, вида http://mysite.ru#block-2
Но проверить вы его тогда сможете только после загрузки на хостинг.
Для тестирования, скопируйте ссылку, которую генерирует Мьюз при предпросмотре и в конце, вместо .index.html подставьте имя якоря (#block-2),
затем добавьте такую ссылку в меню и проверьте работоспособность, вызвав предпросмотр в браузере.
!!!Важно!!! >> Не пытайтесь в качестве ссылки использовать только имя якоря - работать не будет! <<
На этом - ВСЕ. Удачных разработок!
Примеры сайтов для вдохновления с поблочной прокруткой:
- http://snapzheimer.org/
- http://www.newjumoconcept.com
- https://moneytree.jp/
- http://charlotteaimes.com/
- http://collection.madeofsundays.com
- https://www.novaphotos.com/
- http://usescribe.com
- http://rawmilk.dk/en/
- http://www.carpetloverclub.net
- http://www.matrimonia.rs
- http://mymattioli.it
- http://www.consumedthemovie.com
- https://moysport.ru