https://www.prontoischia.it/javascripts/SlideShow/Source/SlideShow.CSS.js

1/*
2---
3
4name: "SlideShow.CSS"
5
6description: "Adds CSS transform transitions."
7
8license: "MIT-style license."
9
10authors: "Ryan Florence <http://ryanflorence.com>"
11
12requires:
13  - SlideShow
14  - CSSAnimation/MooTools
15
16provides:
17  - CSS
18
19...
20*/
21
22;(function(){
23
24	function getAxis(direction){
25		return {
26			property: (direction == 'left' || direction == 'right') ? 'x' : 'y',
27			inverted: (direction == 'left' || direction == 'up') ? 1 : -1
28		};
29	}
30
31	function go(type, axis, data){
32		var transition = {
33			duration: data.duration + 'ms',
34			'timing-function': 'ease',
35			property: 'transform'
36		};
37
38		if (type == 'blind')
39			data.next.setStyle('z-index', 2);
40
41		if (type != 'slide')
42			data.next.translate(axis.property, 100 * axis.inverted);
43
44		setTimeout(function(){
45			if (type != 'slide')
46				data.next.setTransition(transition).translate(axis.property, 0);
47			if (type != 'blind')
48				data.previous.setTransition(transition).translate(axis.property, -(100 * axis.inverted));
49		}, 0);
50
51	}
52
53	['left', 'right', 'up', 'down'].each(function(direction){
54
55		var capitalized = direction.capitalize(),
56			blindName = 'blind' + capitalized + 'CSS',
57			slideName = 'slide' + capitalized + 'CSS';
58
59		[
60
61			['push' + capitalized + 'CSS', (function(){
62				var axis = getAxis(direction);
63				return function(data){
64					go('push', axis, data);
65				}
66			}())],
67
68			[blindName, (function(){
69				var axis = getAxis(direction);
70				return function(data){
71					go('blind', axis, data);
72				}
73			}())],
74
75			[slideName, (function(){
76				var axis = getAxis(direction);
77				return function(data){
78					go('slide', axis, data);
79				}
80			}())]
81
82		].each(function(transition){
83			SlideShow.defineTransition(transition[0], transition[1]);
84		});
85	});
86
87})();
88
89SlideShow.useCSS = function(){
90	['left', 'right', 'up', 'down'].each(function(direction){
91		var capitalized = direction.capitalize(),
92			blindName = 'blind' + capitalized,
93			slideName = 'slide' + capitalized;
94		SlideShow.transitions[blindName] = SlideShow.transitions[blindName + 'CSS'];
95		SlideShow.transitions[slideName] = SlideShow.transitions[blindName + 'CSS'];
96		SlideShow.transitions['push' + capitalized] = SlideShow.transitions['push' + capitalized + 'CSS'];
97	});
98	return this;
99}