/
flux.transitions.turn.js
103 lines (95 loc) · 3.11 KB
/
flux.transitions.turn.js
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
93
94
95
96
97
98
99
100
101
102
103
(function($) {
flux.transitions.turn = function(fluxslider, opts) {
return new flux.transition(fluxslider, $.extend({
requires3d: true,
perspective: 1300,
direction: 'left',
setup: function() {
var tab = $('<div class="tab"></div>').css({
width: '50%',
height: '100%',
position: 'absolute',
top: '0px',
left: this.options.direction == 'left' ? '50%' : '0%',
'z-index':101
}).css3({
'transform-style': 'preserve-3d',
'transition-duration': '1000ms',
'transition-timing-function': 'ease-out',
'transition-property': 'all',
'transform-origin': this.options.direction == 'left' ? 'left center' : 'right center'
}),
front = $('<div></div>').appendTo(tab).css({
'background-image': this.slider.image1.css('background-image'),
'background-position': (this.options.direction == 'left' ? '-'+(this.slider.image1.width()/2) : 0)+'px 0',
width: '100%',
height: '100%',
position: 'absolute',
top: '0',
left: '0',
'-moz-transform': 'translateZ(1px)'
}).css3({
'backface-visibility': 'hidden'
}),
back = $('<div></div>').appendTo(tab).css({
'background-image': this.slider.image2.css('background-image'),
'background-position': (this.options.direction == 'left' ? 0 : '-'+(this.slider.image1.width()/2))+'px 0',
width: '100%',
height: '100%',
position: 'absolute',
top: '0',
left: '0'
}).css3({
transform: flux.browser.rotateY(180),
'backface-visibility': 'hidden'
}),
current = $('<div></div>').css({
position: 'absolute',
top: '0',
left: this.options.direction == 'left' ? '0' : '50%',
width: '50%',
height: '100%',
'background-image': this.slider.image1.css('background-image'),
'background-position': (this.options.direction == 'left' ? 0 : '-'+(this.slider.image1.width()/2))+'px 0',
'z-index':100
}),
overlay = $('<div class="overlay"></div>').css({
position: 'absolute',
top: '0',
left: this.options.direction == 'left' ? '50%' : '0',
width: '50%',
height: '100%',
background: '#000',
opacity: 1
}).css3({
'transition-duration': '800ms',
'transition-timing-function': 'linear',
'transition-property': 'opacity'
}),
container = $('<div></div>').css3({
width: '100%',
height: '100%'
}).css3({
'perspective': this.options.perspective,
'perspective-origin': '50% 50%'
}).append(tab).append(current).append(overlay);
this.slider.image1.append(container);
},
execute: function() {
var _this = this;
this.slider.image1.find('div.tab').first().transitionEnd(function(){
_this.finished();
});
setTimeout(function(){
_this.slider.image1.find('div.tab').css3({
// 179 not 180 so that the tab rotates the correct way in Firefox
transform: flux.browser.rotateY(_this.options.direction == 'left' ? -179 : 179)
});
_this.slider.image1.find('div.overlay').css({
opacity: 0
});
}, 50);
}
}, opts));
};
})(window.jQuery || window.Zepto);