Перейти к содержимому
  • Блок 3.10 - Работа с эффектами прокрутки

    Как создавать крутейшие эффекты прокрутки используя только Adobe Muse? Подробное руководство с примерами находится в этом блоке.

    3 занятий в этой категории

    1. Что такое эффекты прокрутки

      56 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_02/3.11.1_CHto_takoe_effektyi_prokrutki.mp4.984f41685489901252e2cd12dd28c764.mp4 7 До 10 минут Скрыть https://creatura.club/uploads/ Высокая сложность Скрыть

      В этом видеоуроке мы познакомимся с эффектами прокрутки в программе Adobe Muse. Заходим в программу и создаем один графический блок. Сделаем ему заливку картинкой логотипа digitalmakers.ru Эффекты прокрутки относятся к анимационным эффектам программы, когда 2 или более слоев содержимого перемещаются в браузере с разной скоростью. Этот прием позволяет задавать для каждого элемента собственную скорость и направление перемещения, позволяя создавать эффект параллакса. Эффекты прокрутки находятся в правой панели программы на закладке "Эффекты прокрутки".

      Эти эффекты можно применять к любым прямоугольникам, созданным в программе, а также к текстовым фреймам. Кроме того в программе можно задавать эффекты прокрутки для фона. Для конкретных графических элементов, блоков, прямоугольников и текстовых фреймов задается через меню "Эффект прокрутки" в правой панели. Здесь мы можем поставить галочку "Перемещение" и осуществить настройки для данного эффекта. Также в программе можно задавать эффекты прокрутки для фона изображения. Для нашего созданного прямоугольника нужно зайти в меню настроек данного прямоугольника, в "Заливку", и здесь есть закладка "Прокрутка".

      При выделенном прямоугольника доступно окно, которое полностью повторяет эффекты настроек для прямоугольников и текстовых блоков. При этом эффект прокрутки для фона можно применить к любому элементу, использующему в качестве фона заполняющее изображение. Мы здесь создали прямоугольник и сделали ему в качестве фона заполняющее изображение логотипа. Вообще к элементам, которые могут иметь фоновое изображение относятся прямоугольники, фреймы изображений и текстовые фреймы. Но данный эффект отвечает именно за эффект прокрутки внутри фремов, тогда как эффекты прокрутки в правой панели программы отвечают за перемещение блока в целом по странице.

      Эффекты прокрутки можно применять в меню "Заливка" в браузере. Если мы сейчас снимем выделение с данного элемента и нажмем на пустом поле, то у нас появится в меню "Заливка" в браузере. И если мы зададим изображение для заливки в браузере, то при использовании заполняющего изображения нам также будут доступны эффекты прокрутки для него. Здесь мы можем осуществить все те же самые настройки, что и для других элементов. Для перемещения самого изображения заливки браузера при прокрутки страницы. При этом очень важно, что эффекты прокрутки можно применять к заполняющим фоновым изображениям, для которых заданы значения либо "Мозаика", либо "По размеру", либо "Исходный размер", либо "Заполнение", то есть первые 4 значения.

      Также эффекты прокрутки, примененные к элементам заполнения фона, не удастся применить к объектам, к которым применены определенные графические эффекты. Например, если сейчас выделим графический блок и зайдем в "Эффекты", то при применении эффектов "Скос" и "Свечение" на панели "Заливка" будут недоступны параметры прокрутки. Также перед применением эффектов прокрутки для блока в целом необходимо убедиться, что данный эффект выделен и стоит состояние "Стандартное". Далее при работе с эффектами прокрутки необходимо знать значение 3 понятий: "Исходная позиция", "Начальное перемещение", "Конечное перемещение". Все эти параметры настраиваются для любого эффекта прокрутки.

      Давайте включим перемещение для данного блока, переместим его немного вниз, и вы видите, что у нас появился "Т-образный маркер". Значение положения этого маркера находится в эффектах прокрутки. Сейчас маркер находится на расстоянии 63 пикселя от верхнего окна браузера. Это значит, что расстояние от самой верхней линии до линии начала маркера составляет 63 пикселя. Этот маркер означает исходную позицию. Следующий параметр - "Начальное перемещение" и "Конечное перемещение". В каждом из этих параметров есть настройки направления перемещения: если значок темный, то это направление включено, а если светлый значок , то значение выключено. Сейчас включено перемещение вверх и вправо.

      Перемещение вверх установлено 0, а вправо - 1. Эти цифры означают скорость перемещения по вертикали и по горизонтали соответственно. Значение начального перемещения работает до того времени, пока верхняя граница окна браузера коснется данного "Т-образного маркера", а значение скорости представляет собой множители скорости перемещения. 1 означает то, что наш объект будет двигаться точно с такой же скоростью, как прокручивается страница в браузере. Если это значение будет больше 1, то наш объект будет перемещаться во столько раз быстрее, чем прокручивается страница в браузере. Если установлено значение 0, то объект не будет перемещаться.

      Значение параметров "Конечного перемещения" работают после того, как верхняя граница браузера дошла до "Т-образного маркера" нашего элемента. То есть после того, как верхняя граница окна браузера коснулась данного элемента, начинают работать параметры "Конечного перемещения". Наш объект может перемещаться вверх со скоростью 1 или 1.5 или если мы установим 0.5, то он будет перемещаться в 2 раза медленнее относительно прокрутки страницы в браузере. И еще раз о параметрах перемещения: "Начальное перемещение" отвечает за перемещение объекта до того момента, как верхняя граница окна браузера коснется "Т-образного маркера" для данного объекта.

      "Т-образный маркер" отвечает за расстояние от верхней границы окна браузера до расположения данного маркера. "Конечное перемещение" отвечает за перемещение объекта после того момента, как верхняя граница окна браузера коснулась данного "Т-образного маркера" при прокрутке страниц. На этом урок закончен. В нем мы познакомились с основными эффектами прокрутки и их параметрами в программе Adoobe Muse. Вам необходимо будет выполнить задание, ответить на вопросы и переходить к дальнейшему обучению.

      • 4 комментария
      • 554 просмотра
    2. Создание эффектов прокрутки фона

      57 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_02/56b6358432e81_3.11.2_Sozdanie_effekta_prokrutki_fona_ego_nastroyki.mp4.b31fae400ac9043dd70f4c4bd20034dc.mp4 6 До 10 минут https://creatura.club/uploads/ Высокая сложность Скрыть

      В этом уроке мы познакомимся с основными эффектами прокрутки и их настройками в программе Adobe Muse. Для этого заходим в программу и рассмотрим настройки эффекта прокрутки на одном примере. У нас уже создан проект "Лупа", здесь создана одна страница. На странице присутствует один графический элемент, для которого создана заливка с помощью картинки и установлен эффект прокрутки для фона изображения. Когда мы прокручиваем страницу в браузере, задний фон перемещается, а объект просто ползет вверх. То есть при прокрутке фон, заданный для объекта, прокручивается в 2 раза медленнее, чем мы прокручиваем страницу.

      Мы получаем эффект некой лупы. Давайте сейчас создадим точно такую же анимацию, но с нуля для того, чтобы познакомиться с тем, как настраивать эффекты прокрутки для фона изображения. Заходим в новый проект, в режим "Дизайн". Здесь сразу настроена в настройках страницы минимальная высота в 5000 пикселей. Это нужно для того, чтобы мы могли просмотреть эффекты прокрутки и страницу могли прокрутить как можно дальше вниз. Первое, что мы сделаем, это создадим обычный прямоугольник. Зажимаем клавишу Shift и создаем прямоугольник в виде квадрата. Далее идем в "Заливка" - "Добавить изображение" и выбираем текстуру для будущей лупы.

      Нажимаем "Открыть", устанавливаем положение "По центру", оставляем исходный размер, делаем скругление данному прямоугольнику, выставляя значение 500, чтобы получился круг. Также сделаем обводку белым цветом шириной в 4 пикселя. Снимаем выделение с данного объекта, берем инструмент "Выделение", кликаем на пустом поле для того, чтобы сделать заливку в браузере. Заливку просто выставляем черным цветом. В итоге мы получаем рисунок лупы. Переместим изображение немного вправо и вниз, чтобы у нас была возможность для анимации. Далее идем в "Заливка" и выставляем для данного объекта при его выделении эффект "Прокрутка". Ставим флажок "Перемещение".  

      При прокрутке страницы "Начальное перемещение", то есть значение до того момента, когда верхняя граница браузера коснется Т-образного маркера, наш объект будет двигаться в 2 раза медленнее, чем прокрутка страницы и двигался вверх. Ставим значение 0.5 и после того, как граница коснется маркера, мы хотим, чтобы он также двигался дальше. Выбираем значение "Вверх" и выставляем 0.5. Значение скорости по горизонтали выставляем 0 пикселей, так как мы хотим, чтобы объект двигался только вверх, но со значением скорости меньшим в 2 раза по отношению к тому, как будем прокручивать страницу. Исходную позицию переместим в самый верх, к верхней границе окна браузера.

      Таким образом мы исключили значение "Начальное перемещение", так как наша страница сразу будет открываться, а верхняя граница будет совпадать с Т-образным маркером. Итак, мы установили для перемещения фона эффект "Прокрутки", установили исходную позицию (Т-маркер) в значение 0 пикселей, а "Конечное" и "Начальное перемещение" установили со значением вверх и в 2 раза меньше, чем скорость прокрутки страницы. Таким образом мы получаем объект, двигающийся со скоростью прокрутки страницы в браузере, а фон перемещается в 2 раза медленнее внутри объекта. Давайте посмотрим, что у нас получилось, перейдя в режим "Просмотр". Мы видим, что все получилось так, как мы хотели.

      Получили эффект некоего параллакса и просмотра в лупу, будто между данным окошком и задним фоном есть некоторое расстояние, и мы видим объем при перемещении. Давайте снова перейдем в режим "Дизайн", выделим данный объект и попробуем изменить параметры настройки прокрутки у заднего фона нашего прямоугольника. Изменим значение "Начальное перемещение" - вниз и "Конечное перемещение" тоже вниз. Таким образом мы сделали так, что при прокрутке страницы наш объект сам будет двигаться вверх, как он и двигался ранее, а заполняющий его фон будет двигаться вниз со скоростью в 2 раза меньше, чем скорость прокрутки страницы в браузере. На этом урок закончен. В нем мы рассмотрели основные параметры и их настройки эффекта прокрутки для фона в программе Adobe Muse. Вам необходимо будет выполнить задание, ответить на вопросы и переходить к следующему уроку.

      • 5 комментариев
      • 622 просмотра
    3. Примеры эффектов прокрутки

      58 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_02/3.11.3_primeryi_realizovannyih_effektov_prokrutki.mp4.5de0cf69b9e7da2627fba380d5d1bb3a.mp4 8 До 10 минут Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

      В этом видеоуроке мы рассмотрим примеры реализованных эффектов прокрутки в программе AdobeMuse. Заходим в программу, у нас уже открыт один из проектов. Первый пример - открывающиеся шторы. При просмотре страницы в браузере мы видим черный экран, но при прокрутке сначала выезжает надпись, потом появляется задний фон, появляются шторы, а при дальнейшей прокрутке все стоит на месте. Давайте посмотрим, как реализован эффект.

      Заходим в режим "Дизайн" данной страницы и посмотрим на конкретные элементы. Давайте возьмем текст. К нему применен эффект прокрутки "Перемещение". Оно стоит вниз и вправо. Вправо 0, а вниз со скоростью 0.5 скорости прокрутки в браузере. "Исходная позиция" стоит 460 пикселей, то есть по достижению верхней границы окна браузера данного значения, у нас работает "Конечное перемещение". "Конечное перемещение" стоит 0, то есть до этого Т-образного маркера, который установлен на 460 пикселей, текст будет двигаться со скоростью 0.5.скорости прокрутки в браузере вниз. Далее он остановится и будет находиться на одном и том же месте в браузере.

      Давайте посмотрим, где находится точка "Начальное перемещение". Перемотаем немного вверх, и мы видим, что точка находится у верхней границы. Далее посмотрим второй текст - все то же самое, только "Начальное перемещение" установлено немного позже, чем у первой строки текста, а скорость прокрутки установлена вверх и скорость в 1.5 раза быстрее, чем скорость прокрутки в браузере. И "Конечное перемещение" опять выставлено на 0. Для графических элементов все то же самое: установлено перемещение для одной шторки влево со скоростью 2 (в 2 раза быстрее), "Конечное перемещение" 0. Значение "Исходной позиции" тоже 460 пикселей.

      Для второй шторки установлена та же самая скорость по горизонтали - 2, а "Начальное перемещение" установлено вправо, "Исходная позиция" 460 пикселей, "Конечное перемещение" выставлено на 0. По достижению верхней границы окна браузера значения 460 пикселей шторка остановится и не будет двигаться. Для заднего фона также установлен эффект прокрутки. "Начальное перемещение" верх со скоростью прокрутки в браузере с одинаковой скоростью и "Исходная позиция" 460 пикселей, "Конечное перемещение" 0. Вот так только с помощью эффект прокрутки реализована данная страница. Рассмотрим еще пару страниц.

      На второй странице мы видим несколько картинок, и к каждой применен эффект прокрутки. Давайте посмотрим, как это выглядит. Мы прокручиваем страницу в браузере и видим, что текст двигается очень быстро, осколки двигаются несколько медленнее, и задний фон тоже двигается с какой-то скоростью. При том мы прокручиваем страницу вниз, а объекты двигаются влево и с разной скоростью. Вот такой интересный эффект можно получить с помощью эффекта прокрутки. Мы крутим страницу вниз, а наши объекты двигаются влево. Посмотрим пример в режиме "Дизайн". 

      У нас есть задний фон. Для него сделан эффект прокрутки, которая стоит со скоростью 0.2 относительно скорости прокрутки в браузере. "Исходная позиция" 0 пикселей, но скорость стоит влево 0.2 Для текста все тоже самое, только скорость 6. Для осколков скорость 3. Если мы перелистаем немного вниз, то следующая картинка движется со скоростью 1 относительно скорости прокрутки в браузере и тоже двигается влево. Для текста на картинке и названия тоже разные скорости прокрутки. Также есть задний фон, который перемещается все с той же скоростью, но все же у всех блоков, которые расставляют второй экран, значение "Исходной позиции" уже 2000 пикселей или нечто близкое к этому значению. Для третьей картинки также установлены эффекты прокрутки с разной скоростью, при этом "Исходная позиция" составляет около 4000 пикселей.

       И последний пример эффекта будет рассмотрен на картинке с изображениями машин и вида города. Но к каждой картинке применен эффект прокрутки. Здесь применен эффект через "Заливку". Например, для машины черного цвета установлен эффект влево о скоростью перемещения страницы в браузере. При том одновременно установлено значение вверх и влево. Данные картинки машин представляют собой картинки в формате .png, что позволяет их сделать без заднего фона, таким образом она не перекрывает задний фон. То же самое и для второй картинки машины. Данное изображение тоже является заливкой заднего фона и тоже в таком формате, к ней применен эффект прокрутки фона с той же самой скоростью вверх 1, "Начальное и конечное перемещение" 1 вправо.

      Что касается заднего фона, то здесь тоже установлена заливка, только в формате .jpeg , поскольку это картинка заднего фона, и применен эффект прокрутки. "Начальное перемещение" со скоростью 0.5 влево. Все картинки выравнены в перспективе по ширине браузера. Давайте посмотрим данную анимацию в режиме "Просмотр". При прокрутке страницы в браузере наши машины движутся каждая в свою сторону, а задний фон прокручивается влево. Вот такая интересная анимация, которую можно сделать с помощью эффекта прокрутки фона в программе Adobe Muse. На этом урок закончен, в нем мы рассмотрели, как можно применить эффекты прокрутки  для элементов страниц ваших сайтов. Вам необходимо будет выполнить задание, ответить на вопросы и переходить к следующему уроку. 

      • 0 комментариев
      • 551 просмотр
×