JQuery перелистывание - эффект перелистывания страниц на jquery. Урок: перелистывание документа

CSS3 анимация перелистывания страниц

В буржунете я подсмотрел технику перелистывания страниц реализованную на CSS3. Очень эффектно! На основе этой техники я решил сделать свой пример демонстрацию такой CSS3 книги с анимацией перелистывания страниц.
В основе этой техники лежат такие CSS3 свойства как transform и transition а так же нестандартное использование тега input с флажком (checkbox). Реализация получилась кривенькая, потому как браузеры ещё полноценно не поддерживают самые эффектные CSS3 свойства в прямом виде. Но, благодаря , мы можем этими свойствами попробовать воспользоваться уже сейчас.
Получилось эффектно, радует то что возможно в скором будущем браузеры начнут понимать новые стандарты CSS3 и вебмастера смело смогут реализовывать подобную красоту на своих сайтах, стало возможно листать страницы на CSS3.
Пример лучше всего смотреть браузером Mozilla Firefox последней версии - работает всё без проблем. В Safari и Chrome пример работает, но уже со скрипом. Opera при анимации сжирает процессор, поэтому на слабых компьютерах пример просто не потянет. IE - это IE ради прикола можно и им посмотреть.
Смотрим браузером Mozilla Firefox - не портим впечатление!

Сodrops — это самый лучший блог по веб дизайну. На нём всегда можно найти много самых креативных вещей для веб дизайнера. Огромным плюсом является то, что ещё и рассказывают как прикрепить или сделать тот или иной эффект. Он очень популярен за рубежом, но почему то не столь сильно в русском интернете. В общем очень полезный сайт для дизайнера, там можно получить кучу вдохновения и много чему научиться, так как там действительно продвинутые CSS уроки.

Сегодня я Вам хочу представить 15 классных уроков с этого чудо сайта. Всё «фишки» совершенно бесплатны и Вы их с лёгкостью сможете скачать. Ну а сейчас давайте подробнее.

Так же Вам будут интересно вот это:

Динамическая сетка с красивой анимацией

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

Как сделать классные эффекты для картинок при наведении на CSS

В этом уроке рассказано как сделать супер эффекты при наведении на изображении. В примере есть целых 7 совершенно разных примеров, а так же инструкция, как сделать данное чудо на CSS.

Отличные кнопки с красивым эффектом на CSS

Множество примеров CSS кнопок с замечательным эффектом при наведении, эти кнопки по желанию можно изменить под Ваш вкус.

Как сделать пианино

Отличный урок, в котором рассказывается как сделать для сайта самое настоящее электронное пианино.

Красивый эффект при наведении для иконок

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

Эффектное перелистывание для блока

Тут Вы узнаете как сделать с помощью CSS эффектное перелистывание для блока. Так же присутствует целых совершенно разных 5 примеров.

Крутые примеры использования CSS анимации

Здесь 4 примера, которые подробно показывают на что способна CSS анимация.

Необычная форма поиска

Например я такого ещё не видел, например, Вы хотите поесть в ресторане, соответственно Вы ищете желаемый ресторан в Гугле, вписываю в поле поиска желаемое место. А теперь посмотрите как это можно реализовать на много креативней и удобней.

Как показать разные изображения для разных устройств

Тут Вы узнаете как реализовать показ разных картинок, в зависимости от того на каком устройстве просматривают Ваш ресурс.

Делаем адаптивное меню с поддержкой Ретина дисплеев

Отличный урок, в котором Вы узнаете как сделать красивое и адаптивное меню на CSS с поддержкой Ретина экранов.

Несколько CSS эффектов перелистывания для страниц

Красивые эффекты, с помощью которых можно реализовать полноэкранное перелистывание страниц

Эффект перелистывания страницы, наиболее часто создается с помощью Flash анимации. В интернете этот эффект набирает популярности в онлайн журналах и презентациях. Это связано с реализацией этого эффекта в ebook и мобильных устройствах.

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

HTML

Прежде всего нам нужно понять основы этого примера. Мы будем использовать простой дизайн странички, который совмещает HTML5 разметку и PHP в одном файле. Так будет проще понимать. Вы можете видеть результат выполнения ниже:

index.php

Здесь мы подключаем style. css , в head, и javascript файлы внизу. Далее мы подключаем еще 3 js файла: библиотека jQuery, turn.js, script.js, в котором мы будем инициализировать плагин и принимать события клавиатуры. PHP код, который мы напишем немножечко позже, будет выполнятся в #magazine div блоке. PHP будет генерировать странички нашего журнала, которые будут нужны для turn.js.

Как пример, вы можете посмотреть на три первых страницы журнала, сгенерированных с помощью PHP:

1 // 32 2 // 32 3 // 32

Код который вы видели, полностью лежит в блоке #magazine div. Это единственное, что нужно для turns.js. Вам не нужно создавать какие-то специальные классы или дата атрибуты для элементов, которые будут интерпретированы в странички. На этом мы готовы приступить к написанию PHP кода!

PHP

PHP будет соединяться с Intagram API, кешировать результаты, и генерировать разметку, которую вы видели выше.

Первым шагом будет регистрация Instagram девелоперского сайта. После чего вы получите client_ id ключ, который вставим как значение в переменную $instagramClientID , в файле index. php . Мы не нуждаемся в расширенной функциональности API, мы просто запросим наиболее популярные картинки. Это освободит нас от использования дополнительной OAuth аутентификации, которая только утруднит понимание кода.

Ниже пример JSON ответа текущих популярных картинок от Instagram. Я скрыл некоторые атрибуты, чтобы сделать код более понятным.

{ "meta": { "code": 200 }, "data": [{ "tags": ["beautiful", "sky"], "location": "null", "comments": { "count": 31, "data": [...] }, "filter": "Normal", "created_time": "1331910134", "link": "http:\/\/instagr.am\/p\/IPNNknqs84\/", "likes": { "count": 391, "data": [..] }, "images": { "low_resolution": { "url": "http:\/\/distilleryimage8.instagram.com\/03c80dd86f7911e1a87612313804ec91_6.jpg", "width": 306, "height": 306 }, "thumbnail": { "url": "http:\/\/distilleryimage8.instagram.com\/03c80dd86f7911e1a87612313804ec91_5.jpg", "width": 150, "height": 150 }, "standard_resolution": { "url": "http:\/\/distilleryimage8.instagram.com\/03c80dd86f7911e1a87612313804ec91_7.jpg", "width": 612, "height": 612 } }, "caption": { "created_time": "1331910148", "text": "Goodnight.\ue056", "from": { "username": "jent99", "profile_picture": "http:\/\/images.instagram.com\/profiles\/profile_6227738_75sq_1319878922.jpg", "id": "6227738", "full_name": "jent99" }, "id": "148395540733414783" }, "type": "image", "id": "148395420004568888_6227738", "user": { "username": "jent99", "website": "", "bio": "Mostly nature pics.\ue32b\ue32b\ue32b Hope you like them.\ue056\ue32a \ue334gi\ue334 ", "profile_picture": "http:\/\/images.instagram.com\/profiles\/profile_6227738_75sq_1319878922.jpg", "full_name": "jent99", "id": "6227738" } }, { /* Здесь идет больше фотографий... */ }] }

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

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

index.php

// Вы можете получить client ID из Instagram API страницы $instagramClientID = "-- вставьте свой client id ключ здесь --"; $api = "https://api.instagram.com/v1/media/popular?client_id=".$instagramClientID; $cache = "cache.txt"; if(file_exists($cache) && filemtime($cache) > time() - 60*60){ // Если файл кэша существует и он // свежее нежели 1 час, будем использовать его $images = unserialize(file_get_contents($cache)); } else{ // Создаем API запрос и генерируем файл кэша // Получаем 32 популярные фотографии на Instagram $response = file_get_contents($api); $images = array(); // Декодируем ответ и создаем массив foreach(json_decode($response)->data as $item){ $title = ""; if($item->caption){ $title = mb_substr($item->caption->text,0,70,"utf8"); } $src = $item->images->standard_resolution->url; $images = array("title" => htmlspecialchars($title), "src" => htmlspecialchars($src)); } // Удаляем последнюю картинку, но мы будем иметь // 32 картинки, когда добавим обложку array_pop($images); // Добавляем обложку в начале массива array_unshift($images,array("title"=>"Cover", "src"=>"assets/img/cover.jpg")); // Обновляем файл кэша file_put_contents($cache,serialize($images)); } // создаем разметку $totalPages = count($images); foreach($images as $i=>$image){ ?> " />