other-projects/RpyPlayerWeb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add background transition animations

Browse Source
This commit is contained in:
Victor 2015-12-06 15:26:35 +02:00
parent c7539bc0d5
commit 669f8b74a6
4 changed files with 39 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public_html/index.html
View File

@ -18,8 +18,9 @@
</head> </head>
<body> <body>
<!-- <div>Everlasting Summer</div>--> <!-- <div>Everlasting Summer</div>-->
<!--<div id="backgroundBottom">-->
<div id="background"> <div id="background">
<div id="background1"></div>
<div id="background2"></div>
<div id="container"></div> <div id="container"></div>
<div id="window"> <div id="window">
<div id="textAuthor"></div> <div id="textAuthor"></div>

2
public_html/resources/css/style.css
View File

@ -17,7 +17,7 @@ body {
line-height: 1.5; line-height: 1.5;
} }
#background { #background, #background1, #background2 {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: black; background: black;

8
public_html/resources/js/Main.js
View File

File diff suppressed because one or more lines are too long

38
public_html/resources/js/Views.js
View File

@ -5,7 +5,6 @@ function Views(parser) {
this.screenWidth = window.innerWidth; this.screenWidth = window.innerWidth;
this.screenHeight = window.innerHeight; this.screenHeight = window.innerHeight;
this.backgroundTag = document.getElementById("background");
this.windowTag = document.getElementById("window"); this.windowTag = document.getElementById("window");
this.textAuthorTag = document.getElementById("textAuthor"); this.textAuthorTag = document.getElementById("textAuthor");
this.textContentTag = document.getElementById("textContent"); this.textContentTag = document.getElementById("textContent");
@ -76,14 +75,39 @@ Views.prototype.background = function (type, name, effect) {
this.backgroundName = name; this.backgroundName = name;
this.text(""); this.text("");
var animationTime = 0; var background = '';
if (name.equalsIgnoreCase("black")) { if (name.equalsIgnoreCase("black")) {
this.backgroundTag.style.background = "black"; background = "black";
} else if (name.equalsIgnoreCase("white")) { } else if (name.equalsIgnoreCase("white")) {
this.backgroundTag.style.background = "white"; background = "white";
} else { } else {
this.backgroundTag.style.background = 'url("' + PathResolver.background(type, name) + '") no-repeat center center fixed'; background = 'url("' + PathResolver.background(type, name) + '") no-repeat center center fixed';
this.backgroundTag.style.backgroundSize = 'cover'; }
var animationTime = 0;
$('#background1').css('background', $('#background2').css('background'));
$('#background1').show();
if (effect in transitions) {
var transition = transitions[effect];
if (transition["type"] === Transition.TYPE_FADE) {
animationTime = transition["inTime"] + transition["outTime"];
$('#background2').hide();
$('#background2').css('background', background);
$('#background2').css('backgroundSize', 'cover');
$('#background1').fadeOut(transition["outTime"], function () {
$('#background2').fadeIn(transition["inTime"], function () {
$('#background1').hide();
$(this).show();
});
});
} else {
$('#background2').css('background', background);
$('#background2').css('backgroundSize', 'cover');
}
} else {
$('#background2').css('background', background);
$('#background2').css('backgroundSize', 'cover');
} }
this.pause(animationTime, false); this.pause(animationTime, false);
}; };
@ -140,6 +164,8 @@ Views.prototype.hide = function (whoid, effect) {
img.fadeOut(transition["outTime"], function() { img.fadeOut(transition["outTime"], function() {
$(this).remove(); $(this).remove();
}); });
} else {
img.remove();
} }
} else { } else {
img.remove(); img.remove();