Add fade transition to background changes.
This commit is contained in:
parent
f1245c5a93
commit
2a4cd3c3b3
2 changed files with 75 additions and 2 deletions
|
@ -2,6 +2,8 @@
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
outline-style: none;
|
||||
}
|
||||
|
||||
html,
|
||||
|
@ -77,8 +79,19 @@ a:focus {
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
transition: background-color 2.1s;
|
||||
}
|
||||
.background img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
filter: blur(10px);
|
||||
transform: scale(1.2);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
will-change: z-index, opacity;
|
||||
opacity: 1;
|
||||
transition: opacity .5s;
|
||||
}
|
||||
|
||||
.index__title {
|
||||
|
|
|
@ -9,6 +9,8 @@ var fnp = {
|
|||
},
|
||||
ui: {
|
||||
mode: '',
|
||||
bgSwitch: false,
|
||||
currBg: '',
|
||||
},
|
||||
};
|
||||
|
||||
|
@ -128,13 +130,71 @@ fnp.ui.setBackground = function(bgPath) {
|
|||
}
|
||||
|
||||
this.eBg.style.backgroundColor = null;
|
||||
this.eBg.style.backgroundImage = 'url(\'' + (bgPath || '').toString() + '\')';
|
||||
this.switchBackground(bgPath);
|
||||
};
|
||||
fnp.ui.switchBackground = function(bgPath) {
|
||||
if(bgPath === this.currBg)
|
||||
return;
|
||||
this.currBg = bgPath;
|
||||
|
||||
if(this.bgSwitch) {
|
||||
setTimeout(this.switchBackground.bind(this, bgPath), 1000);
|
||||
return;
|
||||
}
|
||||
this.bgSwitch = true;
|
||||
|
||||
while(this.eBg.children.length > 2)
|
||||
this.eBg.removeChild(eBg.firstChild);
|
||||
|
||||
var newBg = null,
|
||||
hasNewBg = !!bgPath,
|
||||
oldBg = this.eBg.firstChild,
|
||||
hasOldBg = !!oldBg;
|
||||
|
||||
if(hasOldBg)
|
||||
oldBg.style.zIndex = '-1';
|
||||
|
||||
if(hasNewBg) {
|
||||
newBg = document.createElement('img');
|
||||
newBg.alt = newBg.src = bgPath;
|
||||
newBg.style.opacity = '0';
|
||||
newBg.style.zIndex = '1';
|
||||
newBg.onload = function() {
|
||||
setTimeout(function() {
|
||||
newBg.style.opacity = null;
|
||||
setTimeout(function() {
|
||||
newBg.style.zIndex = null;
|
||||
if(hasOldBg)
|
||||
this.eBg.removeChild(oldBg);
|
||||
this.bgSwitch = false;
|
||||
}.bind(this), 500);
|
||||
}.bind(this), 50);
|
||||
}.bind(this);
|
||||
newBg.onerror = function() {
|
||||
this.eBg.removeChild(newBg);
|
||||
newBg = null;
|
||||
hasNewBg = false;
|
||||
this.bgSwitch = false;
|
||||
}.bind(this);
|
||||
this.eBg.appendChild(newBg);
|
||||
} else if(hasOldBg) {
|
||||
oldBg.style.opacity = '0';
|
||||
setTimeout(function() {
|
||||
this.eBg.removeChild(oldBg);
|
||||
this.bgSwitch = false;
|
||||
}.bind(this), 500);
|
||||
} else {
|
||||
this.bgSwitch = false;
|
||||
}
|
||||
};
|
||||
fnp.ui.removeBackground = function() {
|
||||
this.switchBackground('');
|
||||
};
|
||||
fnp.ui.setBackgroundFade = function() {
|
||||
if(this.iColourFade !== 0)
|
||||
return;
|
||||
|
||||
this.eBg.style.backgroundImage = null;
|
||||
this.removeBackground();
|
||||
|
||||
var fader = function() {
|
||||
var colour = Math.floor(Math.random() * 0xFFFFFF).toString(16);
|
||||
|
|
Loading…
Reference in a new issue