Как сделать перелистывание страниц онлайн
Эффект перелистывания — это когда страницы документа на сайте переворачиваются, как в журнале: за угол мышью, свайпом или кнопкой. Сделать его можно четырьмя способами: загрузить PDF в онлайн-сервис, собрать листалку на JS-библиотеке, написать анимацию самому или выгрузить HTML из настольной программы. Ниже — чем они отличаются по объёму работы и что придётся делать после публикации.
Что входит в перелистывание, кроме анимации
Загиб страницы — самая заметная и самая простая часть. Чтобы PDF было удобно читать в браузере, нужно ещё:
- превратить страницы PDF в картинки или HTML, которые браузер покажет быстро;
- подгружать страницы по мере листания, а не весь документ сразу — иначе каталог на сотню страниц долго открывается на телефоне;
- сделать зум, полноэкранный режим и переход к нужной странице;
- поддержать жесты на телефоне: свайп, зум щипком;
- сохранить ссылки из PDF кликабельными;
- разместить всё это на хостинге и обновлять, когда выходит новая версия документа.
Способы отличаются тем, какую часть списка вы берёте на себя.
Способ 1. Онлайн-сервис
Вы загружаете PDF, сервис сам разбивает его на страницы, собирает плеер и выдаёт ссылку и код для сайта. Программировать не нужно, хостинг и работа на телефонах — на стороне сервиса.
Подходит, когда документ нужно опубликовать сегодня и потом обновлять без разработчика: каталоги, прайсы, меню, журналы. Минусы — подписка и зависимость от сервиса: файлы и ссылки живут у него.
Способ 2. JS-библиотека
Анимацию берёт на себя готовая библиотека. StPageFlip распространяется по лицензии MIT, работает без зависимостей и листает как картинки на canvas, так и HTML-блоки. Turn.js сделан плагином для jQuery; по лицензии BSD открыта основная версия, а возможности четвёртого релиза в неё не входят.
Сам PDF эти библиотеки не читают. Страницы нужно заранее сконвертировать в картинки или рисовать в браузере через PDF.js — открытую библиотеку Mozilla для разбора и отображения PDF. Подгрузку страниц, зум, поиск, мобильную вёрстку и хостинг вы делаете сами.
Это путь для разработчиков, которые встраивают листание в свой продукт и готовы его поддерживать.
Способ 3. Своя анимация на CSS или canvas
Повернуть блок вокруг корешка можно 3D-трансформациями CSS — для открытки или обложки из двух-трёх страниц этого хватит. Загиб угла вслед за курсором, тени, жесты и плавность на длинном документе — это уже собственная библиотека из способа 2. Своя анимация оправдана, когда листание — часть дизайна сайта, а не способ показать PDF.
Способ 4. Программа с экспортом в HTML
Настольные программы конвертируют PDF в папку с HTML-файлами, которую вы выкладываете на свой хостинг. Файлы остаются у вас. Зато каждую правку придётся заново экспортировать и загружать, а статистику просмотров — подключать отдельно.
Сравнение способов
| Способ | Что нужно уметь | Где файлы | Как обновить документ |
|---|---|---|---|
| Онлайн-сервис | Загрузить PDF, вставить код на сайт | У сервиса | Загрузить новый PDF в кабинете |
| JS-библиотека | JavaScript, подготовка страниц, хостинг | На вашем сервере | Заново подготовить страницы и выложить |
| Своя анимация | JavaScript и CSS на уровне автора библиотеки | На вашем сервере | Вручную |
| Программа с экспортом | Работа с хостингом | На вашем сервере | Экспортировать и загрузить заново |
Когда перелистывание не нужно
Эффект уместен для документов, свёрстанных разворотами под печать: каталогов, журналов, брошюр, меню. Длинный текст без вёрстки — инструкцию, договор, статью — на телефоне удобнее прокручивать, чем листать, и для него хватит обычного PDF или HTML-страницы. То же с файлами, которые скачивают, чтобы распечатать или заполнить.
Короткий путь в BookFlip
BookFlip — сервис из первого способа. После регистрации (14 дней бесплатно, без банковской карты) откройте «Флипбуки», нажмите «Добавить флипбук» и перетащите PDF. Когда обработка закончится, на вкладке «Интеграция» будут прямая ссылка, QR-код и код для сайта: скрипт, попап или iframe.
Что сервис берёт на себя из списка выше:
- страницы подгружаются по мере листания, поэтому большой каталог открывается без ожидания всего файла;
- на телефоне работают свайп и зум щипком, на компьютере — зум колесом мыши;
- ссылки из PDF остаются кликабельными;
- если в PDF есть текст, а не только сканы, по нему работает поиск, а на компьютере текст можно выделить и скопировать;
- новую версию PDF загружают на вкладке «Файлы» флипбука — ссылка и код на сайте не меняются.
Все шаги с названиями кнопок — в инструкции Как создать флипбук из PDF, варианты встраивания — в статье Листалка PDF для сайта.
Читайте также
- Как создать флипбук из PDF — пошаговая инструкция по интерфейсу BookFlip
- Листалка PDF для сайта — как встроить документ в виде флипбука — скрипт, попап, iframe и свой домен
- Книга с перелистыванием страниц — как такую книгу читают: жесты, зум, поиск
- Каталог с перелистыванием страниц — поиск по артикулу и обновление цен без новой ссылки
Источники
- StPageFlip на GitHub — возможности и лицензия MIT, проверено 24.09.2026
- Turn.js — требования и лицензия, проверено 24.09.2026
- PDF.js — библиотека Mozilla для отображения PDF, проверено 24.09.2026