Привіт, дорогі читачі. Якось раз я викладав скрипт книги на сайт. Але це було дуже давно. Нещодавно нарвався на дуже цікаве рішення реалізації книги на сайті. Легкий, інтуїтивно-зрозумілий скрипт в мінімалістичному стилі. Тут нічого складного немає, як в налаштуванні цього скрипта, так і в його використанні відвідувачем сайту.
Коротко розповім про саму книгу
У верхньому лівому куті розташовані кнопки навігації. Ви інтуїтивно розумієте, що після того, як закінчився скролл і внизу більше нічого немає, потрібно натиснути або кнопочку вправо, або на іконку «меню». При натисканні стрілочки вправо відбудеться ефект перегортання без перезавантаження сторінки (в html всі сторінки йдуть в одному файлі). Якщо ви натиснете на кнопку, якою зазвичай позначають кнопку мобільного меню - відкриється, які випливають зліва, меню. Натиснувши на один з пунктів ви також побачите перегортання сторінки.
Верхнє меню фіксовано у верхній частині екрану, так що читач завжди буде бачити елементи навігації. Ще дуже здоровское дизайнерське рішення - це плавне засветления контуру верхнього меню. Це дійсно готовий скрипт читалки, як під комп'ютери, так і під мобільні девайси.
Установка скрипта читалки
- скачайте архів
- Залийте в корінь сайту папки css і js
- Також в корінь сайту можете залити файл index.html, якщо у вас буде на сайті тільки ця читалка
Якщо ж ви хочете вставити цю читалку в уже готовий сайт, то Вам потрібно:
- Виконати 2 перших пункту
- Підключити в head стилі і обробник html5
- Вставити сторінки в html код
- Підключити скрипти внизу сайту
Але скажу Вам чесно, якщо ви завантажуєте цю читалку, то краще все таки її залишити таким, яким воно зараз. Ну максимум змінити кольори кнопок, поміняти шрифт, відступи і так далі. А ось заливати цей скрипт в уже готовий сайт собі дорожче обійдеться. Там можуть бути конфлікти скриптів, стилів і дизайну. На цьому у мене все! Всім добра!