Эффекты прокрутки в Adobe Muse. Что такое Scroolly

06.03.2019

Мы будем называть 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!

Правила, их границы и области действия.

Итак, в процессе скролла, в зависимости от положения прокрутки сраницы, нам нужно применять к элементам некоторые правила. Для этого необходимо определить границы действия этих правил.

Чтобы было проще понять о чем идет речь, приведу абстрактный пример:

Нужно плавно показать и плавно скрыть некоторый элемент, когда при скролле он будет входить в область видимости и выходить из нее. Элемент должен начать появляться после того, как его верхняя кромка будет на 100px выше нижней границы видимой области окна и полностью появится, когда его нижняя кромка будет на 100px выше нижней границы видимой области окна. Та же логика с исчезновением, только в симметрично обратном порядке.
Элемент нужно повернуть на 180° во время скролла, пока он будет находится в зоне ±30% от центра видимой зоны.

Чертовски сложно воспринимается на слух, не правда ли? Лучше посмотрим на .

Давайте договоримся, что мы будем называть видимую область документа словом “viewport”. К сожалению, я не могу найти короткий русский аналог этого слова:)

В итоге, здесь мы можем выделить 3 области действия правил c 6-ю границами. Давайте опишем их:

совпадает с нижней границей viewport (элемент начинает появляться)
совпадает с нижней границей viewport (элемент заканчивает появляться)
Точка, находящаяся на 30% ниже центра viewport, совпадает с центром элемента (элемент начинает поворот)
Точка, находящаяся на 30% выше центра viewport, совпадает с центром элемента (элемент заканчивает поворот)
Точка, находящаяся на 100px ниже верхней границы элемента, совпадает с верхней границей viewport (элемент начинает исчезать)
Точка, находящаяся на 100px выше верхней границы элемента, совпадает с верхней границей viewport (элемент заканчивает исчезать)

А теперь подумайте, с чего Вы начали бы описывать всю эту логику? Даже в таком простом сценарии с одним элементом в вычислениях участвуют размер документа, размер viewport, положение viewport, размер элемента, положение элемента, положение скролла… черт возьми, как же не запутаться?

Scroolly спешит на помощь.

Вся прелесть scroolly заключается в том, что каждая из этих границ областей действия правил задается с помощью вот такого наглядного синтаксиса:

el-top = vp-bottom - 100px (элемент начинает появляться)
el-bottom = vp-bottom - 100px (элемент заканчивает появляться)
el-center = vp-center + 30vp (элемент начинает поворот)
el-center = vp-center - 30vp (элемент заканчивает поворот)
el-top = vp-top + 100px (элемент начинает исчезать)
el-bottom = vp-top + 100px (элемент заканчивает исчезать)

А весь сценарий описывается так:

$(".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-х вариантах:

Для ленивых и нетерпеливых – github.com/chayka/jQuery.Scroolly/wiki/Short-Story
Для неторопливых и вдумчивых – github.com/chayka/jQuery.Scroolly/wiki/Long-Story

Ну и самое главное: обязательно посмотрите видео с нашей конференции

В этой статье рассказывается о том, как применять эффекты прокрутки в Adobe Muse. Прочитайте ее и получите общее представление об эффектах прокрутки.

Эффекты прокрутки в веб-дизайне позволяют задавать скорость и направление перемещения каждого элемента веб-страницы. С помощью эффектов прокрутки можно создавать динамические анимационные веб-сайты, когда два элемента (или больше) перемещаются в браузере с разной скоростью. Adobe Muse позволяет настроить различные параметры, включая движение, непрозрачность и воспроизведение слайд-шоу или анимации.

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

Эффекты прокрутки не применяются к элементам заполнения фона, которые используют определенные графические эффекты, такие как скос и внутреннее свечение. Если к выбранному объекту применены эффекты таких типов, параметры в разделе Прокрутка на панели Заливка будут недоступны.

Примечание.

Чтобы применить к элементу эффекты прокрутки, проверьте, что для элемента задано состояние «Стандартное».

Помимо изображений и фоновой заливки, эффекты прокрутки также часто используются в анимации для создания эффекта глубины. Для разных элементов на странице можно задать разную скорость движения. Например, макет страницы может содержать элемент переднего плана, который будет перемещаться в два раза быстрее элемента среднего плана. Скорость перемещения мозаичной заливки фона, находящейся за анимированным содержимым, может быть в два раза меньше скорости элемента среднего плана. Данные настройки имитируют характер восприятия движения глазом человека. Скорость движения объекта, находящегося ближе всего к человеку, кажется наиболее высокой.

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

Перед использованием эффектов прокрутки ознакомьтесь со следующими ключевыми понятиями:

Исходная позиция в эффектах прокрутки - это то расположение, в котором настраиваемые элементы страницы начинают выполнять движение. Например, нажмите меню Заливка в браузере и выберите вкладку Прокрутка . Поле, расположенное по центру (в нем сейчас указано значение 0 пикс.), обозначает исходную позицию. При активации настроек движения на странице появится T-образный маркер. С помощью T-образного маркера можно управлять диапазоном движения. Значение 0 пикс., используемое по умолчанию, означает, что T-образный маркер находится на верхнем крае окна браузера.

Число пикселей в поле указывает расстояние, на которое будут перемещены изменения, заданные в разделе Начальное перемещение (в указанном направлении и с заданной скоростью), по мере прокрутки страницы до этой позиции. Верхнему краю страницы соответствует положение в 0 пикселей. Значит, чем больше число пикселей, тем дальше будет прокручена страница. На палитре Перспектива (Окно > Перспектива ) расстояние от верхнего края страницы обозначается как значение по оси Y.

Начальное перемещение

Начальное перемещение в эффектах прокрутки - это расположение, откуда начинается движение прокрутки, исчисляемое в пикселях. Настройте начальное перемещение, чтобы указать прокрутку элементов (значение между исходной позицией и краем элемента страницы).

В разделе «Начальное перемещение» рядом со значениями в полях отображается символ «x» (в нижнем регистре). Он обозначает множитель скорости перемещения . Если посетитель прокручивает страницу быстрее, перемещение эффекта прокрутки будет происходить с той же скоростью, с которой посетитель прокручивает страницу.

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-битных.

Давно и уже успели укорениться среди разработчиков.
Итак. С помощью плагинов, которые представлены в этой подборке, вы сможете создать современный сайт с отличной динамикой. Я думаю, каждый человек, который интересуется разработкой сайтов, видел эти плагины в действии. При прокрутке страницы, блоки, различные элементы или текст плавно появляются , выезжают, крутятся и пр. Как показывает практика, клиентам очень нравятся такие фентифлюшки.
Внедрить эффекты при скроллинге в страницу не так сложно, как может показаться на первый взгляд. Все что нужно - это качественный плагин и прямые руки. Конечно, начинающий верстальщик может испытывать трудности, но стоит немного посидеть, разобраться в принципах работы и задача покажется очень простой.
Несмотря на то, что анимация на сайте многим по душе, не стоит переусердствовать, иначе у вас получится перегруженная, визуально плохо воспринимаемая страница, в которой все внимание будет приковано ко всем этим «свистелкам», а не к информации, которую требуется донести до посетителя. К тому же, чем больше подключено скриптов, тем медленнее работает страница. В старых браузерах все это дело может вовсе не работать. Подключайте эффекты с умом. Зачастую, простого плавного, ненавязчивого появления блоков хватает. Такой эффект придает странице плавности и динамики, делает сайт живым. На своей практике мне пришлось много повидать сайтов с эффектами без чувства меры. От такого просто тошнит - единственное чувство, которое возникает. Но, наверное, разработчики надеялись на «Вау эффект». Итак. Используйте все с умом и в меру!
Все плагины абсолютно бесплатны , но я бы рекомендовал ознакомиться с лицензий, так как в некоторых случаях для использования в коммерческих целях нужно выполнить ряд условий.

WOW.js

Неплохой плагин для реализации анимации элементов при скроллинге . Он имеет очень много анимированных вариантов появления блоков и довольно легко настраивается.

ScrollMagic

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

Scrollme

Простой и легкий плагин с помощью которого можно реализовать эффектную анимацию при прокрутке . Вы можете масштабировать, вращать, двигать, уменьшать или увеличивать прозрачность любого элемента.

Superscrollorama

Superscrollorama - мощный, но тяжелый плагин для создания анимации при прокрутке . В его арсенале имеется множество различных настроек для анимации текста, отдельных DIV элементов, включая эффекты.
Более детальную информацию можно найти в документации к данному jQuery плагину.

onScreen

Отличный плагин, который мы часто используем в своих проектах. От позволяет легко и быстро сделать различные эффекты появления элементов при прокрутке страницы . Плагин легкий и не грузит страницу.

OnePage

jQuery плагин OnePage позволяет разбить страницу на отдельные экраны с высотой 100% и анимировать переход по ним. Требуется лишь легкий толчок, чтобы начался скроллинг к следующему экрану. Такой же эффект использовался на промо-сайте 5s.
Имеются проблемы с , как и практически во всех подобных плагинах. Если текст не помещается по высоте, то он просто обрезается и полоса прокрутки не появляется.

FSVS

Очень похожий по функционалу плагин на предыдущий. Позволяет сделать скользящую прокрутку по экранам с помощью css3. Имеет аналогичную проблему при просмотре на телефонах. Переход по экранам в виде отдельных слайдов возможен как с помощью ролика мышки, так и посредством клика на точечную боковую навигацию.

jInvertScroll

jInvertScroll позволяет создавать классный горизонтальный parallax скролиинг . В то время, когда Вы крутите ролик мышки вниз, все элементы на странице движутся горизонтально, к тому же с разной скоростью, что создает parallax эффект.

Waypoints

Waypoints - это jQuery плагин, который позволяет показывать любой элемент при нахождении посетителя в заданной точке страницы. Например, когда посетитель дочитывает статью на сайте и приближается к концу текста, сбоку страницы всплывает информационное окно с предложением почитать следующую статью или похожую статью.

Scrollocue

Оригинальный плагин для специфических задач. Позволяет передвигаться по странице выделяя блоки простым кликом правой клавишей мыши по странице. С каждым новым кликом выделяется элемент ниже, тем самым страница немного прокручивается. Также поддерживается скроллинг стрелками на клавиатуре.

Scrolling Progress Bar

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

multiScroll.js

multiScroll.js - это jQuery плагин, похож на два предыдущих плагина скользких экранов , но имеет одно значительное отличие. Если в предыдущих случаях просто перелистывался экран, то этот больше похож на современный слайдер изображений . Экран разделяется на две равных части и левая перелистывается вверх, а правая вниз. Таким образом контент практически разрывается.
Данный плагин можно использовать, например, для создания портфолио фотографа или дизайнера . Думаю, посетители оценят ваш сайт.

browserSwipe.js

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

jQuery.panelSnap

Полноэкранный скользящий скроллинг-плагин . Плагин ничем особо не отличающийся, на первый взгляд, от предыдущих, но в нем реализована внутренняя область с прокруткой. Если мы докручиваем до конца внутреннего контента, то автоматически происходит переход на следующий экран. Теоретически - это решение проблемы для адаптивных сайтов . Если внутреннее окошко сделать в полный размер, на маленьких экранах контент, который не поместился по высоте, не будет теряться.

В новой резиновой версии программы Adobe Muse CC 2015.1 появилась резиновая верстка сайтов, однако многие столкнулись при этом с проблемой отсутствия возможности использовать эффекты прокрутки и следовательно создания эффектов типа параллакс эффект . Смотрите это видео и вы узнаете об этих нюансах программы и какие варианты синтеза этих двух функций придумали и внедрили разработчики программы Adobe Muse.

Итак, новая резиновая верстка или всё же старый добрый параллакс эффект ?

Резиновая верстка или Параллакс эффект? В чем же вопрос?

В этом видео уроке я хотел бы осветить один очень важный вопрос, который касается последнего . Вопрос очень частый и касается он параллакса или резиновой вёрстки в Adobe Muse, которая стала доступна после последнего обновления программы.

И так, открываем программу Adobe Muse. Создаём новый проект. По-умолчанию идем «Страница», « », у нас установлено «гибкое значение ширины» для этой страницы. Если мы зайдём в настройки сайта, то у нас установлено «гибкое значение ширины» для всего сайта. При таких установках у нас, если мы зайдём в «эффекты прокрутки», возникает вот такая надпись –

«что бы включить эффекты прокрутки, на странице должна располагаться только одна фиксированная точка остановки ».

Что же это значит – если сейчас вы создаёте свой сайт и хотите сделать его гибким, например, располагаете какой-либо блок, делаете ему заливку (я сделаю синюю заливку), то сейчас данный блок очень хорошо адаптируется и обладает такой вот «резиновостью» — респонсивностью. При этом, если к данному объекту мы хотим прикрепить эффект прокрутки, мы этого сделать к сожалению, не сможем. Почему?

Потому что эффекты прокрутки (параллакс эффект) допустимо использовать в новой версии программы только для фиксированных значений ширины страницы сайта !

Резиновая верстка или Параллакс эффект? Что делать?

Выбираем в свойствах страницы и выставляем здесь «постоянную ширину» .«ОК». Таким образом, мы делаем так, что мы теперь можем использовать эффекты прокрутки для данного блока, задать ему, как и ранее начальное и конечное перемещение, и все остальные параметры. Ну а теперь, при гибкости данного сайта, мы видим, что данный блок никак не реагирует на уменьшение ширины страницы.

Резиновая верстка или Параллакс эффект? Дилемма.

Выход у нас только один – выбирать на данном этапе, либо использовать эффекты прокрутки и пользоваться программой, как и ранее с фиксированной шириной страницы сайта. Либо, если хотите гибкости и адаптивности (резиновости) сайта, придётся отказаться от эффектов прокрутки.

Поскольку сейчас, даже если мы зайдём в меню «страница», «свойства страницы», и попытаемся выставить гибкое значение ширины, то у нас тут же выскочит окошко, которое нас предупреждает — «на этой странице содержатся эффекты прокрутки, которые будут отключены при добавлении точки остановки или изменении размера страницы». И спрашивает, хотим ли мы выполнить эту операцию. Если мы нажмём «нет», то наша страница останется с настройками постоянной ширины, если мы нажмём «да», то для страницы установится гибкое значение ширины, но для данного блока будут отключены все эффекты прокрутки.

Резиновая верстка или Параллакс эффект? Компромисс.

Единственный выход есть в том, чтобы делать для вашего сайта в целом — устанавливать настройки гибкого значения ширины. Для каждой же страницы Вы сможете устанавливать отдельно, какой вы хотите видеть эту страницу. Либо эта страница будет с постоянной шириной (я выставил для этой страницы «без имени 3»), либо, если я зайду в свойства страницы «домашняя», то здесь у меня выставлено «гибкое значение ширины». Таким образом, вы для каждой страницы можете устанавливать – будет ли станица использовать гибкое значение ширины, либо постоянное значение ширины. На тех страницах, где выставлено постоянное значение ширины, вы легко сможете использовать параллакс эффект или эффект прокрутки.

На этом заканчиваю этот урок. Ставьте лайки, пишите комментарии внизу. Подписывайтесь на мой канал .