Jump to content
  • Sign in to follow this  

    Примеры эффектов прокрутки

       (16 reviews)

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

      В этом видеоуроке мы рассмотрим примеры реализованных эффектов прокрутки в программе 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. На этом урок закончен, в нем мы рассмотрели, как можно применить эффекты прокрутки  для элементов страниц ваших сайтов. Вам необходимо будет выполнить задание, ответить на вопросы и переходить к следующему уроку. 

    Увидите шикарный пример применения эффектов прокрутки. Задача - сделать сцену которая будет показывать "своё шоу". Узнаете как применять знания о эффектах прокрутки при творческом процессе.


      Report Занятие
    Sign in to follow this  


    User Feedback

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest

    Genka

    Полезность.

    Share this review


    Link to review
    Guest Падалко Сергей

    Красиво

    Share this review


    Link to review
    Андрей А

    Интересно!

    Share this review


    Link to review
    ievseev09

    Здорово

    Share this review


    Link to review
    Aspirantmiha

    Очень понравился урок. Вроде эффекты делаются просто, а смотрится это Мега-круто!

    Share this review


    Link to review
    YanaZamkova

    очень-очень круто! и понятно) спасибо

    Share this review


    Link to review
    Sharovich

    Всё понятно. Красиво. Эффектно. Спасибо.

    Share this review


    Link to review
    7dgoni6

    Спасибо.

    Share this review


    Link to review

×
×
  • Create New...