Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. ScrollMagic

Как сделать фиксированный сайдбар на странице с прокруткой с помощью ScrollMagic.js

by
Difficulty:IntermediateLength:ShortLanguages:

Russian (Pусский) translation by Anna Goorikova (you can also view the original English article)

В этом руководстве мы будем использовать ScrollMagic.js, чрезвычайно популярную библиотеку JavaScript для создания сайдбара, который становится фиксированным при прокрутке страницы. В трех шагах (HTML, CSS и JavaScript) мы рассмотрим весь процесс.

Вот что мы собираемся создать (ознакомьтесь с полноэкранной версией, чтобы почувствовать всю магию):

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

Что такое ScrollMagic.js?

Для лучшего описания ScrollMagic мы перейдем на страницу Github:

"Библиотека javascript для магической прокрутки.”

Созданный Jan Paepke, он может быть эффективно объединен с Greensock Animation Platform (GSAP) для создания сложных и привлекательных анимаций JavaScript. Чтобы лучше понять возможности ScrollMagic, ознакомьтесь с этим списком примеров и с этими учебниками и курсами на Tuts+.


Начало работы с ScrollMagic.js

Чтобы начать работу с ScrollMagic, сначала нужно включить его в свои проекты. Вы можете загрузить его, посетив репозиторий GitHub, используя диспетчер пакетов (например, npm) или загрузив необходимые ресурсы через CDN (например, cdnjs).

Для нашей демонстрации мы выберем последний вариант. Имея это в виду, если вы посмотрите на вкладку Settings нашего codepen, вы увидите, что я включил один внешний файл JavaScript:

Demo Set Up

Я также включил Babel для компиляции кода ES6 до ES5.

1. HTML

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

Вот разметка:

2. CSS

Мы не будем определять какие-либо специальные стили для нашего примера. Хотя интересно, что мы используем CSS grid для компоновки содержимого сообщения на средних экранах и выше (≤768px).

Вот часть CSS:

3. JavaScript

HTML и CSS на месте, теперь мы готовы изучить код JavaScript, ответственный за запуск ScrollMagic.

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

Вот наш код JavaScript:

Давайте кратко опишем необходимые действия:

  1. Начнем с создания контроллера.
  2. Затем мы создаем сцену с настраиваемыми опциями и добавляем ее в контроллер.
  3. Если ширина окна не менее 768 пикселей, а сайдбар достигает верхнего края окна просмотра, мы фиксируем его на время, определенное в сцене. В нашем случае желаемая продолжительность рассчитывается путем вычитания высоты поста из высоты содержимого сайдбара.
  4. При изменении размера окна мы проверяем его ширину. Если он уже, чем 768px, боковая панель остается частью нормального потока документов, в противном случае она становится фиксированной.

4. Поддержка браузера

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

Заключение

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

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

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.