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