Горизонтальная прокрутка (скроллинг) страницы в Adobe Muse
В этом видеоуроке мы рассмотрим как осуществляется горизонтальный скроллинг, горизонтальная прокрутка сайта в программе Adobe Muse. Возможно это не такая популярная тема, но очень интересная и позволяет создать очень необычный эффект, необычные сайты, которые будут прокручиваться мышкой, скажем так, не поперек, а вдоль. Смотрите этот видеоурок:
Горизонтальная прокрутка. Подготовка проекта и блоков.
Давайте откроем программу Adobe Muse. Заходим в меню File -> Новый сайт. Создаем небольшой сайт такой. Делаем масштаб 75%.
Я создаю пару блоков. Нужно создавать их с параметрами перспективы, например, 1920х1920. Квадратные должны быть блоки. Не важно, что они будут выступать. Мы размещаем этот блок ровненько посередине страницы — вот так, делаем ему заливку, например, таким цветом. Теперь я делаю еще такой блок, нажимаю клавиши Ctrl+C, Ctrl+V, чтобы скопировать, делаю еще один блок и делаю ему заливку, например, оранжевый. И давайте еще сделаем третий блок. Ctrl+C, Ctrl+V. Опускаем его вниз, ставим по центру и делаем ему заливку, например, какую-нибудь синюю. Вот такие три блока как бы у нас будут на нашем сайте.
Нам нужно сделать так, чтобы они прокручивались поперек, то есть сейчас это будет выглядеть примерно вот так: мы прокручиваем просто три этих цвета, и они у нас прокручиваются вдоль, вертикальный скроллинг у нас. А нам нужно сделать так, чтобы этот скроллинг был по горизонтали. Мы сейчас попытаемся это сделать.
Для того, чтобы сделать горизонтальный скроллинг, мы должны выделить первый элемент. Или давайте я еще создам несколько блоков с текстами на этой странице, напишу здесь, например, цифры. Напишу цифру 1 на первом экране. Цифру 2 – это у нас будет второй экран. И это у нас будет третий экран – цифра 3. Вот так.
Горизонтальная прокрутка. Настройка прокрутки.
Итак, мы выделяем первый блок и текст – вместе. Заходим в настройки эффекта прокрутки. Ставим здесь перемещение, ставим перемещение влево, ставим здесь единички. Здесь 1, здесь 1, а тут 0. Конечное перемещение: 0 ставим. При прокрутке страницы в браузере объект будет перемещаться влево. Так, теперь что мы делаем? Мы уменьшаем масштаб. Я перенесу пока сюда. И то, что нам нужно сделать – это вот этот вот ползунок переместить до начала. Вот так. Я возвращаю это на место все, просто там не совсем было видно. Вот здесь я делаю то же самое с этими блоками. Ставлю им функцию перемещения. Перемещение ставлю влево. У этого блока подровняю. И у этого блока подровняю по краю самому. Делаю то же самое с этими блоками. Ставлю здесь перемещение. Ставлю влево. Ставлю здесь 1, а здесь убираю 0. Все. И подравниваю все элементы под начало этого блока.
Горизонтальная прокрутка. Просмотр.
Ну что же? В принципе, горизонтальный скроллинг наш и готов. Теперь мы переходим в меню File -> Предварительный просмотр страницы в браузере Ctrl+Shift+E, и давайте посмотрим, что же у нас получилось. Загружается наша страничка. И давайте попробуем полистать. Как вы видите, я листаю, и мои страницы пролистываются горизонтально.
Вот так делается горизонтальный скроллинг в программе Adobe Muse: с помощью функции “Эффект прокрутки”. Вроде бы наши блоки расположены вертикально, но при прокрутке в браузере они все смещаются влево и идут друг за другом в той последовательности, в которой они расположены в проекте вертикально.
На этом все, дорогие друзья. В этом видеоуроке мы рассмотрели, как делается горизонтальный скроллинг, горизонтальная прокрутка сайта в программе Adobe Muse. Подписывайтесь на мой канал ставьте лайки, пишите комментарии внизу под этим видео. Я всегда очень рад вашим вопросам, идеям и предложениям. До встречи в следующих уроках.
Автор видеоурока
Дмитрий Шаповалов