Эффект переворота при клике или наведении мыши

Красивый эффект позволит вам открывать информацию в блоке при событии пользователя.

FlipClick и переворот блока


JQuery и плагины, написанные на нем, дают нам возможность улучшить юзабилити web-страниц и представить пользователю информацию в привлекательной форме. Спасибо энтузиастам, которые пишут и выкладывают в открытый доступ огромное количество таких библиотек.
Сегодня мы расскажем о плагине FlipClick, созданном Jon Raasch. Скачать его можно здесь. Он позволяет реализовать эффект поворота карточки обратной стороной в нескольких вариантах по любому событию.

Поворот по клику


Добавьте на свою страницу блок и в нем разместите два виджета «HTML-код». В первый скопируйте скачанную библиотеку QuickFlip. Ниже приведен код минимальной версии, без форматирования. Это позволяет сократить время его обработки и повысить скорость страницы.
<script>
(function©{var a=false,b=null;c.quickFlip={wrappers:[],opts:[],objs:[],init:function(d,f){var d=d||{};d.closeSpeed=d.closeSpeed||180;d.openSpeed=d.openSpeed||120;d.ctaSelector=d.ctaSelector||".quickFlipCta";d.refresh=d.refresh||a;d.easing=d.easing||"swing";d.noResize=d.noResize||a;d.vertical=d.vertical||a;var g=typeof(f)!="undefined"?c(f):c(".quickFlip"),h=g.children();if(g.css("position")=="static"){g.css("position","relative")}var e=c.quickFlip.wrappers.length;h.each(function(i){var k=c(this);if(d.ctaSelector){k.find(d.ctaSelector).click(function(j){j.preventDefault();c.quickFlip.flip(e)})}if(i){k.hide()}});c.quickFlip.opts.push(d);c.quickFlip.objs.push({$box:c(g),$kids:c(h)});c.quickFlip.build(e);if(!d.noResize){c(window).resize(function(){for(var j=0;j<c.quickFlip.wrappers.length;j++){c.quickFlip.removeFlipDivs(j);c.quickFlip.build(j)}})}},build:function(f,h){c.quickFlip.opts[f].panelWidth=c.quickFlip.opts[f].panelWidth||c.quickFlip.objs[f].$box.width();c.quickFlip.opts[f].panelHeight=c.quickFlip.opts[f].panelHeight||c.quickFlip.objs[f].$box.height();var e=c.quickFlip.opts[f],g={wrapper:c.quickFlip.objs[f].$box,index:f,half:parseInt((e.vertical?e.panelHeight:e.panelWidth)/2),panels:[],flipDivs:[],flipDivCols:[],currPanel:h||0,options:e};c.quickFlip.objs[f].$kids.each(function(k){var i=c(this).css({position:"absolute",top:0,left:0,margin:0,padding:0,width:e.panelWidth,height:e.panelHeight});g.panels[k]=i;var l=d(g,k).hide().appendTo(g.wrapper);g.flipDivs[k]=l;g.flipDivCols[k]=l.children()});c.quickFlip.wrappers[f]=g;function d(i,p){function o(q,t){var r=c("<div></div>"),s=q.panels[t].clone().show();r.css(l);r.html(s);return r}var n=c("<div></div>"),j=i.panels[p].html(),l={width:e.vertical?e.panelWidth:i.half,height:e.vertical?i.half:e.panelHeight,position:"absolute",overflow:"hidden",margin:0,padding:0};if(e.vertical){l.left=0}else{l.top=0}var m=c(o(i,p)).appendTo(n),k=c(o(i,p)).appendTo(n);if(e.vertical){m.css("bottom",i.half);k.css("top",i.half);k.children().css({top:b,bottom:0})}else{m.css("right",i.half);k.css("left",i.half);k.children().css({right:0,left:"auto"})}return n}},flip:function(g,q,l,r){function h(j,i){j=j||{};i=i||{};for(opt in j){i[opt]=j[opt]}return i}if(typeof g!="number"||typeof c.quickFlip.wrappers[g]=="undefined"){return}var n=c.quickFlip.wrappers[g],f=n.currPanel,e=(typeof(q)!="undefined"&&q!=b)?q:(n.panels.length>f+1)?f+1:0;n.currPanel=e,l=(typeof(l)!="undefined"&&l!=b)?l:1;r=h(r,c.quickFlip.opts[g]);n.panels[f].hide();if(r.refresh){c.quickFlip.removeFlipDivs(g);c.quickFlip.build(g,e);n=c.quickFlip.wrappers[g]}n.flipDivs[f].show();var p=0,o=0,d=r.vertical?{height:0}:{width:0},m=r.vertical?{height:n.half}:{width:n.half};n.flipDivCols[f].animate(d,r.closeSpeed,r.easing,function(){if(!p){p++}else{n.flipDivs[e].show();n.flipDivCols[e].css(d);n.flipDivCols[e].animate(m,r.openSpeed,r.easing,function(){if(!o){o++}else{n.flipDivs[e].hide();n.panels[e].show();switch(l){case 0:case -1:c.quickFlip.flip(g,b,-1);break;case 1:break;default:c.quickFlip.flip(g,b,l-1);break}}})}})},removeFlipDivs:function(e){for(var d=0;d<c.quickFlip.wrappers[e].flipDivs.length;d++){c.quickFlip.wrappers[e].flipDivs[d].remove()}}};c.fn.quickFlip=function(d){this.each(function(){new c.quickFlip.init(d,this)});return this};c.fn.whichQuickFlip=function(){function f(j,h){if(!j||!h||!j.length||!h.length||j.length!=h.length){return a}for(var g=0;g<j.length;g++){if(j[g]!==h[g]){return a}}return true}var d=b;for(var e=0;e<c.quickFlip.wrappers.length;e++){if(f(this,c(c.quickFlip.wrappers[e].wrapper))){d=e}}return d};c.fn.quickFlipper=function(d,f,e){this.each(function(){var h=c(this),g=h.whichQuickFlip();if(g==b){h.quickFlip(d);g=h.whichQuickFlip()}c.quickFlip.flip(g,f,e,d)})}})(jQuery);</script>
Во второй блок добавьте стиль, разметку и вызов функции.
<style>
.quickFlip3 {
    height: 150px;
    width: 300px;
    font-family: "Trebuchet MS", Verdana, Sans-serif, sans;
    font-size: 13px;
    position:relative;
    text-align:center;
  }
.quickFlip3 .redPanel {
    background-color: #75941f;
    color: #FFF;
    border: 1px outset #4f6417;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    padding:10px;
  }
  .quickFlip3 .blackPanel {
    background-color: #FFD993;
    color: darkbrown;
    border: 1px outset #A61C14;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    padding:10px;
}
</style>
<div class="quickFlip3">
        <div class="redPanel">
            <h3 class="first quickFlipCta">Привет! Нажми сюда, чтобы перевернуть блок</h3>
            <p>
            <a href="#">Нажимай!</a>
            </p>
        </div>
        <div class="blackPanel">
            <h3 class="first quickFlipCta">Привет! Нажми сюда, чтобы перевернуть блок</h3>
            <p><a href="#">Нажимай еще раз!</a>
        </div>
    </div><script type="text/javascript">
$(function() {
    $('.quickFlip3').quickFlip();
});
</script>    
На экране вы увидите следующее:

При загрузке страницы будет вызвана функция переворота и зеленый блок сменится желтым.
К сожалению, у нас не получится настроить этот плагин для блоков, созданных непосредственно в Pixli, так как код использует эффект вложения элементов и мы можем управлять только дочерними. А редактор устроен таким образом, что наши блоки попадают на второй уровень вложенности. Поэтому вам придется оформлять их вручную, в html-коде.
Класс .redPanel отвечает за лицевую сторону. В нем мы указали:
background-color — цвет фона
color – цвет текста
border – толщину, тип и цвет рамки. Вы можете указывать значения:
  • dotted – точками;
  • dashed – пунктирной линией;
  • solid – сплошная$
  • double – двойная;
  • groove – вдавленная;
  • ridge — выпуклая:
  • inset – выпуклая (отличается от ridge стилем подкраски сторон);
  • outset – вдавленная (отличается от groove стилем подкраски сторон)
-moz-border-radius – закругление углов для mozilla
-webkit-border-radius – закругление углов для остальных браузеров. Чем больше значение вы укажете, тем сильнее будут скруглены углы. Можно добиться полного круга.
Padding – отступ внутреннего текста от краев блока.
Класс blackPanel оформляет обратную сторону блока, используя те же самые свойства.
Чтобы оформить текст внутри блока, вам тоже придется писать его стили вручную. Например, можно изменить размер заголовка H3 из нашего примера или указать для ссылки a другой цвет.

Как работает плагин FlipClick


Плагин переворачивает две панели, поэтому ему нужна обертка для них. У нас в этой роли выступает блок с классом quickFlip3. Внутрь блока вкладываются еще два, redpanel и blackpanel. В принципе, их можно назвать любым способом, а можно вообще не давать им классы – плагин действует по принципу переворота дочерних блоков. Мы используем классы, чтобы их оформить.
Для добавления эффекта к узлу используется код:
$(function() {
    $('.quickFlip3').quickFlip();
});
По умолчанию, эффект происходит по щелчку мыши на элементе с классом quickFlipCta. Поэтому мы добавили этот класс к ссылке и тексту. Вы можете изменить это, определив собственный текст для щелчка. Как привязать плагин к другому событию будет рассказано позже.
Альтернативой для вызова плагина является функция $.quickFlipper(). Ее можно также привязать к любому блоку.
$(function() {
    $('.quickFlip3').quickFlipper();
});
Синтаксис функции:
$.quickFlipper(options, nextPanel, repeater)

Запускает эффект флип.
Параметры функции quickFlipper():
Options (Object)
Значение опций. Эти параметры будут применяться к любому набору $.quickFlip().
nextPanel (Целое число)
Указатель следующей панели, которая будет показана. По умолчанию это null — автоматически показывает следующую панель в DOM. Если второй блок не указан, то эффект будет зациклен на первом блоке.
Repeater (Целое число)
Количество раз, чтобы перевернуть панель. Укажите -1 для постоянного повтора эффекта переворота.
Опции параметра option:
closeSpeed (Number)
Число миллисекунд, которое требуется для перевертывания и скрытия переднего блока. По умолчанию переворот происходит быстро. Укажите большее значение и переворот будет происходить в замедленном темпе.
openSpeed (Число)
Число миллисекунд, которое требуется для перевертывания и отображения второго блока.
Vertical (Boolean)
Позволяет задать вертикальное перевертывание. По умолчанию блок переворачивается горизонтально. Укажите значение true для включения флипа по вертикали.
ctaSelector (Строка выбора jQuery)
QuickFlip присоединяет событие click к этому селектору jQuery. Это позволяет осуществлять запуск по щелчку на любом элементе, который был здесь указан.
Refresh (Boolean)
Предоставляет возможность обновлять анимацию QuickFlip каждый раз, когда вызывается переворот. Это применяется, если содержимое внутри блока изменяется визуально, но по умолчанию отключено по соображениям производительности.
panelWidth (Номер или строка CSS)
Установка ширины блока. Мы это сделали с помощью CSS.
panelHeight(Number или CSS string)
Установка высоты блока. Мы это сделали с помощью CSS.
noResize(Boolean)
Отключает событие изменения размера родительского блока, в который вложены переворачивающиеся блоки QuickFlip при изменении размера окна. Установите для этого значение true, если ваш родительский блок QuickFlip должен оставаться неизменным при изменении размеров окна браузера. По умолчанию false.
На примере вы можете увидеть, как оформляется список параметров.
<script type="text/javascript">
$(function() {
    $('.quickFlip3').quickFlip({
      vertical:true,
      ctaSelector:'a',
      closeSpeed:2000,
      openSpeed:2000
    });
});   
</script>

Переворот по наведению мыши на блок


По умолчанию флип происходит по щелчку. Поэтому нам надо вызвать функцию, обработав событие hover (наведение указателя мыши).
Изменим код вызова функции:
<script type="text/javascript">
$(function() {
   $('.quickFlip3').quickFlip();
     $('.quickFlip3').hover(function(){
      $('.quickFlip3').quickFlipper();
    }
      )  
});
</script>
Первый вызов необходим, чтобы при загрузке страницы сразу произошел переворот и второй блок пропал. Это не совсем удобно, поэтому мы немного изменим сам принцип, спрятав второй блок. Для этого укажем значение none для свойства display.
.quickFlip3 .blackPanel {
    background-color: #FFD993;
    color: darkbrown;
    border: 1px outset #A61C14;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    padding:10px;
    display:none;
}
И теперь можно будет убрать первоначальный вызов:
<script type="text/javascript">
$(function() {
    $('.quickFlip3').hover(function(){
      $('.quickFlip3').quickFlipper();
    }
      )  
});
</script>
Теперь плагин будет вызываться только при наведении указателя мыши на блок.
29 июня 2017, 12:13    Ivan Web-дизайн 0    4 0

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.