—»     —»   Создаем невероятные эффекты скроллинга с помощью Stroll.js
  Раздел: Java-Скрипты, CSS/Style Sheets   Нет комментариев  

Создаем невероятные эффекты скроллинга с помощью Stroll.js



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

Именно в таких случаях на помощь приходит Stroll.js. Очень простая в использовании библиотека, которая в значительной степени упрощает процесс создания невероятных эффектов прокрутки. Все, что вам нужно сделать, это вставить несколько строчек кода javascript, все остальное управляется за счет HTML и CSS. Если вам интересно, продолжайте читать, и мы расскажем вам о том, как это работает.

Создаем невероятные эффекты скроллинга с помощью Stroll.js

Знакомство с Stroll.js

Stroll.js – это небольшая JS-библиотека, которая позволяет вам создать привлекательные анимации, и применить их к прокрутке. Суть заключается в том, что у вас есть группа пунктов в прокручиваемом списке, и вы используете Stroll.js для того, чтобы сделать прокрутку более привлекательной.

Создаем невероятные эффекты скроллинга с помощью Stroll.js

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

Давайте создадим собственное демо!

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

Демо: нажмите, чтобы запустить.

HTML

Начнем с того, что нам известно, что у нас будет список, так как вокруг всего этого и вертится Stroll.js: анимировать прокручиваемые списки. В демо пункты списка представляли собой простые строки текста, но нам хотелось зайти дальше, и посмотреть, как Stroll.js, будет вести себя в реальной ситуации. Мы сделали так, чтобы каждый пункт списка содержал изображение, заголовок и текст.

Если вы используете Zen Coding, как мы, то впишите следующее в ваш HTML-редактор (либо можете ввести это вручную).

ul>li>img+h2+p

Как видно, мы начали с неупорядоченного списка, а затем задали ему дочерние пункты, которые содержат в себе три элемента, о которых мы уже говорили.

Когда вы нажимаете на вкладку (или что там у вас в вашем редакторе), она раскрывает нам следующий HTML:

<ul>
<li>
<img src="">
<h2></h2>
<p></p>
</li>
</ul>

Если мы пороемся в документации, то увидим, что тип эффекта основан на примененном к неупорядоченному списку классу. Для начала мы используем эффект «flip». Также javascript будет определять родительский пункт списка, поэтому нам нужно его создать.

<div id="main">
<ul class="flip">
<li>
<img src="">
<h2></h2>
<p></p>
</li>
</ul>
</div>

Далее нам понадобится наполнить контент внутри пункта списка. Мы используем изображение, заголовок и текст-наполнитель.

<div id="main">
<ul class="flip">
<li>
<img src="http://lorempixum.com/200/200/city/1">
<h2>Headline One</h2>
<p>Lorem ipsum dolor sit...</p>
</li>
</ul>
</div>

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

<div id="main">
<ul class="flip">
<li>
<img src="http://lorempixum.com/200/200/city/1">
<h2>Headline One</h2>
<p>Lorem ipsum dolor sit...</p>
</li>
<li>
<img src="http://lorempixum.com/200/200/city/2">
<h2>Headline Two</h2>
<p>Lorem ipsum dolor sit...</p>
</li>
<li>
<img src="http://lorempixum.com/200/200/city/3">
<h2>Headline Three</h2>
<p>Lorem ipsum dolor sit...</p>
</li>
<li>
<img src="http://lorempixum.com/200/200/city/4">
<h2>Headline Four</h2>
<p>Lorem ipsum dolor sit...</p>
</li>
<li>
<img src="http://lorempixum.com/200/200/city/5">
<h2>Headline Five</h2>
<p>Lorem ipsum dolor sit...</p>
</li>
<li>
<img src="http://lorempixum.com/200/200/city/1">
<h2>Headline Six</h2>
<p>Lorem ipsum dolor sit...</p>
</li>
<li>
<img src="http://lorempixum.com/200/200/city/1">
<h2>Headline Seven</h2>
<p>Lorem ipsum dolor sit...</p>
</li>
<li>
<img src="http://lorempixum.com/200/200/city/8">
<h2>Headline Eight</h2>
<p>Lorem ipsum dolor sit...</p>
</li>
</ul>
</div>

Проверка прогресса

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

Создаем невероятные эффекты скроллинга с помощью Stroll.js

CSS

Основа

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

/*Basic Styles*/
* {
margin: 0px; padding: 0px;
}
body {
background: #333;
}

Изображения

Что касается оформления изображений, то здесь мы добавим поле толщиной в 20 пикселей для того, чтобы было немного пространства, а также параметр border-radius равный 50% (не забудьте про браузерные префиксы), чтобы миниатюры были круглыми. Мы также выстроим изображения по левому краю, чтобы текст отображался сбоку от них, а не под ними.

/*Images*/
img {
float: left; margin-right: 20px; border-radius: 50%;
}

Шрифты

Что касается шрифтов, то здесь нам надо обозначить стили h2 и для paragraph. Мы использовали полужирный шрифт без засечек для заголовков, и стандартное оформление тэга paragraph со шрифтом с засечками. Также обращаем ваше внимание на то, что для paragraph мы используем несколько более светлый шрифт.

/*Type*/
h2 {
margin-top: 25px; font: bold 30px Helvetica, Arila, sans-serif; color: #000;
}
p {
font: 13px/1.5 Georgia, Times, serif; color: #757575;
}

Список

Мы подобрались к самому большому кусочку кода CSS – финальной части, которая сделает идеальными наши пункты списка. Выставляем позиционирование на относительное, ширину на 800 пикселей, а высоту – на 510. Затем применяем поля и отступы, а также необходимо убедиться в том, что параметр list-style выставлен на None.

Обязательно нужно уделить внимание перенаполнению (overflow). Выставите overflow-x на hidden, и overflow-x на scroll, так как наш список должен быть прокручиваемым.

/*List Styles*/
ul {
position: relative; width: 800px; height: 510px; margin: 50px auto; padding: 0; list-style: none; overflow-x: hidden; overflow-y: scroll;
}

Теперь, когда вы почти закончили работу над оформлением нашего неупорядоченного списка, пришло время выставить стили для пунктов списка (list-item). Опять же, выставляем позиционирование (relative), высоту на 200 пикселей, отступы (Padding) на 20 пикселей. Затем выставляем цвета для фона и шрифтов, указываем параметру overflow значение auto, а параметр z-index выставляем на 2.

Сложность здесь заключается во втором селекторе. Мы используем nth-child(odd) для того, чтобы разнообразить цвета каждого пункта списка, что позволяет нам выделить их среди текста. Это не поддерживается в IE, но и Scroll.js также не поддерживается, поэтому мы все равно им воспользуемся. Тем не менее, не забудьте использовать Selectivizr для того, чтобы повысить уровень поддержки ваших селекторов. В целом, если эффекты прокрутки не поддерживаются практически ни в одном браузере, то вам нужно постараться расширить поддержку хотя бы остального визуального оформления.

ul li {
position: relative; height: 200px; padding: 20px; background: #eee; color: #252525; z-index: 2; overflow: auto;
}
ul li:nth-child(odd) {
background: #fff;
}

Проверка прогресса

Большая часть работы уже проделана! Наш список выглядит впечатляюще, и все, что нам осталось сделать, это оживить его посредством javascript. Это будет не сложно, поверьте нам!

Создаем невероятные эффекты скроллинга с помощью Stroll.js

javascript

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

На самом деле, вам нужно лишь скопировать и вставить небольшой отрывок кода javascript, чтобы все заработало.

Вставьте следующий код в конец тела вашего HTML-документа.

<script src="js/stroll.min.js"></script>
<script>
stroll.bind( '#main ul' );
</script>

Видите? Не так уж и плохо. Все, что вам осталось сделать, это оформить его и убедиться в том, что вы использовали правильный ID. В нашем проекте мы использовали #main, но вы можете использовать собственные обозначения.

Оно ожило!

На этом мы закончили разработку! Для того чтобы изменить эффект, вам нужно просто применить другой класс к неупорядоченному списку. В нашем демо мы использовали flip, curl и tilt.

Демо: нажмите, чтобы запустить.

Создаем невероятные эффекты скроллинга с помощью Stroll.js

Что думаете?

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

Пожалуйста, прокомментируйте руководство, если вам есть что сказать.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: javascript, CSS
Опубликовал Design FactoRy   Прочитано (раз): 7789   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930