Автор

27 04.2013
PFold: Красивый эффект разворота бумаги

PFold: Красивый эффект разворота бумаги


 

Красивые эффекты заполонили сердца веб-мастеров, с выходом jQuery сайтостроение изменилось в корни, появились новые возможности, стали появляться различные плагины, подключив которые можно достичь невиданные ранее эффекты. Буквально на каждом сайте можно найти различные изображения, которые оформлены достаточно просто без всяких эффектов. В данном уроке мы рассмотрим как скрасить изображения и не только применив интересный плагин для разворота. PFold является очень экспериментальным jQuery плагином.

 

ДЕМО
ИСХОДНИКИ

 

Для браузеров, которые не поддерживают трансформации CSS 3D и переходы, для них будет выводится запасной вариант. В демонстрации мы рассмотрим несколько вариантов использования плагина.

Шаг 1. HTML

Для начала мы рассмотрим построение разметку, которая достаточно простая, нам понадобится контейнер с содержанием.

<div id="uc-container" class="uc-container">
 <div class="uc-initial-content">
 <!-- Начало содержания -->
 </div>
 <div class="uc-final-content">
 <!-- Конец содержания -->
 </div>
</div>

Теперь вызов самого плагина, для этого разместите ниже приведенный код в необходимом документе, заключив данный код в теги <script> и</script>.

$('#uc-container').pfold();

C разметкой закончили, теперь перейдем к следующему шагу.

Опции

Рассмотрим некоторые опции плагина которые можно настроить на свое усмотрение.

// Опции
$.PFold.defaults = {
 // perspective value
 perspective : 1200,

 // Скорость шага
 speed : 450,

 easing : 'linear',

 // Задержка между каждым шагом
 folddelay : 0,

 // Количество элементов
 folds : 2,

 // Направления каждлго шага
 folddirection : ['right','top'],

 // Имитация теней при накладке
 overlays : true,

 // Движения контейнеера, чтобы сохранить свое первоначальное значение
 centered : false,

 // Задаем различные скорости для разворота
 значение : [0 - 1]

 containerSpeedFactor : 1,
 containerEasing : 'linear',

 // Обратные вызовы
 onEndFolding : function() { return false; },
 onEndUnfolding : function() { return false; }
};

Каждый элемент расписан, более детально останавливаться не будем.

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

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


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

31 03.2013
PFold: Красивый эффект разворота бумаги

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


10 04.2013
PFold: Красивый эффект разворота бумаги

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


26 04.2013
PFold: Красивый эффект разворота бумаги

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


21 04.2013
PFold: Красивый эффект разворота бумаги

Сегодня мы рассмотрим еще один вариант слайдеров для сайта, все это имеет вид автоматического аккордеона с возможностью подписи изображений, а так же с возможностью выбора и нумерации слайда. Для всего этого мы будем использовать liteAccordion - небольшой плагин jQuery для быстрого создания горизонтального аккордеона. Он имеет размер ~1.4kb (в минимизированном варианте) и может выводить любые элементы HTML (изображения, тексты, видео, Flash..). Давайте посмотрим какой все это имеет вид..


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close