Ricky Ricky - 1 month ago 15
CSS Question

opacity decreases and hides Div, then increases and shows next Div

I have put together a blur out/in effect for a landing page. You click the button, the page blurs out and then takes you to the main page, ( Its all one page just done with Div ID's). However it is not quite working how it is supposed too and i am not sure why.

It blurs out fine, ( a little slow to initialise but can optimise that), The problem lies on when i want the underlying Div to appear, i would like that to "fade in", as it stands it just appears after the fade out has finished.

Here is a snippet:



splash = document.getElementById('intro');
content = document.getElementById('content');

function enterSite (element) {
opac = 1;
fps = 1000/30;
function decrease() {
opac -= 0.02;
if (opac <= 0.1){
splash.style.display = 'none';
return true;
}
splash.style.opacity = opac;
setTimeout(decrease,fps);
}
function increase() {
opac += 0.02;
if (opac >= 0.1){
content.style.display = 'block';
return false;
}
content.style.opacity = opac;
setTimeout(increase,fps);
}
decrease(), increase();
}

html, body {
overflow: hidden;
}
main {
width: 100%;
height: 100vh;
position: relative;
}
#intro {
background-image: url(Images/splash.jpg);
background-repeat: no-repeat;
background-size: cover;
display: flex;
text-align: center;
height: 100vh;
}
#splash {
margin: auto;
width: 40%;
background-color: rgba(56,56,56,0.4);
border-radius: 50px 50px;
}
#splash-p {
width: 70%;
font-size: 1.2em;
line-height: 1.5em;
margin: auto;
text-align: center;
padding-top: 10px;
color: #fff;
}
.btn {
width: 35%;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
}

/* Main Content Page */

article {
position: absolute;
height: 100vh;
background-color: red;
}

<main>
<div id="intro">
<div id="splash">

<p id="splash-p">Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing.</p>

<input type="image" src="Images/Button.png" class="btn" onclick="enterSite()">

</div>
</div>

<article id="content">

Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,

</article>

</main>





Can i have an answer in Vanilla only please, No Jquery or Plugin's

Answer

I think you could benefit from breaking things out a little bit more and not nesting so many functions and calls. Also, it may be helpful to use a setInterval() instead of repeating setTimeout().

splash = document.getElementById('intro');
content = document.getElementById('content');
var fadeOut = null;
var fadeIn = null;
opac = 1;
fps = 1000/30;

function increase() {
    content.style.opacity = opac;
    opac += 0.02;

    if (opac >= 1){ //Opacity is 100%
      window.clearInterval(fadeIn); //Stop fade-in
    }

}

function decrease() {
    splash.style.opacity = opac;
    opac -= 0.02;

    if (opac < 0.1){ //If object is almost gone
        splash.style.display = 'none'; //Hide it completely
        window.clearInterval(fadeOut); //Stop fade-out

        content.style.display = 'block'; //Set up new content
        content.style.opacity = 0;
        fadeIn = setInterval(increase, fps); //Begin fade-in

    }
}

function enterSite () {
    fadeOut = setInterval(decrease, fps); //Start the fadeout
}

JSFiddle

Comments