Skip to content

Commit 77092c1

Browse files
coderLMNcoderLMN
committed
update source code
1 parent b5c2a38 commit 77092c1

File tree

2 files changed

+153
-155
lines changed

2 files changed

+153
-155
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ This version is inspired by @joecritchley's demo: http://joecritchley.com/demos/
77

88
In my version, browser compatibility are greatly improved. Now Chrome, Safari, Opera, Firefox, and IE(version >9) are supported.
99

10-
Also it eliminated external library dependencies. To run a demo, all you need is just index.html.
10+
Also it eliminated external library dependencies. To run a demo, all you need is just [index.html](https://github.com/coderLMN/CSS3dTimeMachine/blob/master/index.html).
1111

1212
One more good point: when users want to move to another item , instead of clicking 'previous' or 'next' botton, now they can scroll mouse or click on an item they interested, or use arrow keys to navigate through them.
1313

‎index.html

Lines changed: 152 additions & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -1,167 +1,165 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<meta name="description" content="A Demonstration of CSS3 3D Time Machine Effect, inspired by @joecritchley's demo: http://joecritchley.com/demos/time-machine/">
8-
<meta name="author" content="coderLMN">
9-
<title>An Demonstration of CSS3 3D Time Machine Effect</title>
10-
<style>
11-
/* All the CSS 3 properties used in this demo */
12-
* { margin: 0; padding: 0; list-style: none; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
13-
img { display: block; }
14-
.back-img { position:absolute; left:0px; top:0px; z-index:-1;}
15-
html, body { width: 100%; height: 100%; overflow: hidden; }
16-
body { color: #fff; font-family: Arial, sans-serif; background-color: #333;}
17-
.title { margin-left: 20px; margin-top: 10px;}
18-
#view { width: 800px; margin: 0 auto; height: 1000px; left: -200px; position: relative; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;}
19-
#page { position: relative; width: 100%; height: 100%; margin-top: 25%; -webkit-perspective-origin: 100% 100%; perspective-origin: 100% 100%; -webkit-perspective: 1200px; perspective: 1200px;}
20-
#page li { position: absolute; top: 0; left: 0; width: 800px; height: 600px; -webkit-transition: all 1s linear 0s;transition: all 1s linear 0s;}
21-
</style>
22-
</head>
23-
<body>
24-
<h3 style="position: fixed; top: 10px; left: 15px;">
25-
Move the items with arrowKeys, mouseScroll, or directClick. <br><br>
26-
See the {<a href="https://github.com/coderLMN/CSS3dTimeMachine">Source Code</a>} or {<a href="http://coderlmn.github.io/CSS3dTimeMachine/">Demo</a>}
27-
</h3>
28-
29-
<audio autoplay loop> <!-- use HTML 5 audio tag to put an song here -->
30-
<source src="http://cflc.xmu.edu.cn/linli/linli/student/2008/xiaojing/music/she.mp3" type="audio/mpeg">
31-
</audio>
32-
<div id="view">
33-
<ul id="page"></ul> <!-- This is the place where all the slides will be added -->
34-
</div>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<meta name="description" content="An Demonstration of CSS3 3D Time Machine Effect, inspired by @joecritchley's demo: http://joecritchley.com/demos/time-machine/">
8+
<meta name="author" content="coderLMN">
9+
<title>An Demonstration of CSS3 3D Time Machine Effect</title>
10+
<link rel="shortcut icon" href="http://www.studycolony.com/img/favicon.ico">
11+
<style>
12+
* { margin: 0; padding: 0; list-style: none; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
13+
img { display: block; }
14+
html, body { width: 100%; height: 100%; overflow: hidden; }
15+
body { color: #fff; font-family: Arial, sans-serif; background-color: #333;}
16+
.title { margin-left: 20px; margin-top: 10px;}
17+
#view { width: 800px; margin: 0 auto; height: 1000px; left: -200px; position: relative; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;}
18+
#page { position: relative; width: 100%; height: 100%; margin-top: 25%; -webkit-perspective-origin: 100% 100%; perspective-origin: 100% 100%; -webkit-perspective: 1200px; perspective: 1200px;}
19+
#page li { position: absolute; top: 0; left: 0; width: 800px; height: 600px; -webkit-transition: all 1s linear 0s;transition: all 1s linear 0s; display: block; background-color: lightgreen;border-radius: 10px;box-shadow: 5px -5px 3px #888888; opacity: 0;}
20+
</style>
21+
</head>
22+
<body>
23+
<h3 style="position: fixed; top: 10px; left: 15px;">
24+
Move the items with arrowKeys, mouseScroll, or directClick. <br><br>
25+
See the description on <a href="https://github.com/coderLMN/CSS3dTimeMachine" style="background-color: white;">GitHub</a>.
26+
</h3>
27+
<audio autoplay loop>
28+
<source src="http://rm.sina.com.cn/wm/VZ200812251304299958VK/music/MUSIC0812261217047952.mp3" type="audio/mpeg">
29+
</audio>
30+
<div id="view">
31+
<ul id="page"></ul>
32+
</div>
3533

36-
<script>
37-
var space = -300; // offset between neighboring items on Y and Z axis
38-
var pageSize = 10; // number of items each page
39-
var angle = 3;
40-
var data = []; // position of each item
41-
data.push(new Item(0, 0, 0)); //fill the first element data[0], so that the index == DOM li sequence
42-
43-
var current_index = 1; // the sequence number of current item
44-
var max_index = 0; // the sequence number of the last item
45-
var page = document.getElementById('page'); // the DOM element where the items are placed
34+
<script>
35+
var space = -300; // offset between neighboring items on Y and Z axis
36+
var pageSize = 10; // number of items each page
37+
var angle = 3;
38+
var MAX_SIZE = 60;
39+
var data = []; // position of each item
40+
data.push(new Item(0, 0, 0)); //fill the first element data[0], so that the index == DOM li sequence
4641

47-
function add(n){ // put a new item
48-
if(! data[n]){
49-
data.push(new Item(data[max_index].translate_y+space, data[max_index].translate_z+space, data[max_index].rotate_z+angel));
50-
}
51-
var item = document.createElement('li');
52-
item.id = n;
53-
item.style.zIndex = (1000-n);
54-
item.style.opacity = 0; // new item is invisible initially, will be displayed by animate() function
55-
item.style.display = 'block';
56-
item.style.backgroundColor = 'lightgreen';
57-
item.style.borderRadius = '10px';
58-
item.style.boxShadow = '5px -5px 3px #888888';
59-
item.onclick = function() {jumpTo(n)}; // if an item is clicked, it will move to the first place in the screen
60-
item.innerHTML = "<h2 class='title'>Item No. " + n + "</h2><img src='http://joecritchley.com/demos/time-machine/images/" + (n%6 +1) +".jpg' width='800'><h4 class='title'>Text content is put here......................... for Item No." + n + ".</h4>";
61-
page.appendChild(item);
62-
max_index ++;
63-
}
64-
65-
function Item(translate_y, translate_z, rotate_z){ // data structure for storing the positions
66-
this.translate_y = translate_y;
67-
this.translate_z = translate_z;
68-
this.rotate_z = rotate_z;
69-
}
70-
for(var n=1; n<pageSize+1; n++){ // put 10 items initially
71-
data.push(new Item(n*space, n*space, (n-1)*angle));
72-
add(n);
73-
};
74-
for(var n=1; n<pageSize+1; n++){
75-
animate(n, 0, 1); // animate 10 items added
76-
};
77-
78-
document.onkeydown = function(event) {
79-
if(event.keyCode == '37' || event.keyCode == '40') { //left or down --> previous
80-
prev();
81-
}
82-
else if(event.keyCode == '39' || event.keyCode == '38') { //right or up --> next
83-
next();
84-
}
85-
};
42+
var current_index = 1; // the sequence number of current item
43+
var max_index = 0; // the sequence number of the last item
44+
var page = document.getElementById('page'); // the DOM element where the items are placed
8645

87-
function shortCut(event){
88-
if(event.wheelDelta > 0){ // mouse wheel rolls forward
89-
next();
90-
}
91-
else if(event.wheelDelta < 0){
92-
prev(); // mouse wheel rolls backward
93-
}
94-
}
95-
function shortCutFF(event) { // only for Firefox, because it doesn't support onmousewheel event
96-
if(event.detail < 0){ // mouse wheel rolls forward
97-
next();
98-
}
99-
else if(event.detail > 0){
100-
prev(); // mouse wheel rolls backward
101-
}
102-
}
103-
if ("onmousewheel" in document) {
104-
document.onmousewheel = shortCut; // Webkit & IE
105-
} else {
106-
document.addEventListener('DOMMouseScroll', shortCutFF, false); // firefox
107-
}
46+
function add(n){ // put a new item
47+
if(! data[n]){
48+
data.push(new Item(data[max_index].translate_y+space, data[max_index].translate_z+space, data[max_index].rotate_z+3));
49+
}
50+
var item = document.createElement('li');
51+
item.id = n;
52+
item.style.zIndex = (1000-n);
53+
// item.style.opacity = 0; // new item is invisible initially, will be displayed by animate() function
54+
item.onclick = function() {jumpTo(n)}; // if an item is clicked, it will move to the first place in the screen
55+
item.innerHTML = "<h2 class='title'>Item No. " + n + "</h2><img src='" + (n%6 +1) +".jpg' width='800'><h4 class='title'>Text content is put here......................... for Item No." + n + ".</h4>";
56+
page.appendChild(item);
57+
max_index ++;
58+
}
10859

109-
function jumpTo(n){ // keep moving forward to show the n th item
110-
for(var i=current_index; i<n; i++){
111-
next();
112-
}
113-
}
60+
function Item(translate_y, translate_z, rotate_z){ // data structure for storing the positions
61+
this.translate_y = translate_y;
62+
this.translate_z = translate_z;
63+
this.rotate_z = rotate_z;
64+
}
65+
for(var n=1; n<pageSize+1; n++){ // put 10 items initially
66+
data.push(new Item(n*space, n*space, (n-1)*angle));
67+
add(n);
68+
}
69+
for(var n=1; n<pageSize+1; n++){
70+
animate(n, 0, 1); // animate 10 items added
71+
}
11472

115-
function animate(n, y, opacity) {
116-
var new_y = data[n].translate_y + y;
117-
var new_z = data[n].translate_z + y;
118-
var new_rz = data[n].rotate_z + angle*y/space; // calculate new position of n th item
73+
document.onkeydown = function(event) {
74+
if(event.keyCode == '37' || event.keyCode == '40') { //left or down --> previous
75+
prev();
76+
}
77+
else if(event.keyCode == '39' || event.keyCode == '38') { //right or up --> next
78+
next();
79+
}
80+
};
11981

120-
var elementN = document.getElementById(n);
121-
elementN.onclick = function() {jumpTo(n)};
122-
// animate n th item with CSS3 translate3d and rotate3d methods
123-
elementN.style.webkitTransform = 'translateX('+ (-0.3*new_y) + 'px) translateY('+ new_y + 'px) translateZ(' + new_z + 'px) rotateZ(' + new_rz + 'deg)';
124-
elementN.style.transform = 'translateX('+ (-0.3*new_y) + 'px) translateY('+ new_y + 'px) translateZ(' + new_z + 'px) rotateZ(' + new_rz + 'deg)';
125-
elementN.style.opacity = opacity;
82+
function shortCut(event){
83+
if(event.wheelDelta > 0){ // mouse wheel rolls forward
84+
next();
85+
}
86+
else if(event.wheelDelta < 0){
87+
prev(); // mouse wheel rolls backward
88+
}
89+
}
90+
function shortCutFF(event) { // only for Firefox, because it doesn't support onmousewheel event
91+
if(event.detail < 0){ // mouse wheel rolls forward
92+
next();
93+
}
94+
else if(event.detail > 0){
95+
prev(); // mouse wheel rolls backward
96+
}
97+
}
98+
if ("onmousewheel" in document) {
99+
document.onmousewheel = shortCut; // Webkit & IE
100+
} else {
101+
document.addEventListener('DOMMouseScroll', shortCutFF, false); // firefox
102+
}
103+
104+
function jumpTo(n){ // keep moving forward to show the n th item
105+
for(var i=current_index; i<n; i++){
106+
next();
107+
}
108+
}
126109

127-
data[n].translate_y = new_y;
128-
data[n].translate_z = new_z;
129-
data[n].rotate_z = new_rz; // save its new position
130-
}
110+
function animate(n, y, opacity) {
111+
if(n<=MAX_SIZE) {
112+
var new_y = data[n].translate_y + y;
113+
var new_z = data[n].translate_z + y;
114+
var new_rz = data[n].rotate_z + angle*y/space; // calculate new position of n th item
131115

132-
function prev() {
133-
if(current_index <= 1) return false;
134-
document.getElementById(current_index-1).style.opacity = 1; // show last item
135-
current_index --;
136-
for(var n=1; n<current_index; n++){ // update the positions of previous invisible items
137-
animate(n, space, 0);
138-
};
139-
for(var n=current_index; n<current_index+pageSize; n++){ // update the positions of current visible items
140-
animate(n, space, 1);
141-
};
142-
for(var n=current_index+pageSize; n<=max_index; n++){ // update the positions of next invisible items
143-
animate(n, space, 0);
144-
};
145-
};
116+
var elementN = document.getElementById(n);
117+
elementN.onclick = function() {jumpTo(n)};
118+
// animate n th item with CSS3 translate3d and rotate3d methods
119+
elementN.style.webkitTransform = 'translateX('+ (-0.3*new_y) + 'px) translateY('+ new_y + 'px) translateZ(' + new_z + 'px) rotateZ(' + new_rz + 'deg)';
120+
elementN.style.transform = 'translateX('+ (-0.3*new_y) + 'px) translateY('+ new_y + 'px) translateZ(' + new_z + 'px) rotateZ(' + new_rz + 'deg)';
121+
elementN.style.opacity = opacity;
122+
123+
data[n].translate_y = new_y;
124+
data[n].translate_z = new_z;
125+
data[n].rotate_z = new_rz; // save its new position
126+
}
127+
}
146128

147-
function next() {
148-
if(current_index >= data.length || current_index==100) return false;
149-
document.getElementById(current_index).style.opacity = 0; //hide current item
150-
current_index ++;
151-
if(current_index+pageSize-1>max_index && max_index<100){ // maximum 100 items allowed
152-
add(current_index + pageSize-1); // load a new item if available
153-
}
129+
function prev() {
130+
if(current_index >1) {
131+
document.getElementById(current_index-1).style.opacity = 1; // show last item
132+
current_index --;
133+
for(var n=1; n<current_index; n++){ // update the positions of previous invisible items
134+
animate(n, space, 0);
135+
}
136+
for(var n=current_index; n<current_index+pageSize; n++){ // update the positions of current visible items
137+
animate(n, space, 1);
138+
}
139+
for(var n=current_index+pageSize; n<=max_index; n++){ // update the positions of next invisible items
140+
animate(n, space, 0);
141+
}
142+
}
143+
}
154144

155-
for(var n=1; n<current_index; n++){ // update the positions of previous invisible items
156-
animate(n, -1*space, 0);
157-
};
158-
for(var n=current_index; n<current_index+pageSize; n++){ // update the positions of current visible items
159-
animate(n, -1*space, 1);
160-
};
161-
for(var n=current_index+pageSize; n<=max_index; n++){ // update the positions of next invisible items
162-
animate(n, -1*space, 0);
163-
};
164-
};
165-
</script>
166-
</body>
145+
function next() {
146+
if(current_index < data.length && current_index < MAX_SIZE) {
147+
document.getElementById(current_index).style.opacity = 0; //hide current item
148+
current_index ++;
149+
if(current_index+pageSize-1>max_index && max_index<MAX_SIZE){ // maximum 60 items allowed
150+
add(current_index + pageSize -1); // load a new item if available
151+
}
152+
for(var n=1; n<current_index; n++){ // update the positions of previous invisible items
153+
animate(n, -1*space, 0);
154+
}
155+
for(var n=current_index; n<current_index+pageSize; n++){ // update the positions of current visible items
156+
animate(n, -1*space, 1);
157+
}
158+
for(var n=current_index+pageSize; n<=max_index; n++){ // update the positions of next invisible items
159+
animate(n, -1*space, 0);
160+
}
161+
}
162+
}
163+
</script>
164+
</body>
167165
</html>

0 commit comments

Comments
 (0)