SHARE
TWEET

Foscam 4 by 4 Camera Feeds

sweenig Aug 27th, 2014 2,092 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <style>
  4. * {margin:0px;padding:0px;}
  5. body {height:100%;width:100%;background-color:black;overflow:hidden;}
  6. img {position:fixed;height:50%;width:50%;animation-timing-function:ease-out;}
  7. .top-left {top:0px;left:0px;}
  8. .top-right {top:0px;right:0px;}
  9. .bottom-left {bottom:0px;left:0px;}
  10. .bottom-right {bottom:0px;right:0px;}
  11. .larger {-webkit-animation: growlarger 1s;}
  12. .smaller {-webkit-animation: growsmaller 1s;}
  13. @-webkit-keyframes growlarger {
  14.         from {width: 50%;height:50%;z-Index:0;}
  15.         to {width: 100%;height:100%;z-Index:100;}
  16. }
  17. @-webkit-keyframes growsmaller {
  18.         from {width: 100%;height:100%;z-Index:100;}
  19.         to {width: 50%;height:50%;z-Index:0;}
  20. }
  21. </style>
  22. <script>
  23.         function grow(element) {
  24.                 var classes=element.classList;
  25.                 var pattern = /larger/g;
  26.                 var result=pattern.test(classes);
  27.                 if (!result) {
  28.                         element.classList.remove("smaller");element.classList.add("larger");
  29.                         element.style.zIndex="100";element.style.width="100%";element.style.height="100%";
  30.                 } else {
  31.                         element.classList.remove("larger");element.classList.add("smaller");
  32.                         element.style.width="50%";element.style.height="50%";element.style.zIndex="0";
  33.                 }
  34.         }
  35. </script>
  36. </head>
  37. <body>
  38. <img class="top-left" onClick="grow(this);" src="http://upload.wikimedia.org/wikipedia/commons/f/fc/Yosemite_Valley_from_Wawona_Tunnel_view,_vista_point..JPG"></img>
  39. <img class="top-right" onClick="grow(this);" src="http://www.getbustours.com/images/2%20Days%20Yosemite%20Vegas%20Express%20From%20San%20Francisco.jpg"></img>
  40. <img class="bottom-left" onClick="grow(this);" src="http://static.travel.usnews.com/images/destinations/94/new_yosemite_main_cropped_2_445x280.jpg"></img>
  41. <img class="bottom-right" onClick="grow(this);" src="http://cdn.allyosemite.com/images/content/12279_12548_Yosemite_National_Park_Highlights_md.jpg"></img>
  42. </body>
  43. </html>
RAW Paste Data
Top