KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-12-08 20:48:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Transition on background image, needs work

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2015-02-12 14:28:55 +01:00
parent a61846beab
commit bcd76901a3
2 changed files with 8 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
js/youtube.js
View File

@@ -366,7 +366,11 @@ function setBGimage(id){
{ {
$("#bgimage").css("background-image", "url(bg4.jpg);"); $("#bgimage").css("background-image", "url(bg4.jpg);");
}else if(window.mozInnerScreenX == null && !window.mobilecheck()){ }else if(window.mozInnerScreenX == null && !window.mobilecheck()){
$("#bgimage").addClass("noopacity");
setTimeout(function(){
$("#bgimage").css("background-image", "url(http://img.youtube.com/vi/"+id+"/0.jpg)"); $("#bgimage").css("background-image", "url(http://img.youtube.com/vi/"+id+"/0.jpg)");
$("#bgimage").removeClass("noopacity");
}, 1000);
}else if(window.mobilecheck()){ }else if(window.mobilecheck()){
$("#mobile-banner").css("background-image", "url(http://img.youtube.com/vi/"+id+"/hqdefault.jpg)"); $("#mobile-banner").css("background-image", "url(http://img.youtube.com/vi/"+id+"/hqdefault.jpg)");
$("#mobile-banner").css("width",$(window).width()); $("#mobile-banner").css("width",$(window).width());

3
static/style.css
View File

@@ -31,6 +31,7 @@ body{background:#000; margin:0; }
.channel{padding: 7px; display: inline-block; font-weight: bold; color: #C4C4C4 !important;font-size: 18px;} .channel{padding: 7px; display: inline-block; font-weight: bold; color: #C4C4C4 !important;font-size: 18px;}
.channel:hover{color:grey !important;} .channel:hover{color:grey !important;}
.bgimage{ .bgimage{
-webkit-transition: opacity 1s;
background-size: 180%; background-repeat: no-repeat; background-position: center center; background-color: #000; /*background-image: url(bg5.jpg);*/ background-size: 180%; background-repeat: no-repeat; background-position: center center; background-color: #000; /*background-image: url(bg5.jpg);*/
-webkit-filter: blur(50px) brightness(0.8); -moz-filter:blur(50px) brightness(0.8); -ms-filter:blur(50px) brightness(0.8); -o-filter: blur(50px) brightness(0.8); filter: blur(50px) brightness(0.8); -webkit-filter: blur(50px) brightness(0.8); -moz-filter:blur(50px) brightness(0.8); -ms-filter:blur(50px) brightness(0.8); -o-filter: blur(50px) brightness(0.8); filter: blur(50px) brightness(0.8);
position: absolute; top: 0px; left: 0; width: 100%; height: 100%; position: absolute; top: 0px; left: 0; width: 100%; height: 100%;
@@ -74,6 +75,8 @@ body{background:#000; margin:0; }
#add{font-weight: normal; margin-right: 5%; margin-top: -36px;font-size: 30px;padding: 3px 45px; } #add{font-weight: normal; margin-right: 5%; margin-top: -36px;font-size: 30px;padding: 3px 45px; }
#add:hover{color:black;} #add:hover{color:black;}
.noopacity{opacity:0;}
#minus{display:none;} #minus{display:none;}
#player{height: 68%; height: calc(87% - 213px); width: 60%; border-radius: 3px; /*box-shadow: 0 8px 11px -4px black;*/} #player{height: 68%; height: calc(87% - 213px); width: 60%; border-radius: 3px; /*box-shadow: 0 8px 11px -4px black;*/}