Автор

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

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

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


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

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


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

Простой скрипт часов для сайта. Демонстрацию вы мошете увидеть в верхней части нашего сайта (используется 24 часовой формат времени).


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close