This experiment is compatible ONLY WITH CHROME AND SAFARI
Hi all, good day!
I am trying to write an HTML with some basic transitions.
The idea is to give the viewer the sensation that s/he is looking at the edge of a building, so that two walls are visible at the same time. There are some texts which are written on either sides of the building, but the texts are not completely visible. To see the complete text, the viewer clicks on a certain part of the left wall, and the text becomes fully visible through a transition.
The page consists of one table with its perspective set to 600. There are three rows, two columns.
In this experiment, the transition is done on the second row when the user clicks on the first cell of that row, that is, cell number (2,1).
The outline can bee seen from this link: https://www.dropbox.com/s/5blnqib2g0jau16/Outline.png
The html:
Code:
<table width="690" border="0" align="center" class="pers">
<tr style="text-align: center;">
<td valign="top" class="left_wall" id="prent2" style="border:2px solid black; border-right:none; border-collapse:collapse; margin:0"><a href="#" style="text-decoration:none">
<div id="left2" class="anim1">Job Description </div>
</a></td>
<td class="right_wall" id="prent3" style="border:2px solid black;"><div id="right2" class="anim2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. </div></td>
</tr>
<tr style="text-align: center;">
<td width="104" valign="top" class="left_wall" id="prent" style="border:2px solid black; border-right:none; border-collapse:collapse; margin:0"><a href="#" style="text-decoration:none">
<div id="left1" class="anim1" >Job Description </div>
</a></td>
<td class="right_wall" id="prent1" style="border:2px solid black;"><div id="right1" class="anim2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. </div></td>
</tr>
<tr style="text-align: center;">
<td valign="top" class="left_wall" id="prent6" style="border:2px solid black; border-right:none; border-collapse:collapse; margin:0; overflow:visible"><a href="#" style="text-decoration:none">
<div id="left3" class="anim1">Job Description </div>
</a></td>
<td class="right_wall" id="prent7" style="border:2px solid black;"><div id="right3" class="anim2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. </div></td>
</tr>
</table>
The CSS:
Code:
<style type="text/css">
div {/* W3C */
transition-property:all;
transition-duration:.5s;
/* Firefox 4 */
-moz-transition-property:all;
-moz-transition-duration:.5s;
/* Safari and Chrome */
-webkit-transition-property:all;
-webkit-transition-duration:.5s;
/* Opera */
-o-transition-property:all;
-o-transition-duration:.5s;}
#left1:hover {background-color:black;
color: #FFF}
.anim2 { background-color: #039; /* blue */
color:white;
}
.anim1 { background-color: #039;
color:white;
width:100px;
height:50px;
}
.black_bg{background-color:#000; /* black */
color:#FFF;
}
.tera{ transform-origin: right;
-moz-transform-origin:right;
-webkit-transform-origin:right;
-o-transform-origin:right;
transform:rotateY(23deg);
-moz-transform:rotateY(23deg);
-webkit-transform:rotateY(23deg);
}
.tera1 { transform-origin: left;
-moz-transform-origin:left;
-webkit-transform-origin:left;
-o-transform-origin:left;
transform:rotateY(-23deg);
-moz-transform:rotateY(-23deg);
-webkit-transform:rotateY(-23deg);
}
.left_wall {
transform-origin: right;
-moz-transform-origin:right;
-webkit-transform-origin:right;
-o-transform-origin:right;
transform:rotateY(-30deg);
-moz-transform:rotateY(-30deg);
-webkit-transform:rotateY(-30deg);}
.right_wall {
transform-origin: left;
-moz-transform-origin:left;
-webkit-transform-origin:left;
-o-transform-origin:left;
transform:rotateY(40deg);
-moz-transform:rotateY(40deg);
-webkit-transform:rotateY(40deg);}
.pers{perspective:600;
-webkit-perspective: 600; /* Safari and Chrome */}
</style>
The jquery:
Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$('#prent,#prent1,#prent4,#prent5').addClass('pers'); /* adjust the perspective of the table datas */
$('#left1').click(function(){
$('#left1').toggleClass('tera black_bg'); /* rotate the left element, change the back */
$('#right1').toggleClass('tera1 black_bg'); /* rotate the right element, change the back */
})
});
</script>
How it works:
The jquery basically switches the classes of the divs. The classes define the rotation, background color and text color of the divs.
The problem:
If you click on cell (2,1) [with id='prent'], you will see how the left and right divs of the row come out of the background. The problem is with the right div (with id= 'right1'), it becomes overlapped by the div immediately below it. Any idea about the solution?
The full html can be downloaded from here:
https://www.dropbox.com/s/fholeh0p2hmjkqw/some%20experiment%20.html
Thanks in advance for any help.
Mohit.
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
