Перейти к содержимому
  • Пример применения эффектов прозрачности

       (14 отзывов)

    Евгений Зубов
    • 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 минут display: none; https://creatura.club/uploads/ Высокая сложность display: none;
      1. Пройдите тестирование для урока
      2. Оцените урок и сдайте задание

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

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

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

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

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

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

    В этом уроке Вы создадите свой первый, по настоящему красивый эффект используя возможности прозрачности при прокрутке. Смотрите внимательно  и повторяйте за преподавателем.


      Жалоба


    Отзывы пользователей


    Слава Баранов

    Злрово. К практике

    Поделиться отзывом


    Ссылка на отзыв
    Юлия+Коваль

    +1

    Поделиться отзывом


    Ссылка на отзыв
    Гость Падалко Сергей

    Пройдено

    Поделиться отзывом


    Ссылка на отзыв
    Дмитрий Жуков

    Интересно!

    Поделиться отзывом


    Ссылка на отзыв
    Андрей А

    Очень, интересно!

    Поделиться отзывом


    Ссылка на отзыв
    Валерий1234

    Спасибо

    Поделиться отзывом


    Ссылка на отзыв
    gladir1

    Посмотрела урок. Повторила. Все получилось.

    Поделиться отзывом


    Ссылка на отзыв
    Aspirantmiha

    Очень хорошо все объяснили. Спасибо! Пойду тренироваться

    Поделиться отзывом


    Ссылка на отзыв
    YanaZamkova

    классно! спасибо!

    Поделиться отзывом


    Ссылка на отзыв
    Sharovich

    Всё понятно. Очень эффектно и красиво. Спасибо.

    Поделиться отзывом


    Ссылка на отзыв
    7dgoni6

    Понятно.

    Поделиться отзывом


    Ссылка на отзыв

×