Перейти к содержимому
  • Блок 3.11 - Создание эффектов с прозрачностью

    Узнаете как совмещать эффекты прокрутки с эффектами прозрачности и делать на этой основе эффекты для сайта. Тонкости, примеры и разбор ошибок.

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

    1. Что такое эффекты прозрачности

      59 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_02/3.12.1_Effekt_prokrutki_-_prozrachnost_(nastroyka_i_parametryi).mp4.f28350faba2bbc83c4c4ce4ba0a578a5.mp4 5 До 5 минут Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

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

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

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

      Давайте зайдем в режим "Просмотр" и посмотрим, что получилось. И вы видите, что изначально нашего элемента не видно. Но когда мы начинаем прокручивать страницу в браузере, то картинка плавно появляется. И при достижении расстояния до "Т-маркета", значение непрозрачности для нашего элемента равно 100%. Далее, когда мы начинаем прокручивать страницу вниз, и при достижении верхней границы браузера верхней границе нашего элемента значение непрозрачности снова должно стать равным 0%.Это значит, что наш графический элемент снова должен исчезнуть. Вот таким образом действует эффект непрозрачности для элементов сайта. Перейдем снова в режим "Дизайн" домашней страницы. Например, вы хотите, чтобы ваш элемент не исчезал после того, как он появился.

      Мы выставляем значение конечного положения 100%. Таким образом после прокрутки страницы до "Т-маркера" у нас будет изменяться значение непрозрачности от 0 до 100%, то есть станет видно саму картинку, а далее после того, как верхняя граница браузера прошла "Т-маркер", наша непрозрачность будет изменяться от 100 до 100% процентов, то есть изменяться не будет. Давайте снова зайдем в режим "Просмотр" и убедимся в том, что мы все настроили правильно.

      И теперь вы видите, что постепенно появляется картинка, а потом она такой же и остается, то есть не исчезает. На этом мы заканчиваем данный урок. В нем мы познакомились с эффектом прокрутки - непрозрачность, рассмотрели основные параметры и научились настраивать данный эффект для одного из элементов создаваемого сайта в программе Adobe Muse. Вам необходимо будет выполнить задание, ответить на вопросы и переходить к дальнейшим урокам.

      • 2 комментария
      • 454 просмотра
    2. Пример применения эффектов прозрачности

      60 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_02/3.12.2_Primer_primeneniya_effekta_prozrachnosti.mp4.3b07beb878f8a48b3b63b1fd8fa891de.mp4 6 До 10 минут Скрыть https://creatura.club/uploads/ Высокая сложность Скрыть

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

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

      "Позиция перехода" эффекта 2, маркер в виде кружка внизу,  мы перемещаем в самый низ данного блока. Первый маркер, выше, чем предыдущий, не так важен. Снова ставим блок на свое место на самый верх страницы, таким образом у нас уже готов первый экран. Еще немного уменьшим масштаб до 50 %. Еще раз сдублируем данный блок, для этого нажимаем "Редактировать/Копировать" и потом "Редактировать/Вставить". Перемещаем данный блок, который скопировался, вниз. И теперь "Позиция перехода 1" перемещаем в самый верх, то есть в начало первого блока. 

      Второй блок зальем другим цветом, например, синим. Теперь дублируем второй блок аналогичным образом и перемещаем его ниже под данный синий блок. Делаем заливку, например, зеленым цветом и на этом остановимся. Если мы еще уменьшим масштаб и прокрутим колесом мыши, то масштаб уменьшился до 10%. Мы видим 3 блока. "Т-образный маркер" стоит вверху каждого блока и "Позиция перехода" (круги) установлены в верх предыдущего блока и в низ следующего блока. Теперь в режиме "Просмотр" начнем прокручивать страницу и увидим, что цвета плавно изменяются на следующий за ними. Таким образом, используя эффект прозрачности, мы добились эффекта смены фона и плавного перехода из цвета в цвет. 

      То же самое вы сможете сделать с добавлением текста. Увеличим масштаб до 75%. Вы можете разместить здесь какой-то текст, например, написать "Привет, мир!". Увеличим текст до 48, сделаем другой шрифт. Выделим текст, поставим по центру, назначим белый цвет. Для данного текста можно тоже выставить "эффект прокрутки", просто выделив текстовый фрейм и выставив для него непрозрачность и перемещение, у которого будут все значения равны 0. "Начальное значение" для непрозрачности 100%, а конечное значение 0%, то есть изначально будет виден текст, а далее он начнет исчезать.

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

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