В новой резиновой версии программы Adobe Muse CC 2015.1 появилась резиновая верстка сайтов, однако многие столкнулись при этом с проблемой отсутствия возможности использовать эффекты прокрутки и следовательно создания эффектов типа параллакс эффект . Смотрите это видео и вы узнаете об этих нюансах программы и какие варианты синтеза этих двух функций придумали и внедрили разработчики программы Adobe Muse.
Итак, новая резиновая верстка или всё же старый добрый параллакс эффект ?
Резиновая верстка или Параллакс эффект? В чем же вопрос?
В этом видео уроке я хотел бы осветить один очень важный вопрос, который касается последнего . Вопрос очень частый и касается он параллакса или резиновой вёрстки в Adobe Muse, которая стала доступна после последнего обновления программы.
И так, открываем программу Adobe Muse. Создаём новый проект. По-умолчанию идем «Страница», « », у нас установлено «гибкое значение ширины» для этой страницы. Если мы зайдём в настройки сайта, то у нас установлено «гибкое значение ширины» для всего сайта. При таких установках у нас, если мы зайдём в «эффекты прокрутки», возникает вот такая надпись –
«что бы включить эффекты прокрутки, на странице должна располагаться только одна фиксированная точка остановки ».
Что же это значит – если сейчас вы создаёте свой сайт и хотите сделать его гибким, например, располагаете какой-либо блок, делаете ему заливку (я сделаю синюю заливку), то сейчас данный блок очень хорошо адаптируется и обладает такой вот «резиновостью» — респонсивностью. При этом, если к данному объекту мы хотим прикрепить эффект прокрутки, мы этого сделать к сожалению, не сможем. Почему?
Потому что эффекты прокрутки (параллакс эффект) допустимо использовать в новой версии программы только для фиксированных значений ширины страницы сайта !
Резиновая верстка или Параллакс эффект? Что делать?
Выбираем в свойствах страницы и выставляем здесь «постоянную ширину» .«ОК». Таким образом, мы делаем так, что мы теперь можем использовать эффекты прокрутки для данного блока, задать ему, как и ранее начальное и конечное перемещение, и все остальные параметры. Ну а теперь, при гибкости данного сайта, мы видим, что данный блок никак не реагирует на уменьшение ширины страницы.
Резиновая верстка или Параллакс эффект? Дилемма.
Выход у нас только один – выбирать на данном этапе, либо использовать эффекты прокрутки и пользоваться программой, как и ранее с фиксированной шириной страницы сайта. Либо, если хотите гибкости и адаптивности (резиновости) сайта, придётся отказаться от эффектов прокрутки.
Поскольку сейчас, даже если мы зайдём в меню «страница», «свойства страницы», и попытаемся выставить гибкое значение ширины, то у нас тут же выскочит окошко, которое нас предупреждает — «на этой странице содержатся эффекты прокрутки, которые будут отключены при добавлении точки остановки или изменении размера страницы». И спрашивает, хотим ли мы выполнить эту операцию. Если мы нажмём «нет», то наша страница останется с настройками постоянной ширины, если мы нажмём «да», то для страницы установится гибкое значение ширины, но для данного блока будут отключены все эффекты прокрутки.
Резиновая верстка или Параллакс эффект? Компромисс.
Единственный выход есть в том, чтобы делать для вашего сайта в целом — устанавливать настройки гибкого значения ширины. Для каждой же страницы Вы сможете устанавливать отдельно, какой вы хотите видеть эту страницу. Либо эта страница будет с постоянной шириной (я выставил для этой страницы «без имени 3»), либо, если я зайду в свойства страницы «домашняя», то здесь у меня выставлено «гибкое значение ширины». Таким образом, вы для каждой страницы можете устанавливать – будет ли станица использовать гибкое значение ширины, либо постоянное значение ширины. На тех страницах, где выставлено постоянное значение ширины, вы легко сможете использовать параллакс эффект или эффект прокрутки.
На этом заканчиваю этот урок. Ставьте лайки, пишите комментарии внизу. Подписывайтесь на мой канал .
1 417 участников · Открытый клуб
Клуб разработчиков сайтов на базе Adobe Muse. Обсуждаем работу в программе. Помогаем в решении появившихся проблем. Делимся шаблонами, виджетами и другими полезными файлами. Готовим текстовые и видеоуроки по работе в программе.
57 участников · Открытый клуб
Система управления содержимым сайта с открытым исходным кодом; написана на PHP; сервер базы данных - MySQL; выпущена под лицензией GNU GPL версии 2. Сфера применения - от блогов до достаточно сложных новостных ресурсов и интернет-магазинов. Встроенная система «тем» и «плагинов» вместе с удачной архитектурой позволяет конструировать проекты широкой функциональной сложности.
39 участников · Открытый клуб
Стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML. Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.
30 участников · Открытый клуб
Многофункциональный графический редактор, разработанный и распространяемый фирмой Adobe Systems. В основном работает с растровыми изображениями, однако имеет некоторые векторные инструменты. Продукт является лидером рынка в области коммерческих средств редактирования растровых изображений и наиболее известным продуктом фирмы Adobe. В настоящее время Photoshop доступен на платформах macOS, Windows, в мобильных системах iOS, Windows Phone и Android.
Онлайн конструктор сайтов, заточенный под разработку адаптивных сайтов, лендингов, интернет-магазинов и сайтов-визиток. Работает только как онлайн сервис без оффлайн клиента. Только на английском языке.
28 участников · Открытый клуб
21 участник · Открытый клуб
19 участников · Открытый клуб
Система управления содержимым, написанная на языках PHP и JavaScript, использующая в качестве хранилища базы данных СУБД MySQL или другие стандартные промышленные реляционные СУБД. Является свободным программным обеспечением, распространяемым под лицензией GNU GPL.
15 участников · Открытый клуб
Формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.
13 участников · Открытый клуб
9 участников · Открытый клуб
Adobe Premiere Pro - профессиональная программа нелинейного видеомонтажа компании Adobe Systems. Является наследником программы Adobe Premiere (последняя вышедшая версия которой носила номер 6.5). Первая версия программы (она же Adobe Premiere 7) вышла 21 августа 2003 года для операционных систем семейства Windows. Начиная с третьей версии программа стала доступной и для операционных систем OS X. Первые две версии выходили отдельными продуктами, третья версия вышла в составе пакета Adobe Creative Suite 3. Начиная с пятой версии поддерживаются только 64-битные операционные системы, тогда как четвёртая версия предполагала использование также и в 32-битных.
В этой статье рассказывается о том, как применять эффекты прокрутки в Adobe Muse. Прочитайте ее и получите общее представление об эффектах прокрутки.
Эффекты прокрутки в веб-дизайне позволяют задавать скорость и направление перемещения каждого элемента веб-страницы. С помощью эффектов прокрутки можно создавать динамические анимационные веб-сайты, когда два элемента (или больше) перемещаются в браузере с разной скоростью. Adobe Muse позволяет настроить различные параметры, включая движение, непрозрачность и воспроизведение слайд-шоу или анимации.
Эффекты прокрутки можно применять практически ко всем элементам в Adobe Muse на сайте с фиксированными параметрами или с помощью фиксированных точек. К элементам относятся фоновые изображения, текст и изображения. Кроме того, можно применить эффект прокрутки фона к любому элементу, использующему фоновое изображение в качестве заливки. Эффекты прокрутки также можно применять в меню Заливка в браузере , если для отображения в окне браузера используется заполняющее фоновое изображение.
Эффекты прокрутки не применяются к элементам заполнения фона, которые используют определенные графические эффекты, такие как скос и внутреннее свечение. Если к выбранному объекту применены эффекты таких типов, параметры в разделе Прокрутка на панели Заливка будут недоступны.
Примечание.
Чтобы применить к элементу эффекты прокрутки, проверьте, что для элемента задано состояние «Стандартное».
Помимо изображений и фоновой заливки, эффекты прокрутки также часто используются в анимации для создания эффекта глубины. Для разных элементов на странице можно задать разную скорость движения. Например, макет страницы может содержать элемент переднего плана, который будет перемещаться в два раза быстрее элемента среднего плана. Скорость перемещения мозаичной заливки фона, находящейся за анимированным содержимым, может быть в два раза меньше скорости элемента среднего плана. Данные настройки имитируют характер восприятия движения глазом человека. Скорость движения объекта, находящегося ближе всего к человеку, кажется наиболее высокой.
Эффекты прокрутки стоит применять при добавлении тегов привязки на страницу. Когда посетитель нажимает ссылку для перехода к тегу привязки на достаточно длинной или широкой странице, начинают действовать эффекты прокрутки. Используя эффекты прокрутки и теги привязки, можно создавать страницы с разделами, открывающимися с эффектами вылета, появления или анимации. Также можно создать ряд пунктов меню, которые все вместе образуют единую панель навигации, когда посетитель переходит к самой нижней области страницы.
Перед использованием эффектов прокрутки ознакомьтесь со следующими ключевыми понятиями:
Исходная позиция в эффектах прокрутки - это то расположение, в котором настраиваемые элементы страницы начинают выполнять движение. Например, нажмите меню Заливка в браузере и выберите вкладку Прокрутка . Поле, расположенное по центру (в нем сейчас указано значение 0 пикс.), обозначает исходную позицию. При активации настроек движения на странице появится T-образный маркер. С помощью T-образного маркера можно управлять диапазоном движения. Значение 0 пикс., используемое по умолчанию, означает, что T-образный маркер находится на верхнем крае окна браузера.
Число пикселей в поле указывает расстояние, на которое будут перемещены изменения, заданные в разделе Начальное перемещение (в указанном направлении и с заданной скоростью), по мере прокрутки страницы до этой позиции. Верхнему краю страницы соответствует положение в 0 пикселей. Значит, чем больше число пикселей, тем дальше будет прокручена страница. На палитре Перспектива (Окно > Перспектива ) расстояние от верхнего края страницы обозначается как значение по оси Y.
Начальное перемещение
Начальное перемещение в эффектах прокрутки - это расположение, откуда начинается движение прокрутки, исчисляемое в пикселях. Настройте начальное перемещение, чтобы указать прокрутку элементов (значение между исходной позицией и краем элемента страницы).
В разделе «Начальное перемещение» рядом со значениями в полях отображается символ «x» (в нижнем регистре). Он обозначает множитель скорости перемещения . Если посетитель прокручивает страницу быстрее, перемещение эффекта прокрутки будет происходить с той же скоростью, с которой посетитель прокручивает страницу.
Мы собрали некоторые причудливые эффекты, которые происходят, когда пользователь просматривает разделы веб-страницы. Некоторые из эффектов довольно экстремальные, но они могут оказаться очень полезными, если ваша цель - создать впечатляющий пользовательский интерфейс.
Все анимации были созданы с помощью Velocity.js .
Обратите внимание
Эти эффекты не видны на небольших устройствах, где пользователь может просто прокручивать список разделов. Мы тестировали эффекты на мобильных устройствах, а производительность была плохой, поэтому мы решили ограничить их более крупными и мощными устройствами.
Как это работает
Чтобы применить анимацию или включить / отключить захват прокрутки, просто используйте типы data-animation и data-hijacking , применяемые к
. Значения, поддерживаемые data-animation , не имеют / scaleDown / rotate / gallery / catch / opacity / fixed / parallax. Хотя data-hijacking может быть включен или выключен.
Создание структуры
Структура HTML
представляет собой список элементов
Page Scroll Effects
Section 2
Добавление стиля
Все преобразования были созданы в jQuery с использованием Velocity.js , поэтому объяснять CSS нет ни какого смысла. Мы просто устанавливаем высоту, равную 100vh для каждого
Cd-section { height: 100vh; } .cd-section:first-of-type > div { background-color: #2b334f; } .cd-section:nth-of-type(2) > div { background-color: #2e5367; } .cd-section:nth-of-type(3) > div { background-color: #267481; } .cd-section:nth-of-type(4) > div { background-color: #fcb052; } .cd-section:nth-of-type(5) > div { background-color: #f06a59; } .cd-section > div { background-position: center center; background-repeat: no-repeat; background-size: cover; } .cd-section:first-of-type > div { background-image: url("../img/img-1.jpg"); } .cd-section:nth-of-type(2) > div { background-image: url("../img/img-2.jpg"); } .cd-section:nth-of-type(3) > div { background-image: url("../img/img-3.jpg"); } .cd-section:nth-of-type(4) > div { background-image: url("../img/img-4.jpg"); } .cd-section:nth-of-type(5) > div { background-image: url("../img/img-5.jpg"); }
Обработка событий
Мы использовали два разных подхода в зависимости от того, выключен или отключен захват данных.
Когда data-hijacking = off , каждый раздел анимируется в соответствии с его положением относительно окна просмотра. Например, для анимации scaleDown мы изменяем значения opacity, scale, translateY и boxShadowBlur раздела> div-элементов:
//actualBlock is the section we are animation var offset = $(window).scrollTop() - actualBlock.offset().top, windowHeight = $(window).height(); if(offset >= -windowHeight && offset 0 && offset
Когда data-hijacking = on , мы определяем пользовательские эффекты для каждой анимации, используя функцию регистрации Velocity UI Pack . Например, для эффекта масштабирования (анимация scaleDown) мы использовали:
$.Velocity .RegisterEffect("scaleDown", { defaultDuration: 800, calls: [ [ { opacity: "0", scale: "0.7", boxShadowBlur: "40px" }, 1] ] });
, Turtles in Time или оригинальную игру Moon Patrol . В этих играх техника параллакса наблюдается в тот момент, когда несколько фоновых слоев с различными текстурами двигаются с разной скоростью, что создает эффект трехмерного пространства.
Почему я начал говорить о ретро-играх в статье о веб-разработке? Самым простым ответом мог бы быть «потому что они клевые», но нет. Параллакс-скроллинг является классным дизайнерским концептом, который прокладывает свой путь в мир веб-дизайна. Nike были одними из первых, кто использовал эту технику с большим успехом, когда они наняли маркетинговых гигантов Weiden and Kennedy для разработки их оригинального сайта Nike Better World. Сайт Nike Better World с того времени был обновлен и заменен на новый, однако есть другой сайт, довольно похожий на то, как выглядел первый параллакс-дизайн от Nike - сайт о спортивных напитках Activate .
Наверное, вы заметили, что во время прокрутки страницы сайта вниз несколько различных элементов, находящихся на этой странице, двигаются с разной скоростью. Давайте для примера возьмем страницу, отображенную на картинке сверху. По мере прокрутки страницы вниз вы увидите, что голубые точки в фоне (те, которые немного размыты), двигаются с той же скоростью, что и скроллбар. Также, вы увидите, что группа голубых точек, которые более сфокусированы и лежат на переднем плане, двигаются с немного большей скоростью, чем скроллбар. Быстрее этих точек двигается текст “0 SUGAR | 0 CALORIES | NATURALLY SWEETENED” и главный заголовок страницы “Products”. И, наконец, есть изображения самого продукта, как маленькие и расфокусированные в фоне, так и большие, сфокусированные и лежащие на переднем плане. Фоновые изображения продуктов двигаются с той же скоростью, что и текст, в то время как изображения продуктов на переднем плане двигаются быстрее этого текста. Это все и является идеальной демонстрацией параллакс-скроллинга, когда разные слои изображений накладываются друг на друга и все движутся с разной скоростью при прокрутке страницы, создавая эффект трехмерности.
Параллакс-скроллинг не ограничивается только вертикальным скроллом страницы или скроллингом по прямой линии. Отдадим право Nintendo для демонстрации идеального примера, подтверждающего это утверждение. Вспомните ранние игры Nintendo, где наши герои обычно двигались горизонтально слева направо вдоль экрана, а не вертикально вниз, как мы видели это на сайте Activate выше. Прокатитесь на MarkioKart Wii и давайте поговорим о некоторых клевых штуках, которые мы там можно увидеть.
Первую вещь, которую вы заметите, это направление скроллинга страницы - оно не вертикальное, а как сказано выше, а изначально горизонтальное. Конечно, это круто, но это также не новый концепт. Также, вы заметите параллакс-эффект с динозавром Йоши и панцирями на фоне, Марио и Луиджи на переднем плане и основным контентом, которые смещаются с разной скоростью при прокрутке. Но как только вы доедете до страниц #highlights и #attack, траектория смещения перестанет быть идеально горизонтальной. То же самое касается перехода между страницами #rediscover и #snes. Изображения не только сохраняют свою разную скорость смещения, но и меняют общее направление с горизонтального на вертикальное.
Стоит также отметить, что использование эффекта параллакса на вашем сайте не должно быть ограничено лишь возможностью создания искусственного 3D-эффекта. Сайт немецкой студии веб-дизайна Webseitenfactory является примером того, как можно использовать параллакс для добавления различных эффектов на страницу сайта, например движение иконок по разным траекториям, их увеличение и уменьшение по мере скроллинга сайта.
Параллакс-скроллинг также может помочь оживить сайт, на котором не особо много контента. Что если весь ваш сайт состоит из mission statement, или раздела about us, плюс контактная информация? Скорее всего, вы бы могли сделать это одной страницей и при определенных условиях у вас бы получился неплохой одностраничный сайт, но запомнится ли он посетителям? Скорее всего, нет. Но что если добавить к нему немного параллакса, как это сделал народ на Spring / Summer ?
Моим первым впечатлением было “О, этот сайт выглядит симпатично”. Но когда я начал его скролить, впечатление сразу же стало “Вау, этот сайт крут!”. Добавление простого параллакс-эффекта как раз делает разницу между неплохим и запоминающимся.
Параллакс-скроллинг - это хороший трюк, который можно держать в рукаве. И его всегда можно применить независимо от того, делаете ли вы сложный мультистраничный сайт, или же простой одностраничный сайт-визитку.
