ПОДЕЛИТЬСЯ

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

Одним из самых эффектных свойств сайта ffmark.com является размытый текст и видео на заднем фоне, которые видит посетитель сразу же при посещении сайта. По мере того, как пользователь вращает колесо мыши вниз, надпись, которая изначально была видна четко, размывается, а замутненное видео и текст на заднем фоне наоборот приобретают фокус. Эффект размытия достаточно просто осуществить, для этого нужно всего лишь использовать свойство «-webkit-filter: blur(32px);». Рассмотрим другой способ достижения похожего результата, используя эффекты затемнения и прозрачности элементов страницы.

Итак, цель нашей работы – добиться того, чтобы по мере того, как пользователь осуществляет скроллинг страницы, находящиеся в фокусе элементы переднего плана становились размытыми, а элементы заднего фона наоборот – приобретали четкость. Для начала более подробно рассмотрим главную страницу сайта ffmark.com. Мы можем выделить несколько важных элементов (Рисунок 1):

a. Информационная иконка, при наведении курсора на которую высвечивается сообщение-подсказка о том, что необходимо прокручивать страницу вниз, кликнуть на красную стрелочку внизу страницы или использовать соответствующие кнопки со стрелками на клавиатуре;

b. Большая красная надпись находится в фокусе, в то время как видео и текст на заднем плане размыты;

c. По мере того, как пользователь осуществляет скроллинг страницы, видео и текст не изменяют своего места положения, при этом основная красная надпись размывается, а контент на заднем плане становится резче;

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

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

Приступим непосредственно как практике.

1. Основные элементы страницы.

Начнем наш проект с создания CSS-кода, который можно поместить в начало HTML-документа или отдельный файл. Сделаем текст на нашей странице достаточно крупным и жирным – это отличная идея, учитывая, что мы планируем в дальнейшем размывать его.

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

Рисунок 2. 4407876_Рисунок 2

2. Привязка библиотеки Scrollr.

Переместимся в секцию BODY нашего HTML-файла и найдем тэг DIV с идентификатором intro для того, чтобы поместить туда наш текст. Добавим внутрь него еще один тэг DIV, содержащий информацию, которая будет подхвачена скриптом JavaScript из библиотеки Scrollr (github.com/Prinzhorn/skrollr), добавляемую нами на заключительных этапах работы над проектом.

Рисунок 3. 4407876_Рисунок 3

3. Фоновый текст.

Мы подготовили текст, который будет размываться по мере того, как пользователь вращает колесо мыши. Теперь займемся текстом, резкость которого будет в то же самое время увеличиваться. Определим значение 32px для свойства text-shadow при скроллинге в 0px и будем уменьшать его до нуля по мере того, как значение скроллинга будет увеличиваться до 1000px. В конечном итоге мы скроем основной текст, оставив видимой лишь его тень.

Рисунок 4. 4407876_Рисунок 4

4. Последние штрихи.

Скачайте библиотеку Scrollr по приведенной выше ссылке и скопируйте папку dist в свою локальную папку. Затем прежде, чем закрыть тэг BODY, добавьте приведенный ниже код, чтобы привязать библиотеку к проекту. Теперь сохраните документ и откройте его в браузере, чтобы увидеть результаты Вашей работы в действие.

4407876_Рисунок 5

ПОДЕЛИТЬСЯ