Scroll эффекты. Резиновая верстка или параллакс эффект? Эффекты прокрутки

21.03.2019

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-стилей .

HTML -разметка

В файл 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-элементы на страницу, сайт выглядит вот так.

CSS— стили

Начнём с добавления стилей 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 , так и с теми, которые состоят только из идентификатора.

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

Смотрите видеоурок:

Эффекты прокрутки. Подготовка

Это мой новый видео урок, в котором мы рассмотрим эффекты прокрутки. Рассматривать эффекты прокрутки мы будем на одном примере. Я открываю программу, здесь у меня создан такой вот проект – здесь у меня два с картинками, третий прямоугольник у нас с градиентом идёт до самого конца сайта. И есть надпись, расположенная в текстовом блоке с прозрачным задним фоном и простым текстом.

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

Эффекты прокрутки. Основные параметры и настройка.

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

Основные параметры.

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

Настройка перемещения блоков.

Далее. Начальное перемещение нас не столько интересует, сколько конечное перемещение. Поэтому, мы начальное перемещение выставляем всё на ноль, а конечное перемещение (мы хотим, что бы наш блок двигался вверх), я нажимаю здесь кнопку «вниз», со скоростью по вертикали немного пониже, чем скорость прокрутки в браузере. Я выставляю значение меньше единицы (0,5), это означает, что мой текстовый блок будет уезжать при прокрутке страницы вниз, со скоростью в два раза меньше, чем скорость прокрутки страницы в браузере.

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

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

Эффекты прокрутки. Просмотр.

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

Таким вот образом мы сделали некий эффект параллакса, эффекта прокрутки в программе Adobe Muse.

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

Вот такие интересные эффекты позволяет нам сделать эффект прокрутки в программе Adobe Muse.

А на этом мы заканчиваем данный урок. Если Вам понравился данный урок, подписывайтесь на мой канал , ставьте лайки и пишите комментарии внизу.

Так же не забывайте, что вы всегда можете подписаться на мою рассылку и получить 49 бесплатных виджетов и 3 шаблона для программы Adobe Muse. Нажимайте на ссылку под этим видео. На этом я прощаюсь с вами до следующих уроков. До связи. Пока.

, Turtles in Time или оригинальную игру Moon Patrol . В этих играх техника параллакса наблюдается в тот момент, когда несколько фоновых слоев с различными текстурами двигаются с разной скоростью, что создает эффект трехмерного пространства.

Почему я начал говорить о ретро-играх в статье о веб-разработке? Самым простым ответом мог бы быть «потому что они клевые», но нет. Параллакс-скроллинг является классным дизайнерским концептом, который прокладывает свой путь в мир веб-дизайна. Nike были одними из первых, кто использовал эту технику с большим успехом, когда они наняли маркетинговых гигантов Weiden and Kennedy для разработки их оригинального сайта Nike Better World. Сайт Nike Better World с того времени был обновлен и заменен на новый, однако есть другой сайт, довольно похожий на то, как выглядел первый параллакс-дизайн от Nike - сайт о спортивных напитках Activate .

Наверное, вы заметили, что во время прокрутки страницы сайта вниз несколько различных элементов, находящихся на этой странице, двигаются с разной скоростью. Давайте для примера возьмем страницу, отображенную на картинке сверху. По мере прокрутки страницы вниз вы увидите, что голубые точки в фоне (те, которые немного размыты), двигаются с той же скоростью, что и скроллбар. Также, вы увидите, что группа голубых точек, которые более сфокусированы и лежат на переднем плане, двигаются с немного большей скоростью, чем скроллбар. Быстрее этих точек двигается текст “0 SUGAR | 0 CALORIES | NATURALLY SWEETENED” и главный заголовок страницы “Products”. И, наконец, есть изображения самого продукта, как маленькие и расфокусированные в фоне, так и большие, сфокусированные и лежащие на переднем плане. Фоновые изображения продуктов двигаются с той же скоростью, что и текст, в то время как изображения продуктов на переднем плане двигаются быстрее этого текста. Это все и является идеальной демонстрацией параллакс-скроллинга, когда разные слои изображений накладываются друг на друга и все движутся с разной скоростью при прокрутке страницы, создавая эффект трехмерности.

Параллакс-скроллинг не ограничивается только вертикальным скроллом страницы или скроллингом по прямой линии. Отдадим право Nintendo для демонстрации идеального примера, подтверждающего это утверждение. Вспомните ранние игры Nintendo, где наши герои обычно двигались горизонтально слева направо вдоль экрана, а не вертикально вниз, как мы видели это на сайте Activate выше. Прокатитесь на MarkioKart Wii и давайте поговорим о некоторых клевых штуках, которые мы там можно увидеть.

Первую вещь, которую вы заметите, это направление скроллинга страницы - оно не вертикальное, а как сказано выше, а изначально горизонтальное. Конечно, это круто, но это также не новый концепт. Также, вы заметите параллакс-эффект с динозавром Йоши и панцирями на фоне, Марио и Луиджи на переднем плане и основным контентом, которые смещаются с разной скоростью при прокрутке. Но как только вы доедете до страниц #highlights и #attack, траектория смещения перестанет быть идеально горизонтальной. То же самое касается перехода между страницами #rediscover и #snes. Изображения не только сохраняют свою разную скорость смещения, но и меняют общее направление с горизонтального на вертикальное.

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

Параллакс-скроллинг также может помочь оживить сайт, на котором не особо много контента. Что если весь ваш сайт состоит из mission statement, или раздела about us, плюс контактная информация? Скорее всего, вы бы могли сделать это одной страницей и при определенных условиях у вас бы получился неплохой одностраничный сайт, но запомнится ли он посетителям? Скорее всего, нет. Но что если добавить к нему немного параллакса, как это сделал народ на Spring / Summer ?

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

Параллакс-скроллинг - это хороший трюк, который можно держать в рукаве. И его всегда можно применить независимо от того, делаете ли вы сложный мультистраничный сайт, или же простой одностраничный сайт-визитку.

Примеры сайтов с параллаксом Некоторые из них очень крутые, рекомендую ознакомиться:

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