Ефект перевертання сторінок. Програми для перегортання сторінок. Як показати різні зображення для різних пристроїв

Можна використовувати будь-який контент, наприклад зображення або текст. Цей плагін створює галерею зображень, виконану у вигляді книги. Ідея полягає в тому, щоб перегортати вміст, як сторінки книг, і отримувати доступ до сторінок через меню бічній панелі, яке буде висуватися зліва. Налаштування налаштовується в сценарії. Хоча прокрутка має сенс для сенсорних пристроїв, перетягування буде виконуватися для звичайних браузерів. Ви бачили сайти, на яких фотографії співробітників перекинулися?

Ви наведіть курсор миші на зображення співробітника, і зображення перевернеться, щоб показати ім'я співробітника.

• Декомпресивні файл.
• Завантажте файл на свій сайт.

• Клас, який ми будемо називати пізніше в класі контейнерів з кроковим фронтом.
• Зображення для відображення за замовчуванням. назад контейнерний клас.
• Вміст, яке буде відображатися, коли відбувається фліп.

Усередині тега заголовка завантажте код нижче в порядку, зазначеному нижче. Відкрийте свій сайт в браузері, щоб побачити кінцевий результат. Наведіть курсор на зображення, щоб переглянути ефект горизонтального відображення. Вам потрібно завантажити його окремо. Ця бібліотека безкоштовна для особистого користування. Переворот сторінки цифрової книги - відмінний спосіб представити контент і залучити більше читачів. Як привести ефект повороту сторінки для ваших документів?

Створіть фліпбук з найкращим досвідом перегортання сторінок і книжковим інтерфейсом. Ви можете вручну гортати кожну сторінку книги або автоматично відтворювати її, насолоджуючись анімацією.

Підтримка декількох форматів імпорту. Визначте сторінку імпорту для всієї або частини сторінки.

Сумісність з сучасними браузерами та мобільними пристроями.



Ви можете безкоштовно завантажити і використовувати цю програму. Безкоштовні користувачі можуть завантажувати книгу в Інтернет.

По-перше, ви повинні переглянути і відкрити свій документ в панелі «Імпорт файлів», а потім натиснути кнопку «Імпортувати зараз».

Незвичайна форма пошуку

По-друге, виберіть шаблон в панелі шаблонів. По-третє, зробіть чудову тему з унікальним фоном і кольором кнопки матчу. Якщо ви хочете заощадити час, в програмі передбачено безліч встановлених тем. По-четверте, цей крок є необов'язковим. Просто відкрийте панель «Закладка», щоб змінити назву для кожної сторінки. Нарешті, давайте завантажимо онлайн і поділимося створеної нами фліп-книгою з людьми.

Основний функціональністю буде створення нового типу галереї на основі декількох зображень і їх розмірів за допомогою короткого коду. Кращий спосіб  побачити його в дії - це встановити його самостійно. Встановіть і активуйте плагін, тоді все, що вам потрібно зробити, це додати короткий код на сторінці, наприклад.

І це той результат, який ви отримаєте. Але яка чорна магія триває? Ну, насправді це досить просто. Давайте навчимося створювати щось на зразок цього. на даний момент  було б здорово, якби у вас була тестова середовище, тому ви можете зламати і протестувати матеріал. Файл та папка повинні мати просте і унікальне ім'я, тому ви уникнете конфліктів з існуючими плагінами. Тоді основний зміст нашого файлу виглядає приблизно так.

Тепер нам потрібно включити деякі важливі зовнішні активи. Необхідними зовнішніми файлами для базових функцій  є. Якщо ви просто додасте теги сценарію і стилю, у вас з'являться деякі проблеми. Ми викликаємо зовнішні елементи трьома різними способами: ось вони.

Однією з важливих речей, які ви повинні враховувати при виклику зовнішніх скриптів, є наявність більшої кількості коду, який буде залежати від цього плагіна. Це в основному визначає, чи буде ваш файл викликатися в колонтитулі.

Почнемо з дії зі створення короткого коду. Це досить просто, вам просто потрібно додати тригер короткого коду і функцію, яка буде виконана. Тепер нам потрібно створити нашу функцію і отримати наші атрибути. Але деякі атрибути можуть бути необов'язковими, а це значить, що нам потрібно буде створити для них значення за замовчуванням.

Ви можете побачити їх у дії в першій частині нашої функції. Ще один важливий момент тут - відрегулювати розмір, якщо ми використовуємо стиль журналу. Тепер ви можете налаштувати і змінити це, як хочете, додавши додаткові параметри, відредагувавши те, що не працює для вас, або об'єднавши це з іншими плагінами.

Може бути, ви хочете навчитися робити? Як електронна книга повинна сподобатися користувачеві? З такою кількістю високоякісних читачів на ринку сьогодні, схоже, ця функція досить добре зрозуміла. Однак ми задавалися питанням, чи буде мати можливість налаштовувати сприйняття електронного читання. Будуть ті, хто просто хоче якомога швидше перейти на наступну сторінку. Тоді були б ті, хто хотів би, щоб сторінка перетворювалася так само, як в друкованій формі.

Налаштування еталонної площини

Ви коли-небудь помічали це, коли читаєте друковану книгу, деякі люди м'яко ковзають по сторінці, коли читають, а інші перевертають сторінку з більш агресивним маневром? Якщо ви віддаєте перевагу пропустити деталі, в нижній частині сторінки є інтерактивна демонстрація. Перше, що нам потрібно було встановити, було точкою відліку для алгоритму повороту сторінки. Оскільки наш алгоритм повністю спирається на плоску геометрію, було б непогано налаштувати нашу посилання, використовуючи тільки два виміри.

Верхня фігура на малюнку справа являє собою стандартну тривимірну систему координат з «сторінкою» з гіпотетичної книги. Ефект, проте, не є візуально привабливим, але насправді досить незручним і жорстким, як якщо б у вашій книзі були картонні сторінки. Отже, алгоритм стає однією з простих геометрій Евкліда. Який трикутник ви надаєте на перетині, повністю залежить від виду ефекту повороту сторінки ми вирішили розробити наш алгоритм таким чином, щоб перетин двох сторінок сформувало рівнобедрений правий трикутник.

Круті приклади використання CSS анімації

Можна було також використовувати інші тристоронні геометричні фігури, які можуть забезпечити ще більш цікавий візуальний ефект, але рівнобедрені праві три кут, мабуть, найпростіший і, можливо, найпростіший для ілюстрації. За замовчуванням це центр сцени. Якщо ви хочете, щоб до обертання зверталися посилання на будь-яку іншу точку, вам потрібно буде налаштувати проекційну перспективу. Трикутник має дві рівні сторони. Крім того, ми масштабується ширину кожної сторінки відповідно до її кутом повороту від її вихідного положення.

Якщо ви нормалізуете це, помноживши всі три сторони на √2, ви бачите, що у нас є ставлення сторін, про який ми згадували вище для правильного рівнобедреного трикутника. У цей момент наступна сторінка починає свій «завиток» по поточній сторінці, коли ми намагаємося захопити зовнішній вигляд і поворот сторінки в книзі. Одне зауваження і яке ви побачите в інтерактивна демонстрація, полягає в тому, що нам потрібно було додати фіктивні прямокутники, щоб відобразити самі прямокутники сторінок.

Формування правильного трикутника рівнобедреного

Як тільки сторінки перетинаються, і наступна сторінка починає «завивати» над поточною сторінкою, нам потрібно мати спосіб обчислити не тільки масштабування наступної сторінки, але і правильне розташування масок, які дозволяють таку сторінку щоб переглянути або приховування поточну сторінку, яка затінена. За допомогою ілюстрації праворуч ми сподіваємося, що зможемо зробити це ясно.

Тому ми вирішили спростити математику з наближенням, яке мало візуально. Між кінцевими точками різниця ледь помітна. Це залишає нам вираз для ширини маски, яке «розкриває» наступну сторінку. Також масштабування наступної сторінки так, що вона повертається до своєї повної ширині до моменту, коли поворот завершений - це просто питання «реверсування» того, що ми зробили, коли кут повороту був менше 45 °. Навіть якщо ви хочете повернути свої маски в третьому вимірі, ви не могли б зробити так, щоб флеш просто відображав графіку так, як ніби маски не було.

Це основна причина, по якій ми додали фіктивні прямокутники фіксованої ширини, щоб імітувати рух фактичних сторінок і надати чітко визначену «підказку» для масок, щоб зафіксувати їх положення відносно. Для створення ефекту ми будемо використовувати шар коригування колірної заливки, маску шару градієнта і деформацію.

Ви можете застосувати цей ефект до існуючого зображення, або ви можете застосувати його до блоку кольору, який ви можете використовувати на бічній панелі на веб-сайті, наприклад. Важливо, щоб зображення собаки було самим нижнім шаром в стеці. Якщо є фоновий шар, просто видаліть його, щоб у вас був тільки один шар. Результат повинен бути приблизно таким.

Буде обрана тільки маска шару. Тепер ви повинні побачити невелику сітку опорних точок в нижньому лівому кутку зображення. У ці дні подібні речі траплялися з книгами, майже ніхто не читав книги, зроблені з паперу, тому що набагато простіше читати електронну книгу, яка стоїть в основному як обкладинка книги, або безкоштовне завантаження. Але якщо ми торкаємося цін; електронні книги дешевше, ніж паперові книги, а деякі читачі книг коштують менше, ніж вся паперова книга.

Реабілітація вашого сайту

Замість того, щоб відображати весь текст, посилання і зображення на довгій нудною сторінці, ви можете зробити презентацію більш інтерактивною і анімованої з ефектами фліп-сторінок. Деякі з рудиментарного коду, такі як оголошення змінних і підписка Прослуховувач подій, були виключені з фрагментів в цій статті, тому не забудьте посилатися на робочий приклад. Джо Ламберт пропонує вам створити приголомшливий ефект повороту сторінки, щоб поліпшити галерею зображень в портфоліо.