Клубы Creatura. Эффекты прокрутки в Adobe Muse
P arallax эффект стал популярным после того, как Nike запустил свой сайт «Nike Better World «. Сайт получил множество положительных отзывов от разных ресурсов за свой замечательный эффект параллакс-прокрутки и веб-дизайн.
Параллакс-эффект существовал с 1980-х годов и использовался в видеоиграх, а потом на сайтах.
Примеры сайтов с параллакс-эффектом: что такое параллакс-прокрутка?Вы уже видели примеры его использования. Перед тем как углубиться в примеры сайтов, использующих параллакс-эффект, уделим немного времени объяснению того, что же он собой представляет.
Параллакс – это видимое смещение или разница в видимом положении объекта, если он просматривается с двух разных точек, не лежащих на одной прямой с объектом. В веб-дизайне под параллаксом понимается техника прокручивания, используемая для создания иллюзии глубины сайта.
Это не новая техника. Но прошло немало времени между её появлением и недавним рывком в трендовые стили. Чтобы показать, как выглядит параллакс-эффект при прокрутке, я собрал сайты, которые используют этот приём.
Посмотрите на примеры:
Существует четыре метода, которые могут быть использованы для создания сайта с parallax эффектом j Q uery .
- Послойный метод – использование нескольких фоновых изображений, которые могут независимо перемещаться горизонтально или вертикально, и расположены одно над другим.
- Метод спрайтов – использование одного большого изображения, составленного из нескольких, и отображение только части большого изображения в различных позициях. Часто используется в меню навигации.
- Метод повторяющегося шаблона – контент для прокрутки строится из отдельных плиток, которые могут перемещаться над повторяющимся слоем фона.
- Растровый метод – линии пикселей изображения скомбинированы и обновляются сверху вниз с небольшой задержкой между прорисовкой линий.
Посмотрите пример
Что вам понадобится для реализации этого примера параллакс-прокрутки:
- Wellfleet (шрифт Google);
- Arvo (шрифт Google );
- Oswald (шрифт Google );
- Goudy Bookletter 1911 (шрифт Google) ;
- Изображения, использованные в этом примере ;
- Рождественские изображения в высоком разрешении. Вы можете загрузить бесплатные изображения отсюда или использовать изображения из архива, ссылка на который приведена выше.
Для файловой структуры parallax эффект примера мы создадим три папки и один HTML-файл :
- html – будет главным файлом. Весь дизайн будет расположен в этом файле;
- Папка js – для скриптов JavaScript/jQuery ;
- Папка img – для изображений;
- папка css – для CSS-стилей .
В файл index.html сначала добавим объявление типа документа HTML5 , а также группу ссылок в заголовок . Туда будет включена ссылка на файл CSS , шрифты Google , а также файл библиотеки jQuery .
Creating a Simple Parallax Scrolling Website
Пропустим код parallax эффекта jQuery и обсудим его позже. А пока продолжим работу с HTML-элементами . Мы добавим тэг header с логотипом и навигацией внутри. Навигация будет вести на определённые слайды. Позже мы добавим эффект плавной прокрутки, чтобы это смотрелось красиво.
PARALLAX
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
Теперь добавим слайды для parallax эффекта в блоке . Мы пометим каждый из них атрибутом ID , который будет соответствовать его порядковому номеру. Внутрь слайда мы поместим блок с классом content, чтобы выровнять элементы по центру.
MERRY CHRISTMAS HAPPY NEW YEAR “Then the Grinch thought of something he hadn"t before! What if Christmas, he thought, doesn"t come from a store. What if Christmas...perhaps...means a little bit more!” Dr. Seuss “I truly believe that if we keep telling the Christmas story, singing the Christmas songs, and living the Christmas spirit, we can bring joy and happiness and peace to this world.” Norman Vincent Peale “Christmas doesn"t come from a store, maybe Christmas perhaps means a little bit more....” Dr. Seuss “My idea of Christmas, whether old-fashioned or modern, is very simple: loving others. Come to think of it, why do we have to wait for Christmas to do that?” Bob Hope Copyright 1stwebdesigner.com
Теперь, когда мы поместили все HTML-элементы на страницу, сайт выглядит вот так.
Начнём с добавления стилей parallax эффекта для тега body , а также заголовков H1 , H2 и H3 . Мы установим шрифт “Arvo ” для заголовков H1-H2 .
body{ margin: 0; padding: 0; width: 100%; } h1 { font-family: "Arvo"; font-weight: normal; font-size: 55px; text-align: center; color: #fff; margin: 0; padding: 0; } h2 { font-family: "Arvo"; font-weight: normal; font-size: 40px; text-align: center; color: #fff; margin: 0; padding: 0; } h3 { font-family: Oswald; font-weight: normal; font-size: 16px; text-align: center; margin: 5px 0; padding: 0; z-index: 1; position: relative; }
Затем добавим основные стили для позиционирования элементов на экране и контента в слайдах.
Center { margin: 0 auto; } .content{ margin: 0 auto; width: 960px; } .clear { clear: both; }
Теперь стилизуем секцию заголовка parallax эффект примера . Добавим изображение с чёрным фоном и прозрачностью в 60% в заголовок, который будет содержать логотип и навигацию. Логотип разместим слева, а навигацию – справа.
#header { width: 100%; background: url("../img/header-bg.png"); height: 80px; position: fixed; margin-top: 30px; } #nav { width: 410px; float: right; margin-top: 20px; } #logo a { color: #fff; text-decoration: none; float: left; font-size: 30px; margin-top: 20px; color: #fff; font-family: "Wellfleet"; font-weight: bold; } #nav ul{ list-style: none; display: block; margin: 0 auto; list-style: none; } #nav li{ margin-top: 9px; float: left; padding-left: 21px; } #nav li a { color: #fff; opacity:0.6; font-size: 16px; text-decoration: none; font-family: "Wellfleet"; } #nav li a.active { color: #fff; opacity:1; border-bottom: 2px solid #fff; } #nav li a:hover { color: #fff; opacity:1; }
Quotes {
font-family: "Goudy Bookletter 1911", serif;
font-weight: normal;
font-size: 30px;
text-align: left;
margin: 50px auto;
}
.author_name_white {
font-family: "Wellfleet";
margin: 70px 0 0 75px;
color: #fff;
font-size: 20px;
}
.author_name_gray {
font-family: "Wellfleet";
margin: 70px 0 0 75px;
color: #94a4a4;
font-size: 20px;
}
.quotes_container {
width: 800px;
margin: 0 auto;
}
#christmas_tree {
background: url("../img/christmas-tree.png") no-repeat;
width: 48px;
height: 77px;
margin: 0 auto;
position: relative;
bottom: -35px;
}
#divider {
background: url("../img/divider.png") no-repeat;
width: 300px;
height: 35px;
margin: 0px auto 27px auto;
}
#ribbon {
background: url("../img/ribbon.png") no-repeat;
width: 251px;
height: 48px;
margin: 0 auto;
display: block;
position: relative;
top: -38px;
}
#snowflakes1 {
background: url("../img/snowflakes.png") no-repeat;
width: 24px;
height: 21px;
margin: 0 auto;
display: block;
position: relative;
bottom: -54px;
left: -102px;
}
#snowflakes2 {
background: url("../img/snowflakes.png") no-repeat;
width: 24px;
height: 21px;
margin: 0 auto;
display: block;
position: relative;
bottom: -33px;
right: -100px;
}
Каждый слайд в parallax эффекте jQuery будет иметь фоновое изображение или белый фоновый цвет с фиксированной позицией. Также нужно добавить небольшие отступы к каждому слайду, чтобы выровнять элементы по центру.
#slide1, #slide2 { width: 100%; } #slide1 { background:url("../img/slide1.jpg") 50% 0 no-repeat fixed; color: #fff; height: 600px; margin: 0; padding: 200px 0 260px 0; background-size: cover; } #slide2 { background-color: #fff; color: #333333; height: 300px; margin: 0 auto; overflow: hidden; padding: 200px 0; } #slide3 { background: url(../img/slide3.jpg) 50% 0 no-repeat fixed; color: #fff; height: 600px; padding: 170px 0 0 0; background-size: cover; } #slide4 { background-color: #fff; color: #333333; height: 300px; padding: 200px 0; } #slide5 { background: url(../img/slide5.jpg) 50% 0 no-repeat fixed; height: 200px; margin: 0 auto; padding: 250px 0; color: #fff; background-size: cover; }
#copyright { color: #fff; font-family: "Wellfleet"; font-size: 14px; margin-top: 100px; text-align: center; } #copyright a { text-decoration: none; color: #fff; }
Код jQueryВдохнём жизнь в наш сайт с parallax эффектом . В раздел head добавим следующий код jQuery .
$(document).ready(function() { $("a").each(function() { if (location.pathname.replace(/^//,"") == this.pathname.replace(/^//,"") && location.hostname == this.hostname && this.hash.replace(/#/,"")) { var $targetId = $(this.hash), $targetAnchor = $(""); var $target = $targetId.length ? $targetId: $targetAnchor.length ? $targetAnchor: false; if ($target) { var targetOffset = $target.offset().top; $(this).click(function() { $("#nav li a").removeClass("active"); $(this).addClass("active"); $("html, body").animate({scrollTop: targetOffset}, 1000); return false; }); } } }); });
В этой части parallax эффекта jQuery мы создаём обработчик нажатия на любую из ссылок, имеющих символ “# ” где-либо в атрибуте href . В следующей строке мы проверяем, ведёт ли ссылка на ту же страницу, ища совпадения в location.pathname . Так мы уверены, что код будет работать как со ссылками, включающими в себя полный URL , так и с теми, которые состоят только из идентификатора.
$(document).ready(function() { $("a").each(function() { if (location.pathname.replace(/^//,"") == this.pathname.replace(/^//,"") && location.hostname == this.hostname && this.hash.replace(/#/,"")) { var $targetId = $(this.hash), $targetAnchor = $(""); var $target = $targetId.length ? $targetId: $targetAnchor.length ? $targetAnchor: false; if ($target) { var targetOffset = $target.offset().top;
В этой части кода обрабатывается нажатие пользователя на ссылку в меню. При этом класс active удаляется из текущей активной ссылки меню и добавляется к той ссылке, по которой перешел пользователь. Также произойдёт прокрутка страницы к соответствующему блоку.
$(this).click(function() {
$("#nav li a").removeClass("active");
$(this).addClass("active");
$("html, body").animate({scrollTop: targetOffset}, 1000);
return false;
});
}
}
});
});
Совет : Можно делать скорость эффекта прокрутки быстрее или медленнее, меняя значение 1000 (1000 миллисекунд ). Можно попробовать значения “fast ” (200 миллисекунд ) или “slow ” (600 миллисекунд ). Обратите внимание, что значение по умолчанию 400 миллисекунд .
$("html, body").animate({scrollTop: targetOffset}, 1000);
Этот эффект можно сделать самому.
Заключительные слова о параллакс-эффектеВ этом руководстве мы расскажем, как ставить и снимать флажки в input type checkbox с помощью JavaScript. Пользователь сможет одним кликом включить или выключить все элементы…
jQuery эффекты всплывающих подписей присутствуют в Интернете уже давно. Существует много библиотек JQuery, которые могут быть использованы для получения крутых и…
Из этой статьи вы узнаете, как в Adobe Muse применять эффекты прокрутки с перемещением и непрозрачностью к элементам страницы.
Применение эффектов прокрутки к элементам страницыНа панели «Эффекты прокрутки» расположены четыре вкладки, предназначенные для управления перемещением, непрозрачностью, виджетом «Слайд-шоу» и содержимым Adobe Edge Animate на основе того, каким образом выполняется прокрутка страницы. Применение различных сочетаний эффектов прокрутки к закрепленным элементам, к объектам, для которых задана ширина 100%, а также к объектам, наложенным друг на друга с помощью панели «Слои» можно добиться широкого разнообразия привлекательных эффектов.
Применение эффектов прокрутки перемещения с помощью панели «Эффекты прокрутки»Интерфейс панели «Эффекты прокрутки» похож на интерфейс той же панели, но для эффектов «Заливка в браузере» и «Фоновая заливка» . Выполните следующие действия, чтобы применить эффекты прокрутки к элементу страницы с помощью вкладки «Перемещение» на панели «Эффекты прокрутки»:
СОВЕТ. Обратите внимание, что после установки этого флажка на уровне верхнего края элемента появится T-образный маркер. T-образный маркер указывает на исходную позицию эффекта прокрутки, примененного к элементу. Эффект прокрутки начинает работать, когда во время прокрутки страницы посетитель достигает исходной позиции.
T-образный маркер по умолчанию отображается над элементом. Однако его можно щелкнуть и перетащить вверх или вниз, чтобы разместить его вровень с верхним краем нужного элемента, либо перетащить маркер вниз и разместить под элементом.
Также можно ввести числовое значение в поле «Исходная позиция», расположенное по центру панели «Эффекты прокрутки» при выборе вкладки «Перемещение». В этом примере для исходной позиции установлено значение 200 пикселей.
Положение T-образного маркера обозначает исходную позицию элемента. При прокрутке страницы по вертикали применяются настройки, заданные в разделе «Начальное перемещение»: позиция элемента соответствует его положению в представлении «Дизайн».
Как только посетитель начнет прокручивать страницу или щелкнет ссылку привязки для перехода к разделу, расположенному ниже исходной позиции элемента, в силу вступают настройки, заданные в разделе «Конечное перемещение».
В разделе «Начальное перемещение» имеются кнопки со стрелками перемещения по горизонтали и вертикали, а также настройки управления скоростью перемещения.
В примере ниже для исходной позиции задано значение 500 пикселей. При прокрутке страницы в браузере элемент будет перемещаться вниз до своей исходной позиции со скоростью, равной скорости прокрутки страницы. При достижении исходной позиции элемент размещается в исходном положении. Когда при прокрутке страницы исходная позиция будет пройдена, элемент будет двигаться вправо в два раза быстрее скорости прокрутки страницы.
Применение настроек перемещения для эффекта прокрутки
В этом разделе представлены сведения о том, как преобразовать видимость элемента, чтобы изменить способ его отображения на основе действий по прокрутке странице, выполняемых посетителем. Этот способ полезен, когда требуется отобразить или скрыть содержимое, сделав элементы появляющимися или исчезающими по мере прокрутки страницы до следующего раздела. Выполните приведенные ниже действия, чтобы применить эффекты прокрутки, которые будут влиять на прозрачность, к элементам страницы с помощью вкладки «Непрозрачность» панели «Эффекты прокрутки».
После включения этого параметра на элементе появится маркер другого типа. Аналогично тому, как T-образный маркер используется для задания исходной позиции на вкладке «Перемещение», этот маркер можно так же щелкнуть и перетащить для размещения над элементом, расположить его вровень с верхним краем элемента (или вверху любой части элемента), а также разместить его под элементом. Маркер непрозрачности состоит из трех различных частей, которые можно перетаскивать независимо друг от друга для задания исходной позиции, а также позиций исчезания 1 и 2.
Нажмите и перетащите верхнюю левую часть маркера в виде круга, чтобы задать первую позицию исчезания, которая будет влиять на прозрачность элемента.
Нажмите и перетащите верхнюю правую часть маркера в виде круга, чтобы задать вторую позицию исчезания, которая будет влиять на прозрачность элемента.
Примечание.
При необходимости исходную позицию можно указать рядом с маркерами позиций исчезания, присвоив соответствующим параметрам одинаковые значения. Вместо перетаскивания также можно указать числовые значения для каждого из этих параметров в соответствующих полях на панели «Эффекты прокрутки».
В этом примере элемент сначала полностью прозрачный, а затем начинает постепенно появляться, пока не станет полностью прозрачным (для параметра «Непрозрачность», соответствующего исходной позиции, в настоящее время задано значение «100%») при достижении исходной позиции при прокрутке страницы. После того как страницы будет прокручена ниже исходной позиции, элемент снова постепенно становится прозрачным и исчезает из вида, когда будет пройдена отметка в 200 пикселей.
Задайте процент непрозрачности (где 0% - полная прозрачность) на вкладке «Непрозрачность» панели «Эффекты прокрутки».
Другим распространенным примером использования эффекта перемещения при прокрутке может служить применение прокрутки одновременно с показом изображений в режиме слайд-шоу. Можно добавить на страницу виджет «Слайд-шоу», а затем воспользоваться вкладкой «Слайд-шоу» панели «Эффекты прокрутки», чтобы применить такие эффекты, как автоматический показ изображения слайд-шоу каждый раз, когда посетитель прокручивает страницу до определенного места.
Нажмите вкладку «Слайд-шоу» (третью вкладку слева), чтобы перейти к настройкам в этом разделе.
Чаще всего эти настройки используются для закрепления виджета «Слайд-шоу» на странице. Как правило, этот виджет настраивается (с помощью меню «Параметры») на отображение только самого крупного контейнера со скрытием как миниатюр изображений, так и кнопок «Назад» и «Далее».
Для применения данного эффекта очень хорошо подходит слайд-шоу, отображаемое в полноэкранном режиме, хотя в зависимости от дизайна сайта можно использовать любой тип виджета «Слайд-шоу».
Чтобы применить эффекты прокрутки к виджету «Слайд-шоу», выполните приведенные ниже действия.
Закрепите виджет «Слайд-шоу» в нужном месте, чтобы он оставался неподвижным в окне браузера при прокрутке страницы.
Добавив и настроив закрепленное слайд-шоу, можно приступать к добавлению эффектов прокрутки.
Выбрав виджет «Слайд-шоу», на панели «Эффекты прокрутки» на вкладке «Слайд-шоу» установите флажок «Слайд-шоу».
Выберите виджет «Слайд-шоу» и установите флажок «Слайд-шоу» на панели «Эффекты прокрутки».
Обратите внимание, что после установки этого флажка для слайд-шоу в представлении «Дизайн» появится маркер исходной позиции. Чтобы обновить значения параметров исходных позиций прокрутки, можно либо перетащить левую или правую часть маркера, либо ввести числовые значения в поле «Исходное положение прокрутки». Также можно воспользоваться клавишами со стрелками вверх и вниз на панели «Эффекты прокрутки», чтобы увеличить или уменьшить значение.
На вкладке «Слайд-шоу» панели «Эффекты прокрутки» имеются две кнопки, которые позволяют использовать разные способы управления воспроизведением слайд-шоу. Слайд-шоу можно настроить на автоматическое воспроизведение, а также на постепенный переход между изображениями по мере прокрутки страницы.
Первый способ заключается в задании нужной исходной позиции и последующей установке флажка «Автозапуск».
Когда страница будет прокручена ниже исходной позиции (или когда посетитель щелкнет ссылку на тег привязки и перейдет к разделу на странице, расположенному ниже исходной позиции), начнется воспроизведение слайд-шоу. Если включен параметр автоматического воспроизведения, изображения будут циклически повторяться, пока посетитель не прокрутит страницу выше исходной позиции или не покинет страницу.
В примере на рисунке выше воспроизведение слайд-шоу начинается с момента, когда страница прокручена до отметки 100 пикселей (или ниже исходной позиции). При прокрутке страницы вверх выше исходной позиции (до отметки 99 пикселей или меньше) воспроизведение слайд-шоу останавливается.
Второй способ управления виджетом «Слайд-шоу» подразумевает задание исходной позиции и установку переключателя «Переключать слайды каждые». В этом случае также задается число пикселей в поле, расположенным под этим переключателем, чтобы указать периодичность смены изображений в слайд-шоу по мере прокрутки страницы.
Например, виджет «Слайд-шоу» можно закрепить на длинной странице, чтобы он оставался неподвижным в одном месте при прокрутке другого содержимого страницы. Задав числовое значение для параметра «Переключать слайды каждые», слайд-шоу можно настроить таким образом, что следующее изображение будет показываться каждый раз, когда страница будет прокручена вниз на определенное количество символов.
В этом примере для исходной позиции установлено значение 200 пикселей. Как только страница будет прокручена ниже отметки в 200 пикселей сверху, начнется воспроизведение слайд-шоу и при прокрутке страницы на каждые 30 пикселей будет показываться следующее изображение.
Настройка слайд-шоу на показ следующего изображения при прокрутке страницы вниз на определенное расстояние (в пикселях).
Работа со вкладкой «Adobe Edge Animate» панели «Эффекты прокрутки»
Adobe Edge Animate представляет собой интуитивно понятный дизайнерский инструмент, позволяющий создавать веб-анимацию на основе HTML5. С помощью интерфейса Edge Animate можно создавать композиции, использующие зацикливание движения графики и символов. Анимации, созданные с помощью Adobe Edge Animate, можно экспортировать в виде файлов OAM для их последующего размещения на страницах своего сайта Muse. Для воспроизведения таких анимаций в браузере не требуются никакие подключаемые модули.
При создании анимаций в Adobe Edge Animate необходимо перетащить элемент в рабочую область программы и воспользоваться шкалой времени для управления его движениями. Кроме добавления элементов прямо на шкалу времени, можно также создать вложенные элементы с подчиненными элементами, которые будут воспроизводиться с использованием их собственных внутренних шкал времени. Дополнительные сведения о работе с компонентом Adobe Edge Animate см. на странице продукта Adobe Edge Animate. Также ознакомьтесь с видеоруководством по Adobe Edge Animate на сайте Adobe TV.
Чтобы приступить к работе с компонентом перемещения Adobe Edge Animate при прокрутке, сначала необходимо разработать дизайн композиции, предназначенной специально для этой цели. Эффекты прокрутки можно применить к файлам OAM, чтобы изменить поведение анимаций, помещенных на основную шкалу времени. Крайне важно создать дизайн анимации таким образом, чтобы на основной шкале времени находились лишь те элементы, которые должны перемещаться при прокрутке страницы (все остальные элементы анимации должны находиться на вложенных символьных шкалах времени). Такой подход позволяет создавать интерактивные анимации. По мере прокрутки страницы посетителями настройки эффекта прокрутки применяются исключительно к воспроизведению анимированных элементов на основной шкале времени.
Дополнительные сведения о создании анимаций для добавления на веб-сайт Adobe Muse см. в разделе Добавление материалов Adobe Edge Animate .
Выполните указанные ниже действия, чтобы приступить к работе со вкладкой «Adobe Edge Animate» панели «Эффекты прокрутки».
Настройте воспроизведение анимации Edge Animate таким образом, чтобы оно начиналось тогда, когда страница прокручена до определенной отметки, или чтобы кадры менялись каждый раз, когда страница прокручена на определенное расстояние (в пикселях).
В этом примере для исходной позиции установлено значение 50 пикселей. Чтобы изменить эту позицию, можно перетащить T-образный маркер или указать нужное значение в поле «Исходное положение».
Указав исходное положение, можно управлять воспроизведением анимации двумя способами.
- Автозапуск : при выборе этого параметра воспроизведение анимации на основной шкале времени начинается с момента достижения в браузере исходной позиции при прокрутке страницы, независимо от количества кадров на основной шкале времени. Воспроизведение анимации продолжается до тех пор, пока страница не будет прокручена до отметки выше исходной позиции.
- Переключать кадры каждые : при выборе этого параметра воспроизведение анимации будет выполняться покадрово - по одному кадру за раз при прокрутке страница на определенное число пикселей. Например, если имеется страница высотой 3000 пикселей и для параметра задано значение «10», воспроизведение анимации на основной шкале времени будет осуществляться по одному кадру при прокрутке страницы на каждые 10 пикселей. Если посетитель прокручивает страницу быстрее, то и анимация будет воспроизводиться с более высокой частотой кадров.
Примечание.
Любые анимированные объекты, которые являются вложенными или не связаны с основой шкалой времени в композиции Adobe Edge Animate, остаются без изменений при прокрутке страницы. Поэтому можно выбрать либо статический фон, либо циклическое воспроизведение вложенных элементов, которые постоянно двигаются независимо от взаимодействия посетителя с элементами управления прокруткой страницы.
Этот урок о том, как применить эффекты прокрутки
для создания параллакс эффекта на сайте в программе Adobe Muse.
На одном простом примере с перемещением фона и текстового фрейма вы увидите как можно применять эффекты прокрутки, как их настраивать и что происходит при тех или иных настройках эффекта. Довольно часто встречающийся вопрос по эффектам прокрутки (параллаксу) освещается в данном видео. Просто, легко, доступно.
Смотрите видеоурок:
Эффекты прокрутки. ПодготовкаЭто мой новый видео урок, в котором мы рассмотрим эффекты прокрутки. Рассматривать эффекты прокрутки мы будем на одном примере. Я открываю программу, здесь у меня создан такой вот проект – здесь у меня два с картинками, третий прямоугольник у нас с градиентом идёт до самого конца сайта. И есть надпись, расположенная в текстовом блоке с прозрачным задним фоном и простым текстом.
Эффекты прокрутки находятся у нас в правой части программы, в разделе «эффекты прокрутки». Нажимаете сюда и у нас появляется такое вот окошко, где мы можем назначать для блоков различные эффекты. Сейчас у меня никакие эффекты прокрутки на блоке не назначены. Если мы просмотрим сайт в режиме просмотра, то у нас будет просматриваться страница со всеми её блоками, последовательно сменяющими друг друга.
Эффекты прокрутки. Основные параметры и настройка.Сейчас мы попробуем установить эффекты прокрутки для текстового блока, заднего фона первого экрана. Делаем так, что бы про прокрутке наш текст уезжал вниз, а не в верх, а задний фон уезжал вверх медленнее, чем мы прокручиваем страницу в браузере.
Основные параметры.Идём в режим дизайна этой страницы, давайте для начала выделим текстовый блок, и включим ему «Перемещение ». Ставлю тут флажок и нам становятся доступны настройки для перемещения данного блока. К тому же, к данному блоку появился такой вот Т-образный маркер . Этот маркер разделяет начальное и конечное перемещение. Я поставлю этот блок на место, а маркер выставлю ровно по верхней границе своей страницы.
Настройка перемещения блоков.Далее. Начальное перемещение нас не столько интересует, сколько конечное перемещение. Поэтому, мы начальное перемещение выставляем всё на ноль, а конечное перемещение (мы хотим, что бы наш блок двигался вверх), я нажимаю здесь кнопку «вниз», со скоростью по вертикали немного пониже, чем скорость прокрутки в браузере. Я выставляю значение меньше единицы (0,5), это означает, что мой текстовый блок будет уезжать при прокрутке страницы вниз, со скоростью в два раза меньше, чем скорость прокрутки страницы в браузере.
Я выделяю графический блок заднего фона и точно так же устанавливаю ему флажок «перемещение ». Для того, что бы увидеть Т-образный маркер (он у нас находится вверху), мне придется сдвинуть этот блок немного вниз, и я передвигаю этот маркер в самое начало этого графического блока. То есть, он у меня совпадает с началом графического блока. Ставлю фон на место и, поскольку картинка у меня растянута по ширине страницы, по ширине браузера, у меня отсутствуют параметры перемещения влево-вправо. Каждого перемещения – начального и конечного.
И так, я хочу, что бы при прокрутке страницы в браузере блог графический уезжал вверх, но медленнее, чем я прокручиваю страницу. Для этого конечное перемещение я устанавливаю «вверх» по умолчанию, но ставлю скорость в два раза меньше, чем скорость прокрутки страницы в браузере.
Эффекты прокрутки. Просмотр.Заходим в режим «просмотр», страница у меня обновилась и при прокрутке страницы мы видим, что наш текстовый блок поехал вниз, а задний фон экрана – вверх. Он спускается медленнее, чем на него наползает следующий блок с картинкой.
Таким вот образом мы сделали некий эффект параллакса, эффекта прокрутки в программе Adobe Muse.
На самом деле, эффекты прокрутки можно использовать для самых различных вариантов создания такой вот анимации. Например, если мы для текстового блока выставим эффект прокрутки и для перемещения вниз назначим ему ещё и перемещение в одну из сторон, например вправо, то при просмотре наш тестовый блок будет уезжать не только вниз, но и так же перемещаться вправо.
Вот такие интересные эффекты позволяет нам сделать эффект прокрутки в программе Adobe Muse.
А на этом мы заканчиваем данный урок. Если Вам понравился данный урок, подписывайтесь на мой канал , ставьте лайки и пишите комментарии внизу.
Так же не забывайте, что вы всегда можете подписаться на мою рассылку и получить 49 бесплатных виджетов и 3 шаблона для программы Adobe Muse. Нажимайте на ссылку под этим видео. На этом я прощаюсь с вами до следующих уроков. До связи. Пока.
1 417 участников · Открытый клуб
Клуб разработчиков сайтов на базе Adobe Muse. Обсуждаем работу в программе. Помогаем в решении появившихся проблем. Делимся шаблонами, виджетами и другими полезными файлами. Готовим текстовые и видеоуроки по работе в программе.
57 участников · Открытый клуб
Система управления содержимым сайта с открытым исходным кодом; написана на PHP; сервер базы данных - MySQL; выпущена под лицензией GNU GPL версии 2. Сфера применения - от блогов до достаточно сложных новостных ресурсов и интернет-магазинов. Встроенная система «тем» и «плагинов» вместе с удачной архитектурой позволяет конструировать проекты широкой функциональной сложности.
39 участников · Открытый клуб
Стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML. Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.
30 участников · Открытый клуб
Многофункциональный графический редактор, разработанный и распространяемый фирмой Adobe Systems. В основном работает с растровыми изображениями, однако имеет некоторые векторные инструменты. Продукт является лидером рынка в области коммерческих средств редактирования растровых изображений и наиболее известным продуктом фирмы Adobe. В настоящее время Photoshop доступен на платформах macOS, Windows, в мобильных системах iOS, Windows Phone и Android.
Онлайн конструктор сайтов, заточенный под разработку адаптивных сайтов, лендингов, интернет-магазинов и сайтов-визиток. Работает только как онлайн сервис без оффлайн клиента. Только на английском языке.
28 участников · Открытый клуб
21 участник · Открытый клуб
19 участников · Открытый клуб
Система управления содержимым, написанная на языках PHP и JavaScript, использующая в качестве хранилища базы данных СУБД MySQL или другие стандартные промышленные реляционные СУБД. Является свободным программным обеспечением, распространяемым под лицензией GNU GPL.
15 участников · Открытый клуб
Формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.
13 участников · Открытый клуб
9 участников · Открытый клуб
Adobe Premiere Pro - профессиональная программа нелинейного видеомонтажа компании Adobe Systems. Является наследником программы Adobe Premiere (последняя вышедшая версия которой носила номер 6.5). Первая версия программы (она же Adobe Premiere 7) вышла 21 августа 2003 года для операционных систем семейства Windows. Начиная с третьей версии программа стала доступной и для операционных систем OS X. Первые две версии выходили отдельными продуктами, третья версия вышла в составе пакета Adobe Creative Suite 3. Начиная с пятой версии поддерживаются только 64-битные операционные системы, тогда как четвёртая версия предполагала использование также и в 32-битных.
Мы будем называть scroll-эффектами любые сценарии и приемы, реализуемые на веб-странице, так или иначе связанные с направлением и/или позицией прокрутки этой страницы относительно окна браузера.
К сожалению, пока не существует никаких отраслевых стандартов по поводу именования различных видов скролл-эффектов. Поэтому давайте рассмотрим самые популярные из них и дадим им собственные, наиболее подходящие по смыслу названия.
1. Parallax (Параллакс).Эффект движения слоев страницы с разной скоростью при скролле. Обычно, в соответствии с оптическим представлением параллакса, слои, находящиеся ближе к наблюдателю, должны двигаться быстрее слоев, находящихся на удалении.
Для справки, вот определение из википедии: “Паралла́кс (греч. παραλλάξ, от παραλλαγή, «смена, чередование») - изменение видимого положения объекта относительно удалённого фона, в зависимости от положения наблюдателя.”
3. Sticky (Прилипание)Суть техники заключается в том, что элемент при скролле ведет себя как position: relative относительно своего родителя, пока его верхняя граница не достигнет верхнего края окна (viewport-a). При дальнейшем скролле вниз элемент ведет себя как position: static , будто отвязывается от родителя и “прилипает” к границе окна. Вот, к примеру, демо , в котором верхняя панель навигации реализована c эффектом “sticky”.
Этой техникой также можно пользоваться для “прилепливания” элементов к нижней, левой или правой границе экрана, в зависимости от позиции и направления скролла.
Надо сказать, что СSS свойство position: sticky (позволяет с легкостью реализовывать подобные эффекты без применения javascript) описано в черновике спецификации CSS Positioned Layout Module Level . Но вот с поддержкой браузерами пока совсем туго .
4. Reversed sticky (Реверсное прилипание).Эффект, по сути, похож на предыдущий, но элемент прячется за границей окна при скролле вниз и появляется только при обратном скролле (вверх). Будет намного легче понять, о чем идет речь, немного поигравшись с демо .
5. Progress bar (Индикатор прокрутки).Разновидности сценариев для визуализации текушего положения пользователя на странице при скролле. Например, в этом демо есть веселый индикатор прокрутки внизу страницы.
6. Accordion (Аккордеон).Этот сценарий подразумевает последовательное применение stcicky -эффекта к заголовкам разделов страницы при скролле. А вот и демо
7. Menu Spy (Сопровождающее меню).Этот сценарий хорошо известен под именем scroll spy в twitter bootstrap. Он подразумевает подсветку пунктов меню навигации, в зависимости от положения скролла, например, как в этом демо .
8. Staging (Сцена).Самый сложный и эффектный сценарий, при котором некоторый блок, сопоставимый с размерами окна, фиксируется относительно видимой области страницы. В процессе прокрутки страницы сам блок остается неподвижным, однако, положение скролла влияет на развитие некого сценария внутри него. Это могут быть движения персонажей, появление или исчезновение контента, анимации и т.д. Смотрите демо .
Общие проблемы при реализации любых сценариев со скролл-эффектами.Во-первых , при написании скролл-эффектов нужно учитывать большое количество факторов и величин:
- Размер всего документа.
- Размеры и позиции элементов, участвующих в сценарии, а также в некоторых случаях и их контейнеров.
- Размер и текущее положение видимой части документа (viewport) при скролле.
- Направление скролла.
- Адаптация при изменении размеров окна с отзывчивым (responsive) дизайном
Во-вторых , математические вычисления для описания сценариев получаются довольно массивными, а их сложность возрастает с ростом количества эффектов.
В-третьих , на мобильных девайсах все работает плохо и с тормозами. Javascript изначально работает медленнее. В добавок к этому, мобильные браузеры блокируют выполнение javascript во время скролла.
В-четвертых , Вы никогда не знаете, что искать в Гугле. В большинстве случаев не понятно, как называется тот или иной скролл-эффект. В этом случае, найти готовое решение довольно сложно.
Что такое Scroolly?Scroolly – это jquery-плагин, который предоставляет Вам простой синтаксис для создания и конфигурирования скролл-эффектов. Он прост в освоении, довольно легковесный и позволяет создавать сколь угодно сложные сценарии. Нужно сказать, что все демо, которые были приведены выше, реализованы с помощью Scroolly!
Правила, их границы и области действия.Итак, в процессе скролла, в зависимости от положения прокрутки сраницы, нам нужно применять к элементам некоторые правила. Для этого необходимо определить границы действия этих правил.
Чтобы было проще понять о чем идет речь, приведу абстрактный пример:
Чертовски сложно воспринимается на слух, не правда ли? Лучше посмотрим на .
Давайте договоримся, что мы будем называть видимую область документа словом “viewport”. К сожалению, я не могу найти короткий русский аналог этого слова:)
В итоге, здесь мы можем выделить 3 области действия правил c 6-ю границами. Давайте опишем их:
А теперь подумайте, с чего Вы начали бы описывать всю эту логику? Даже в таком простом сценарии с одним элементом в вычислениях участвуют размер документа, размер viewport, положение viewport, размер элемента, положение элемента, положение скролла… черт возьми, как же не запутаться?
Scroolly спешит на помощь.Вся прелесть scroolly заключается в том, что каждая из этих границ областей действия правил задается с помощью вот такого наглядного синтаксиса:
А весь сценарий описывается так:
$(".my-element").scroolly([ { from: "el-top = vp-bottom - 100px", to: "el-bottom = vp-bottom - 100px", cssFrom:{opacity:".0"}, cssTo:{opacity:"1"} }, { from: "el-center = vp-center + 30vp", to: "el-center = vp-center - 30vp", cssFrom:{"transform": "rotate(0deg)"}, cssTo:{"transform": "rotate(180deg)"} }, { from: "el-top = vp-top + 100px", to: "el-bottom = vp-top + 100px", cssFrom:{opacity:"1"}, cssTo:{opacity:".0"} } ]);
Где vp – viewport, а el – элемент. Также можно пользоваться абстракциями doc для документа и con для контейнера элемента. А теперь об этом подробнее и с картинками…
У каждого из них есть опорные точки, которые можно использовать в синтаксисе scroolly:
viewport: vp-top , vp-center , vp-bottom
элемент: el-top , el-center , el-bottom
контейнер: con-top , con-center , con-bottom
документ: doc-top , doc-center , doc-bottom
Вот несколько примеров описания областей действия правил c помощью синтаксиса scrolly:
ДокументацияЕсли Вас заитересовал плагин scroolly обязательно посмотрите официальную документацию. А она существует, и даже представлена в 2-х вариантах:
Ну и самое главное: обязательно посмотрите видео с нашей конференции