NCGEARS/cheesy-arena-lite
1
0
Fork 0
mirror of https://github.com/Team254/cheesy-arena-lite.git synced 2026-03-09 21:56:50 -04:00
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Fix Sizing Issues with Center Orb on Audience Display

Browse Source
This commit is contained in:
Nick Eyre
2014-08-24 15:00:34 -07:00
parent d0f9293d02
commit bbc93b22db
4 changed files with 35 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
static/css/audience_display.css
View File

@@ -139,6 +139,7 @@ html {
background-size: 200%;
height: 100%;
width: 50%;
overflow: hidden;
}
.blinds.left {
background-position: left;
@@ -156,21 +157,10 @@ html {
.blinds.background {
background-image: url("/static/img/endofmatch-bg.png");
}
.blinds.center {
position: fixed;
background-image: url("/static/img/endofmatch-center.png");
}
.blinds.center-blank {
background-image: url("/static/img/endofmatch-center-blank.png");
-webkit-backface-visibility: hidden;
z-index: 3;
}
#blindsCenter {
.blindsCenter {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto auto;
border-radius: 50%;
width: 310px;
@@ -181,8 +171,22 @@ html {
text-align: center;
-webkit-backface-visibility: hidden;
z-index: 2;
}
.blindsCenter.full {
left: 0;
right: 0;
transform: rotateY(-180deg);
}
.blinds.left .blindsCenter.blank {
right: -155px;
}
.blinds.full .blindsCenter.blank {
right: 0;
left: 0;
}
.blinds.right .blindsCenter.blank {
left: -155px;
}
#blindsLogo {
position: relative;
top: 85px;

BIN
static/img/endofmatch-center-blank.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

23
static/js/audience_display.js
View File

@@ -185,21 +185,22 @@ var transitionInMatchToBlank = function(callback) {
};
var transitionBlankToLogo = function(callback) {
$(".blindsCenter.blank").css({rotateY: "0deg"});
$(".blindsCenter.full").css({rotateY: "-180deg"});
$(".blinds.right").transition({queue: false, right: 0}, 1000, "ease");
$(".blinds.left").transition({queue: false, left: 0}, 1000, "ease", function() {
$(".blinds.left").addClass("full");
$(".blinds.right").hide();
$(".blinds.center-blank").css({rotateY: "0deg"});
setTimeout(function() {
$(".blinds.center-blank").transition({queue: false, rotateY: "180deg"}, 500, "ease");
$("#blindsCenter").transition({queue: false, rotateY: "0deg"}, 500, "ease", callback);
$(".blindsCenter.blank").transition({queue: false, rotateY: "180deg"}, 500, "ease");
$(".blindsCenter.full").transition({queue: false, rotateY: "0deg"}, 500, "ease", callback);
}, 200);
});
};
var transitionLogoToBlank = function(callback) {
$(".blinds.center-blank").transition({queue: false, rotateY: "360deg"}, 500, "ease");
$("#blindsCenter").transition({queue: false, rotateY: "180deg"}, 500, "ease", function() {
$(".blindsCenter.blank").transition({queue: false, rotateY: "360deg"}, 500, "ease");
$(".blindsCenter.full").transition({queue: false, rotateY: "180deg"}, 500, "ease", function() {
setTimeout(function() {
$(".blinds.left").removeClass("full");
$(".blinds.right").show();
@@ -210,7 +211,7 @@ var transitionLogoToBlank = function(callback) {
};
var transitionLogoToScore = function(callback) {
$("#blindsCenter").transition({queue: false, top: "-350px"}, 750, "ease", function () {
$(".blindsCenter.full").transition({queue: false, top: "-350px"}, 750, "ease", function () {
$("#finalScore").show();
$("#finalScore").transition({queue: false, opacity: 1}, 1000, "ease", callback);
});
@@ -225,7 +226,7 @@ var transitionBlankToScore = function(callback) {
var transitionScoreToLogo = function(callback) {
$("#finalScore").transition({queue: false, opacity: 0}, 500, "linear", function() {
$("#finalScore").hide();
$("#blindsCenter").transition({queue: false, top: 0}, 750, "ease", callback);
$(".blindsCenter.full").transition({queue: false, top: 0}, 750, "ease", callback);
});
};
@@ -264,7 +265,7 @@ var transitionLowerThirdToBlank = function(callback) {
};
var transitionBlankToSponsor = function(callback) {
$(".blinds.center-blank").css({rotateY: "90deg"});
$(".blindsCenter.blank").css({rotateY: "90deg"});
$(".blinds.right").transition({queue: false, right: 0}, 1000, "ease");
$(".blinds.left").transition({queue: false, left: 0}, 1000, "ease", function() {
$(".blinds.left").addClass("full");
@@ -279,17 +280,17 @@ var transitionBlankToSponsor = function(callback) {
var transitionSponsorToBlank = function(callback) {
$("#sponsor").transition({queue: false, opacity: 0}, 1000, "ease", function() {
setTimeout(function() {
$("#sponsor").hide();
$(".blinds.left").removeClass("full");
$(".blinds.right").show();
$(".blinds.right").transition({queue: false, right: "-50%"}, 1000, "ease");
$(".blinds.left").transition({queue: false, left: "-50%"}, 1000, "ease", callback);
$("#sponsor").hide();
}, 200);
});
};
var transitionLogoToSponsor = function(callback) {
$("#blindsCenter").transition({queue: false, rotateY: "90deg"}, 750, "ease", function () {
$(".blindsCenter.full").transition({queue: false, rotateY: "90deg"}, 750, "ease", function () {
$("#sponsor").show();
$("#sponsor").transition({queue: false, opacity: 1}, 1000, "ease", callback);
});
@@ -297,8 +298,8 @@ var transitionLogoToSponsor = function(callback) {
var transitionSponsorToLogo = function(callback) {
$("#sponsor").transition({queue: false, opacity: 0}, 1000, "ease", function() {
$(".blindsCenter.full").transition({queue: false, rotateY: "0deg"}, 750, "ease", callback);
$("#sponsor").hide();
$("#blindsCenter").transition({queue: false, rotateY: "0deg"}, 750, "ease", callback);
});
};