KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2026-01-07 18:15:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dynamic background and transparent elements

Browse Source
This commit is contained in:
Nicolas A. Tonne
2014-10-19 23:48:33 +02:00
parent 8b3da2fcf9
commit c3a0e9ac07
3 changed files with 29 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
index.php
View File

@@ -3,6 +3,7 @@
<?php include("php/header.php"); ?> <?php include("php/header.php"); ?>
</head> </head>
<body> <body>
<div class="bgimage" id="bgimage"></div>
<div class="top vcent centered"> <div class="top vcent centered">
<div id="change" class="small"> <div id="change" class="small">
<?php <?php

6
js/youtube.js
View File

@@ -20,6 +20,7 @@ var syncInterval;
var title; var title;
var interval; var interval;
var viewers; var viewers;
var video_id;
var changed = false; var changed = false;
$(document).ready(function() $(document).ready(function()
@@ -172,10 +173,12 @@ function startNextSong()
getTitle(response); getTitle(response);
ytplayer.loadVideoById(response); ytplayer.loadVideoById(response);
beginning = true; beginning = true;
$("#bgimage").css("background-image", "url(http://img.youtube.com/vi/"+response+"/0.jpg)");
},2500); },2500);
updateList(); updateList();
changed = true changed = true
setTimeout(function() { setTimeout(function() {
changed = false; changed = false;
syncInterval = setInterval(getTime, 5000); syncInterval = setInterval(getTime, 5000);
@@ -227,6 +230,7 @@ function getTime()
console.log("forskjellige videoer!!"); console.log("forskjellige videoer!!");
ytplayer.pauseVideo(); ytplayer.pauseVideo();
ytplayer.loadVideoById(timeDifference[1]); ytplayer.loadVideoById(timeDifference[1]);
$("#bgimage").css("background-image", "url(http://img.youtube.com/vi/"+timeDifference[1]+"/0.jpg)");
setTimeout(function(){ setTimeout(function(){
//console.log(response); //console.log(response);
diffVideo = true; diffVideo = true;
@@ -278,6 +282,7 @@ function errorHandler(newState)
} }
}).responseText; }).responseText;
ytplayer.loadVideoById(response); ytplayer.loadVideoById(response);
$("#bgimage").css("background-image", "url(http://img.youtube.com/vi/"+response+"/0.jpg)");
},2500); },2500);
/* /*
setTimeout(function(){ setTimeout(function(){
@@ -298,4 +303,5 @@ function onPlayerReady(event) {
getTime(); getTime();
ytplayer.playVideo(); ytplayer.playVideo();
getTitle(); getTitle();
$("#bgimage").css("background-image", "url(http://img.youtube.com/vi/"+response+"/0.jpg)");
} }

31
static/style.css
View File

@@ -1,4 +1,4 @@
body{background:#FFF; margin:0;} body{background:#000; margin:0;}
.top{ .top{
font-family: 'Open Sans', sans-serif; font-weight: 300; text-align: center; font-family: 'Open Sans', sans-serif; font-weight: 300; text-align: center;
animation: fadein .5s; -moz-animation: fadein .5s; -webkit-animation: fadein .5s; -o-animation: fadein .5s; animation: fadein .5s; -moz-animation: fadein .5s; -webkit-animation: fadein .5s; -o-animation: fadein .5s;
@@ -6,22 +6,36 @@ body{background:#FFF; margin:0;}
.top, .top a{color:#ed207f; text-decoration: none;} .top, .top a{color:#ed207f; text-decoration: none;}
.vcent{position: relative; top: 50%; -webkit-transform: translateY(-50%);} .vcent{position: relative; top: 50%; -webkit-transform: translateY(-50%);}
::-webkit-input-placeholder{color: #FEFEFE;}
.innbox, .innbox a{ .innbox, .innbox a{
width:90%; height: 50px; border-radius:7px; border:none; font-family: 'Open Sans', sans-serif; font-size: 25px; margin-bottom: 20px; width:90%; height: 50px; border-radius:7px; border:none; font-family: 'Open Sans', sans-serif; font-size: 25px; margin-bottom: 20px;
color:#f15; text-align: center;-webkit-transition:background 1s;-moz-transition:background 1s;-o-transition:background 1s; transition:background 1s; color:#f15; text-align: center;-webkit-transition:background 1s;-moz-transition:background 1s;-o-transition:background 1s; transition:background 1s;
background-color: rgba(255, 255, 255, 0.22);
} }
.success{animation: fadecol 1.5s; -moz-animation: fadecol 1.5s; -webkit-animation: fadecol 1.5s; -o-animation: fadecol 1.5s;} .success{animation: fadecol 1.5s; -moz-animation: fadecol 1.5s; -webkit-animation: fadecol 1.5s; -o-animation: fadecol 1.5s;}
.error{animation: fadewrong 1.5s; -moz-animation: fadewrong 1.5s; -webkit-animation: fadewrong 1.5s; -o-animation: fadewrong 1.5s;} .error{animation: fadewrong 1.5s; -moz-animation: fadewrong 1.5s; -webkit-animation: fadewrong 1.5s; -o-animation: fadewrong 1.5s;}
.small{font-size: 5vw; color:#E2E2E2; display:block !important; text-decoration: none; } .small{font-size: 5vw; color:#E2E2E2; display:block !important; text-decoration: none; }
/*.small:hover{color: #CCC;}*/ /*.small:hover{color: #CCC;}*/
.big{font-size:180vh; position:absolute; top:-50%; color:#330A00 !important; z-index:-1; width: 100%; overflow: hidden; display: none;} .big{font-size:180vh; position:absolute; top:-50%; color:#330A00 !important; z-index:-1; width: 100%; overflow: hidden; display: none;}
.footer a{color:#696969; text-decoration: none;}.footer a:hover {color:#ed207f;} .footer a{color:#fefefe; text-decoration: none;}.footer a:hover {color:#ed207f;}
.footer{font-size: 15px; position:absolute; width:99%;color:#c0c0c0 !important; margin-top: 0; word-spacing: 2px;} .footer{font-size: 15px; position:absolute; width:99%;color:#c0c0c0 !important; margin-top: 0; word-spacing: 2px;}
.bottom{bottom:10px;} .bottom{bottom:10px;}
#channels{width:40%; min-width: 300px; padding-top: 4%; font-size: 25px;} #channels{width:40%; min-width: 300px; padding-top: 4%; font-size: 25px;}
.channel{padding: 7px; display: inline-block; font-weight: bold; color: #646464 !important;font-size: 18px;} .channel{padding: 7px; display: inline-block; font-weight: bold; color: #646464 !important;font-size: 18px;}
.channel:hover{color:#ed207f !important;} .channel:hover{color:#ed207f !important;}
.bgimage{
background-size: 180%;
background-repeat: no-repeat;
background-position: center center;
background-color: #000;
-webkit-filter: blur(50px) brightness(0.8);
position: absolute;
top: 40px;
left: 0;
width: 100%;
height: 90%;
}
.anim{transition: all .20s ease-in-out; -moz-transition: all .20s ease-in-out; -webkit-transition: all .20s ease-in-out;} .anim{transition: all .20s ease-in-out; -moz-transition: all .20s ease-in-out; -webkit-transition: all .20s ease-in-out;}
@@ -40,17 +54,16 @@ body{background:#FFF; margin:0;}
.thumb{height: 40px; width:80px; float: left;} .thumb{height: 40px; width:80px; float: left;}
.main{width:90%; margin: 0 auto 0 auto;} .main{width:90%; margin: 0 auto 0 auto;}
.playlist{background-color: #DADADA; width:20%; margin-left: 0px; display: inline-block; font-size: 14px; border-radius: 3px; vertical-align: top; /*overflow: hidden;*/ height: calc(87% - 183px); border-bottom:solid #c9c9c9 4px;} .playlist{background-color: none; width:37%; margin-left: 0px; display: inline-block; font-size: 14px; border-radius: 3px; vertical-align: top; /*overflow: hidden;*/ height: calc(87% - 183px);}
.lresult{padding:0; height: 60px; border-top: none; cursor: default; background-color: #DADADA;} .lresult{padding:0; height: 60px; border-top: none; cursor: default;}
.lthumb{height: 60px; margin-right: 10px; display: inline;} .lthumb{height: 35px; margin-right: 10px; display: inline;}
.ltitle{ color:#ed207f; overflow: hidden; height: 60px; } .ltitle{ color:#FFF; overflow: hidden; height: 60px; }
#result:nth-child(odd){background-color: #EEE;}
.votes{float: right; position: relative; margin-top: -1.4em; padding:0 3 0 4; background-color: rgba(50,50,50,0.45); color:#000; border-radius: 1px;} .votes{float: right; position: relative; margin-top: -1.4em; padding:0 3 0 4; background-color: rgba(50,50,50,0.45); color:#000; border-radius: 1px;}
#plus, #minus {text-decoration: none; color:white; margin-left: 2px; padding-left: 3px; padding-right: 3px; } #plus, #minus {text-decoration: none; color:white; margin-left: 2px; padding-left: 3px; padding-right: 3px; }
#plus:hover,#minus:hover{background-color: #111;} #plus:hover,#minus:hover{background-color: #111;}
#player{height: 68%; height: calc(87% - 183px); width: 78%; border-radius: 3px; border-bottom:solid #c9c9c9 4px;} #player{height: 68%; height: calc(87% - 183px); width: 60%; border-radius: 3px; }
#adminForm{text-align:left;} #adminForm{text-align:left;}
.adminBox{float:right;} .adminBox{float:right;}
#adminPanel{color:black;background-color:#EEE;position:absolute;z-index:1;width:18%; margin-top: -1px; padding-top: 15px; display: none;} #adminPanel{color:black;background-color:#EEE;position:absolute;z-index:1;width:18%; margin-top: -1px; padding-top: 15px; display: none;}