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>
<body>
<!-- <div>Everlasting Summer</div>-->
<!--<div id="backgroundBottom">-->
<div id="background">
<div id="background1"></div>
<div id="background2"></div>
<div id="container"></div>
<div id="window">
<div id="textAuthor"></div>

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

@ -17,7 +17,7 @@ body {
line-height: 1.5;
}
#background {
#background, #background1, #background2 {
width: 100%;
height: 100%;
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.screenHeight = window.innerHeight;
this.backgroundTag = document.getElementById("background");
this.windowTag = document.getElementById("window");
this.textAuthorTag = document.getElementById("textAuthor");
this.textContentTag = document.getElementById("textContent");
@ -76,14 +75,39 @@ Views.prototype.background = function (type, name, effect) {
this.backgroundName = name;
this.text("");
var animationTime = 0;
var background = '';
if (name.equalsIgnoreCase("black")) {
this.backgroundTag.style.background = "black";
background = "black";
} else if (name.equalsIgnoreCase("white")) {
this.backgroundTag.style.background = "white";
background = "white";
} else {
this.backgroundTag.style.background = 'url("' + PathResolver.background(type, name) + '") no-repeat center center fixed';
this.backgroundTag.style.backgroundSize = 'cover';
background = 'url("' + PathResolver.background(type, name) + '") no-repeat center center fixed';
}
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);
};
@ -140,6 +164,8 @@ Views.prototype.hide = function (whoid, effect) {
img.fadeOut(transition["outTime"], function() {
$(this).remove();
});
} else {
img.remove();
}
} else {
img.remove();