cycle2/jquery.cycle2.flip.js at master · leup/cycle2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
/*! css3 flip transition plugin for Cycle2;  version: 20130909 */
/*! originally written by Laubeee (https://github.com/Laubeee) */
(function($) {
"use strict";

var backface,
    style = document.createElement('div').style,
    tx = $.fn.cycle.transitions,
    supported = style.transform !== undefined ||
        style.MozTransform !== undefined ||
        style.webkitTransform !== undefined ||
        style.oTransform !== undefined ||
        style.msTransform !== undefined;

if ( supported && style.msTransform !== undefined ) {
    style.msTransform = 'rotateY(0deg)';
    if ( ! style.msTransform )
        supported = false;
}

if ( supported ) {
    tx.flipHorz = getTransition( getRotate('Y') );
    tx.flipVert = getTransition( getRotate('X') );
    backface = {
        '-webkit-backface-visibility': 'hidden',
        '-moz-backface-visibility': 'hidden',
        '-o-backface-visibility': 'hidden',
        'backface-visibility': 'hidden'
    };
}
else {
    // fallback to scroll tx for browsers that don't support transforms
    tx.flipHorz = tx.scrollHorz;
    tx.flipVert = tx.scrollVert || tx.scrollHorz;
}


function getTransition( rotateFn ) {
    // return C2 transition object
    return {
        preInit: function( opts ) {
            opts.slides.css( backface );
        },
        transition: function( slideOpts, currEl, nextEl, fwd, callback ) {
            var opts = slideOpts,
                curr = $(currEl),
                next = $(nextEl),
                speed = opts.speed / 2;

            // css before transition start
            rotateFn.call(next, -90);
            next.css({
                'display': 'block',
                'background-position': '-90px',
                'opacity': 1
            });

            curr.css('background-position', '0px');

            curr.animate({ backgroundPosition: 90 }, {
                step: rotateFn,
                duration: speed,
                easing: opts.easeOut || opts.easing,
                complete: function() {
                    slideOpts.API.updateView( false, true );
                    next.animate({ backgroundPosition: 0 }, {
                        step: rotateFn,
                        duration: speed,
                        easing: opts.easeIn || opts.easing,
                        complete: callback
                    });
                }
            });
        }
    };
}

function getRotate( dir ) {
    return function( degrees ) {
        /*jshint validthis:true */
        var el = $(this);
        el.css({
            '-webkit-transform': 'rotate'+dir+'('+degrees+'deg)',
            '-moz-transform': 'rotate'+dir+'('+degrees+'deg)',
            '-ms-transform': 'rotate'+dir+'('+degrees+'deg)',
            '-o-transform': 'rotate'+dir+'('+degrees+'deg)',
            'transform': 'rotate'+dir+'('+degrees+'deg)'
        });
    };
}

})(jQuery);