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

В данном уроке мы рассмотрим как реализовать альбом изображений с эффектом переворота страниц. Мы будем выбирать самые популярные изображения из сервиса Instagram, и использовать их в качестве страниц. Кроме этого мы будем использовать PHP, CSS3 и HTML5. И так, приступим.

Шаг 1. HTML

Для начала мы должны создать основную разметку, которая будет сочетать в себе HTML5 и PHP для большей простоты, кроме этого нам необходимо подключить скрипты и стили.

index.php

Мы подключаем стили styles.css в шапку документа. В конце документа подключены библиотека JQuery, turn.js и script.js, где мы будем инициализировать плагин и подключим управления с помощью клавиатуры. PHP код, который мы будем писать в следующем разделе, будет присоединен  к  #magazine div. PHP код необходим для оформления журнала изображений.

Здесь разметка первых трех страниц журнала.

Сгенерированный код

Шаг 2. PHP

В PHP будет возложена задача общения с API Instagram,  кэширования результатов и генерации разметки вы видели в разметке выше.

В первую очередь, нужно зарегистрироваться на Instagram developer. После получения вашего client_id ключа, поместить его в index.php в качестве значения $ instagramClientID .

Вывод популярных изображений

В API будет ограничено возвращение количество фото, их будет только 32, но это много для нашего примера. Вы можете просмотреть, что каждая фотография имеет три размера, но мы будем нуждаться только в стандартной.

PHP будет кэшировать результаты вызова API так как мы послали на сервер Instagram только один раз в час. Это позволит сделать наше приложение более гибким и ограничить количество вызовов.

index.php

Обратите внимание на вызовы array_pop и array_unshift. Они необходимы, чтобы освободить место для пользовательских изображений обложки, которая хранится в assets/img.

Шаг 3. jQuery

Использование turn.js очень просто. Мы уже создали разметку, нам необходимо вызвать свойство turn().

assets/js/script.js

Со скриптом закончили, теперь надо это все красиво оформить.

Шаг 4. CSS3

Мы должны установить четкие размеры журнала и стиль страницы и номер страницы. turn.js будет справиться со всем остальным.

assets/css/styles.css

Этот пример работает во всех современных браузерах - Firefox, Chrome, Safari, Opera и даже IE. Он удобен, даже на IOS и Android.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: