Автор

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

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

В данной заметке представляю весьма элегантный способ это сделать. Реализация с помощью небольшого скрипта jQuery, который позволяет плавно прокрутить страницу как вверх, так и вниз. Плюс простое решение на CSS для кнопок "Вверх" и "Вниз", без картинок.

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


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

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


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close