Перейти к содержимому
  • Примеры эффектов прокрутки

       (16 отзывов)

    Евгений Зубов
    • 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; https://creatura.club/uploads/ Средняя сложность 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. На этом урок закончен, в нем мы рассмотрели, как можно применить эффекты прокрутки  для элементов страниц ваших сайтов. Вам необходимо будет выполнить задание, ответить на вопросы и переходить к следующему уроку. 

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


      Жалоба


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


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

    Мдя....но, здорово

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


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

    Полезность.

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


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

    Отличная тема!

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


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

    Красиво

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


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

    Просмотрено.

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


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

    Интересно!

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


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

    Спасибо

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


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

    Здорово

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


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

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

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


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

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

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


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

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

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


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

    Спасибо.

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


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

×