Add background transition animations
This commit is contained in:
parent
c7539bc0d5
commit
669f8b74a6
@ -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>
|
||||
|
@ -17,7 +17,7 @@ body {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
#background {
|
||||
#background, #background1, #background2 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
|
File diff suppressed because one or more lines are too long
@ -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();
|
||||
|
Loading…
Reference in New Issue
Block a user