Threeway Environment 06-03-2014, 08:13 AM
#1
So lately I've been working on a project to be able to load pages all at once. It's rather useless, however, it has its' strong and weak points. It's also a little buggy. Basically, in the url, if first, second, or third are set, it will go to those pages. Once the page is finished loading, three boxes will appear with your page inside of them. Just hover over one to make it bigger.
Here's a video on it since I don't really feel like taking too much time typing this.
And then here's the code (though it;s terribly written and a lot can be improved on; I did this at 2 in the morning, I'm tired, don't bug me about it, I'll fix it some other time. It works, and that's all that matters for now);
Bugs/Caveats:
A little buggy with transitions, animations, etc.
Most https pages aren't supported. (iframe pls)
I personally like the little animation when you hover over one of the boxes.
Anyways, questions, comments, criticism?
Here's a video on it since I don't really feel like taking too much time typing this.
And then here's the code (though it;s terribly written and a lot can be improved on; I did this at 2 in the morning, I'm tired, don't bug me about it, I'll fix it some other time. It works, and that's all that matters for now);
PHP Code:
<?php
if(isset($_GET['first'])){$f1 = $_GET['first'];}else{$f1 = '';}
if(isset($_GET['second'])){$f2 = $_GET['second'];}else{$f2 = '';}
if(isset($_GET['second'])){$f3 = $_GET['third'];}else{$f3 = '';}
echo '
<head>
<title>3WE - Programmed by Duubz</title>
<style>
body {overflow:hidden;margin:auto;}
iframe {background:#FFF;z-index:10;height:100%;width:100%;}
#tile {border-radius: 2px;border:1px solid #000;overflow: hidden;}
.face1,.face2,.face3 {height:100px;width:100px;z-index:1;transition-duration:0.5s}
.face1:hover,.face2:hover,.face3:hover {z-index:11;-webkit-animation: mov 5s 1;height:100%;width:100%;}
.face2:hover {margin-top: -102px;}
.face3:hover {margin-top: -204px;}
@-webkit-keyframes mov {
0% {height:100px;width:100px;}
50% {height:100px;width:100%;}
100% {height:100%;width:100%;}
}
</style>
</head>
<body>
<div id="tile" class="face1"><iframe src="'.$f1.'" id="if1"></iframe></div>
<div id="tile" class="face2"><iframe src="'.$f2.'" id="if2"></iframe></div>
<div id="tile" class="face3"><iframe src="'.$f3.'" id="if3"></iframe></div>
</body>';
?>Bugs/Caveats:
A little buggy with transitions, animations, etc.
Most https pages aren't supported. (iframe pls)
I personally like the little animation when you hover over one of the boxes.
Anyways, questions, comments, criticism?
![[Image: BXqGARG.png]](https://i.imgur.com/BXqGARG.png)










![[+]](https://sinister.li/images/modern/collapse_collapsed.png)




![[Image: TeusoI9.png]](http://i.imgur.com/TeusoI9.png)
