Как сделать мультимедийный репортаж с помощью Scrollkit

Делать красивые мультимедийные репортажи, подобные знаменитому “Снегопаду”, может каждый. Вам не нужно быть ни программистом, ни дизайнером. Я сам убедился в этом, потратив два дня на освоение бесплатного инструмента Scrollkit, который позволяет создавать веб-сайты с красивыми эффектами легко и быстро. Главное — чтобы был качественный контент, который вы таким образом хотите опубликовать. Ниже предлагается инструкция о том, как пользоваться сервисом.

Всеволод Пуля, управляющий редактор Russia Beyond the Headlines, проекта “Российской газеты”

Материал впервые опубликован в журнале «Журналист» №02/2014

Scrollkit — визуальный редактор веб-страниц — был создан двумя энтузиастами еще в 2012 году, и с тех пор разросся неплохим функционалом и новыми эффектами. На его базе уже создано довольно много интересных проектов (см. во врезе). Кстати, сами авторы в качестве промо-акции по привлечению внимания к проекту в свое время создали на своем движке точную копию нью-йорк таймсовского “Снегопада”. Позже им пришлось удалить ее с сайта из-за претензий газеты к соблюдению авторского права.

Лучшее в скроллах, созданных с помощью Scrollkit, — то, что их можно скопировать в редактор и увидеть самому, как автор добился тех или иных эффектов. Главное, чтобы скролл был размещен на хостинге самого сервиса, а не на стороннем сайте. Для этого к любому URL понравившегося скролла достаточно добавить /copy, чтобы получилась ссылка вида http://scrollkit.com/XXXXX/copy. Например, вы можете скопировать к себе мой скролл https://www.scrollkit.com/s/lexNnGE/copy и посмотреть, как были сделаны те или иные эффекты.

Основы

Чтобы начать работу, вам надо зайти на страницу http://scrollkit.com, залогиниться с помощью Facebook (или создать аккаунт на самом сайте), нажать на кнопку Compose и выбрать самый первый, пустой шаблон под названием Blank. Для лучшего понимания принципов работы Scrollkit вы также можете посмотреть, как устроены другие шаблоны.

Scrollkit позволяет создавать веб-страницу в виде свитка — длинной “колбасы” с прокруткой. Любая такая страница называется “скроллом”.

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

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

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

simple_draw

По умолчанию в “пустом” шаблоне уже создан первый, обычный стрип. В верхней части экрана находится панель инструментов. Первые пять кнопок слева направо позволяют вам добавить в стрип текст, форму (квадрат или круг), изображение, нарисовать что-то мышкой “от руки” или добавить интерактивные объекты. Последние скрываются под кнопкой с изображением кубика от конструктора ЛЕГО и пока могут представлять собой видео с YouTube, твит, кнопку, чтобы поделиться страничкой в твиттере, а также любой другой контент, встраиваемый через тег <iframe> (например, слайдшоу, интерактивный опрос, форму для сбора электронных адресов и т.д.). Отдельной кнопки для фейсбучного “лайка” нет, но он легко встраивается через этот самый iframe (код для такой кнопки можно получить здесь: https://developers.facebook.com/docs/plugins/like-button/).

lego

Добавлять новые стрипы можно кнопками в самом низу текущего скролла. “Add new strip” добавит обычный стрип, “Add new text strip” – текстовый, “Extend strip length” – увеличит высоту текущего стрипа.

Фон, слои, настройки

Следующие три кнопки на панели инструментов отвечают за фон стрипа (background), положение объектов и стрипов относительно друг друга (layers) и общие настройки вашего скролла (settings) соответственно. Остановимся на каждой из них в отдельности.

working_with_images

Фон может представлять собой сплошной цвет, изображение или видеоролик в формате MP4 (кодек H.264) или WebM.

Стоит отметить, что любые изображения, который вы планируете использовать в вашем скролле, стоит заранее загрузить на отдельный сервер или фотохостинг, так, чтобы у каждого файла была прямая ссылка на него. Как вариант, можно разместить их в вашем Dropbox’e (сервис для синхронизации файлов между разными устройствами). Главное потом не забыть и случайно не удалить из дропбокса фотографии, использованные в проекте.

У фоновых изображений может быть четыре положения: Center (картинка будет выровнена по центру экрана), Tile (экран будет заполнен повторяющимися картинками — этот вариант подходит, если вы используете текстуру или узор), Fill (экран будет максимально заполнен изображением, но поля будут обрезаны) и Fixed (картинка будет зафиксирована на экране, пока читатель не докрутит до следующего стрипа). Последний вариант размещения является наиболее эффектным для публикации крупных, красивых фотографий.

Видеоролики также следует размещать на сторонних хостингах. Для видео-фона следует подбирать оптимальное сочетание качества картинки и размера файла. Слишком сильно “ужатые” ролики с низким разрешением и артефактами будут смотреться некрасиво, слишком “тяжелые” — заставят пользователя долго ждать своей загрузки. Для любого видео-фона можно включить циклическое воспроизведение (параметр loop), автопроигрывание (autoplay), избавить от звука (muted), включить отображение кнопок управления роликом (controls) и наконец заставить ролик воспроизводиться только при прокрутке (start playing on scroll). Последний параметр стоит выбрать, если вы разместили видео-фон где-то в середине или конце скролла и не хотите, чтобы он начал играть раньше времени.

video_background

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

Во вкладке Extra в настройках фона вы можете указать так называемый linkable ID страницы — это пригодится, если вы планируете делать ссылку на определенный стрип вашего скролла. Это может пригодится, если вы хотите сделать оглавление с возможностью перехода на необходимую часть или, скажем, сделать кнопку “наверх” в самом конце вашего скролла. Напишите в поле Linkable ID любое слово латинскими буквами — например, top для самого первого стрипа. А в поле для ввода ссылки потом вам надо будет указать лишь #top.

linkable_id

 

anchor_link

Кстати, кликабельным можно сделать любой объект в вашем скролле — будь это текст, форма, картинка или что-то еще. Просто выделите этот объект, нажав на него, и кликните по кнопке link с изображением двух звеньев цепи в панели инструментов. Чтобы ссылка открывалась в новом окне, не забудьте поставить галочку в поле Open in New Window.

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

layers

Кнопка settings отвечает за общие настройки стрипа. Здесь вы можете указать заголовок страницы и ее описание — это поможет для лучшей индексации поисковиками. Также есть возможность указать внешний адрес для каскадных таблицей стилей и идентификатор Google Analytics — он поможет собрать статистику о посмотревших ваш скролл.

scroll_settings

Перед любым обновлением настроек не забывайте сохранять ваш стрип нажатием на кнопку Done в верхнем правом углу — и вообще, делайте это почаще, чтобы не лишиться важных изменений. Рядом с этой кнопкой вы также можете найти переключатели для отмены или повторения последних действий и просмотреть старые версии вашего скролла (кнопка в виде часов — history).

Во вкладке settings вы также можете изменить настройки приватности вашего скролла — сделать его доступным всем, только вам или по паролю.

Важная ссылка в этой же вкладке — export code. Она пригодится вам для экспорта готового скролла, который потом можно будет добавить прямо на ваш сайт. Scrollkit экспортирует три файла: каскадные таблицы стилей, ява-скрипт и сам html-файл с вашим скроллом.

Стоит отметить, что сервис не очень хорошо работает с кириллическими шрифтами. Поэтому после экспорта откройте html-файл с помощью любого текстового редактора (например, “Блокнот”) и добавьте внутри тега <HEAD></HEAD> следующую строчку:

<meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8”>

Работа с объектами

Помимо добавления ссылки, любой объект можно продублировать, нажав на кнопку duplicate, и поменять для него фон, нажав на отдельную кнопку background color. Для текста также можно менять шрифт (к сожалению, Scrollkit поддерживает всего 4 основных кириллических шрифта), размер, положение на странице, интерлиньяж и высоту, выделять его полужирным или курсивом.

У любого объекта, кроме текста, также можно задать ширину и высоту в пикселях, вписав соответсвующие значения в поля, помеченные буквами w и h.

Кнопка FX отвечает за спецэффекты. Всего доступно четыре эффекта: fade in (постепенное “проявление” объекта), rotate (вращение по кругу), shadow (интерактивная тень), flip (вращение вокруг собственной оси). Скорость каждого эффекта можно задать ползунком сверху, двигая его между параметрами fast (быстро) и slow (медленно).

special_fx

Вау-эффекты

Следующая кнопка на панели инструментов включает скрипт scrollr, который отвечает за так называемый параллакс-скроллинг, позволяющий создавать очень интересные эффекты на странице — те самые, которые вызывают у читателя вау-эффект.

Scrollr работает как для фона стрипа, так и для отдельных объектов на нем. Работа с ним довольно проста, хотя на первый взгляд кажется сложной. Скрипт предлагает создать две (или больше) позиции с разным состоянием объекта, а всю анимацию между ними он дорисует сам.

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

Давайте разберемся на конкретных примерах — попробуем сделать эффект затемнения экрана. При работе я рекомендую открывать сразу две вкладки браузера — одну с самим редактором, вторую — с готовым скроллом, чтобы можно было видеть изменения, так как параллакс-эффекты и видео-фоны не отображаются внутри редактора Scrollkit.

Создайте новый скролл и сделайте в нем два-три обычных стрипа. Выберите красный фон для самого первого стрипа. Нажмите на синий прямоугольник справа от стрипа, чтобы выбрать его, затем нажмите на кнопку scrollr.

parallax_background1

Прокрутите фон в крайнее верхнее положение и нажмите кнопку “+new rule”. Скрипт автоматически создаст правило с текущим состоянием фона. Нажмите кнопку Apply.

parallax_background2

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

parallax_background3

Никуда не прокручивая страницу, снова нажмите кнопку scrollr и затем “+new rule”. Снова нажмите Apply.

parallax_background4

Все готово: теперь, когда вы посмотрите на готовый скролл и покрутите его вверх-вниз, то увидите, как красный фон постепенно затемняется и высветляется обратно.

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

Теперь создадим эффект движущегося объекта, который к тому же увеличивается в размерах. На чистый стрип добавьте новый объект — допустим, обычный круг. Откройте scrollr и создайте первое правило (“+new rule”) в верхней точки прокрутки экрана. Нажмите Apply.

parallax_object

Теперь прокрутите экран пару раз вниз, перетащите круг по диагонали слева направо и увеличьте его размер, потянув за один из уголков рамки выделения. Снова нажмите кнопку scrollr, добавьте новое правило и нажмите кнопку Apply. Теперь сохраните ваш скролл, покрутите его вверх-вниз и посмотрите, как круг перемещается по диагонали по экрану, увеличиваясь в размерах.

parallax_object2

Обратите внимание, что вы и сами можете редактировать параметры объекта или фона внутри редактора scrollr, меняя переменные вроде top или left (положение относительно верхней и левой границы экрана), height и width (высота и ширина объекта) и другие. После нескольких экспериментов вы вполне освоитесь с этим скриптом и сможете использовать его для более сложных эффектов. Например, добавить в свой скролл панорамное изображение и прокручивать его слева направо во время просмотра. Или сделать эффект зуммирования на объект. Scrollkit даст вам настоящий просмотр для творчества — стоит только немного разобраться с его базовыми функциями.

Для мобильных устройств

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

Брендирование

Если вы хотите сделать кастомизированный хедер или футер для вашего проекта (так называются брендированные полоски внизу и наверху экрана) с логотипом или кнопками соцсетей, подобно тому, как это сделано в проекте “Silence of the wolves”, то вам нужно разместить их на отдельном стрипе в самом начале (для хедера) и самом конце (для футера) вашего скролла и задать для этого стрипа в scrollr следующие параметры:

Для хедера: position: fixed; z-index: 1000; width: 100%;
Для футера: position: fixed; z-index: 1000; width: 100%; bottom: 0px;

Обратите внимание, что вы не увидите, как они работают внутри самого редактора – только на «живом» скролле.

Дополнительно

Примеры журналистских материалов, сделанных на scrollkit:

http://gearpatrol.com/gp100/2013-awards/ — Лучшие предметы 2013 года по версии Gear Patrol (для каждого объекта была создана отдельная страница)

http://www.esquire.com/blogs/news/seven-days-with-syrian-rebels - Семь дней с представителями сирийского сопротивления

http://www.lansingstatejournal.com/interactives/isleroyalewolves.html - Проблемный материал об исчезновении популяции волков в Америке

http://pulya.ru/colorado — Мой рассказ о жизни в Колорадо