Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <link rel="stylesheet" href="fonts/stylesheet.css" type="text/css" charset="utf-8" />
- <script type="text/javascript" src="js/gsap/TweenMax.js"></script>
- <style>
- body {
- margin:0px;
- background-color: rgba(0, 0, 0, 0);
- /*background-image: url('imgs/l3rdguide.png');*/
- font-family: 'goudy_trajan_regularregular';
- font-size: 26px;
- color:#FFFFFF;
- overflow: hidden;
- width:1920px;
- height:1080px;
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -webkit-text-stroke: 0.35px;
- }
- #container {
- width: 1920px;
- height: 1080px;
- position: absolute;
- top: 0;
- left: 0;
- }
- #l3rd {
- position:absolute;
- width:1177px;
- height: 118px;
- bottom:37px;
- left:124px;
- overflow: hidden;
- }
- #l3rdbg {
- position: absolute;
- height: 100%;
- width: 100%;
- top:0px;
- left:0px;
- background-image: url("imgs/l3rdnormal.png");
- }
- #logo {
- position: absolute;
- bottom:12px;
- left:49px;
- width: 168px;
- height: 168px;
- background-image: url("imgs/mkxlogo.png");
- }
- #line1 {
- position: absolute;
- top:24px;
- left:115px;
- font-size: 36px;
- }
- #line2 {
- position: absolute;
- top:67px;
- left:115px;
- font-size: 24px;
- }
- .hidden {
- display: none;
- }
- </style>
- <script type="text/javascript">
- window.onload = init;
- var xhr = new XMLHttpRequest();
- var timestampOld=0;
- var timestamp=0;
- var cacheBuster=0;
- var firstupdate = true;
- var scObj;
- var cTitle1;
- var cTitle2;
- var animating = 0;
- var showl3rd = false;
- function init() {
- if (window.external.SetLocalPropertyAsync) {
- window.external.SetLocalPropertyAsync("prop:BrowserSize","1920,1080");
- window.external.SetLocalPropertyAsync("prop:pos","0.000000,0.000000,1.000000,1.000000");
- }
- cTitle1 = document.querySelector("#line1");
- cTitle2 = document.querySelector("#line2");
- xhr.overrideMimeType('application/json');
- xhr.onreadystatechange = scLoaded;
- pollHandler();
- setInterval(function() {
- pollHandler();
- }, 500);
- }
- function pollHandler() {
- xhr.open('GET', "streamcontrol.json?test="+cacheBuster,true);
- xhr.send();
- cacheBuster++;
- }
- function scLoaded() {
- if (xhr.readyState === 4) {
- scObj = JSON.parse(xhr.responseText);
- timestampOld = timestamp;
- timestamp = scObj["timestamp"];
- if (timestamp != timestampOld) {
- l3rdUpdate();
- }
- }
- }
- function l3rdUpdate() {
- if (showl3rd == false && scObj["showl3rd"] == "1") {
- update();
- showl3rd = true;
- } else if (showl3rd == true && scObj["showl3rd"] == "0") {
- TweenMax.to(document.getElementById("container"),1,{opacity:0,onComplete:function(){
- document.getElementById("container").style.display = "none";
- TweenMax.set(document.getElementById("container"),{opacity:1});
- firstupdate = true;
- }})
- showl3rd = false;
- } else if (showl3rd == true) {
- update();
- }
- }
- function update() {
- if (firstupdate) {
- animating++;
- cTitle1.innerHTML = scObj["cTitle1"];
- cTitle2.innerHTML = scObj["cTitle2"];
- TweenMax.from(document.querySelector("#logo"),1,{css:{transform: "rotate(-90deg) scale(0.01,0.01)"}});
- TweenMax.from(document.querySelector("#l3rdbg"),1,{x:"-1177px",delay:1});
- TweenMax.from(cTitle1,0.5,{x:"100px",opacity:0,delay:1.5});
- TweenMax.from(cTitle2,0.5,{x:"100px",opacity:0,delay:1.6,onComplete:function(){animating--;}});
- document.getElementById("container").style.display="block";
- firstupdate = false;
- } else if (animating == 0) {
- if (cTitle1.innerHTML != scObj["cTitle1"]) {
- animating++;
- TweenMax.to(cTitle1,0.5,{x:"100px",opacity:0,onComplete:function(){cTitle1.innerHTML = scObj["cTitle1"];}});
- TweenMax.to(cTitle1,0.5,{x:"0px",opacity:1,delay:0.5,onComplete:function(){animating--;}})
- }
- if (cTitle2.innerHTML != scObj["cTitle2"]) {
- animating++;
- TweenMax.to(cTitle2,0.5,{x:"100px",opacity:0,delay:0.1,onComplete:function(){cTitle2.innerHTML = scObj["cTitle2"];}});
- TweenMax.to(cTitle2,0.5,{x:"0px",opacity:1,delay:0.6,onComplete:function(){animating--;}})
- }
- }
- }
- </script>
- </head>
- <body>
- <div id="container" class="hidden">
- <div id="l3rd">
- <div id="l3rdbg"></div>
- <div id="line1">Cameraman</div>
- <div id="line2">@Zhieeep</div>
- </div>
- <div id="logo"></div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement