Redirect to another Page With Avascript in a smooth way (slide, fade in , etc)

Asked

Viewed 523 times

0

Guys down here is my code. the following happens: I am using a java function that automatically redirects the user to another page. turns out that when directing the user, the page transition was with fade or something smooth. the link of the site below is in the air , if someone wants to enter to take a look is easier to understand.

https://dannslima.github.io/danilovasconcelos/

" THE FIRST PAGE IS BLACK, THE SECOND PAGE IS WHITE IF I CAN APPLY A SMOOTH TRANSITION IT WILL LOOK AS IF IT WERE A PAGE BEHIND SLOWLY APPEARING "

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <style>
        body {
            background: black;
        }
    </style>
</head>
<script>

    function redirecionar() {
        window.location.href = "/index.html";
        document.getElementById("fundo").style.background = "red";

    };
    setTimeout(redirecionar, 3000);

</script>

<body id="fundo">
    <h1 style="font-size: 3em ; color: white ; text-align: center">DANILO VASCONCELOS</h1>

</body>

</html>
javascript html css function transition

  • As a young man, I didn’t understand very well what you want... have some example, or can explain your idea better?

  • of course.. look at this site http://wp.regaltheme.com/mim/#service . the first screen is black with the title "me".. then there is a slight transition to the main screen

1 answer

1


Face this is an animation of fade when it enters the page, so much so that if you walk in there and keep squeezing f5 the animation is recharging etc..

It is not something difficult to do, just you have an element with position:fixed and that covers the entire fabric and with a animation to fade.

inserir a descrição da imagem aqui

To put the text in the center of the screen I used flexbox in the container father and a pseudo element ::after in div.mim and put the text on .mim::after { content: "MIM" }

Follow the image code above:

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.mim {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
   user-select: none;
  z-index: 10;
  opacity: 1;
  animation: fade 1000ms linear forwards;
}
.mim::after {
  content: "MIM"; /* texto MIM que está no centro da tela */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 3rem;
  color: #fff;
}

@keyframes fade {
  0% {
    z-index: 10;
    opacity: 1;
  }
  99.9% {
    z-index: -10;
    opacity: 0;
    width: 100%;
    height: 100%;
  }
  100% {
    z-index: -10;
    opacity: 0;
    width: 1px;
    height: 1px;
  }
}
<div class="mim"></div><!-- div que vai cobrir tudo e tem o efeito de fade -->

<h1>meu h1</h1>
<h3>meu h3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis aperiam et numquam ea. Expedita eos qui consequuntur debitis rem sunt alias dolor necessitatibus. Accusantium pariatur veritatis fuga distinctio laborum porro.</p>

<img src="https://unsplash.it/100/100">

<form action="">
  <input type="text"><br>
  <input type="text"><br>
  <button>btn</button>
</form>

Option 2

If you want to do jQuery just do one fadeOut() in the element. Note that it is now not a CSS animation, but jQuery that does the fade in div.mim. Official documentation of jQuery about this: https://api.jquery.com/fadeOut/

See the result in the code below:

$(document).ready(function() {
    $(".mim").fadeOut("slow");
})
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.mim {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    z-index: 10;
}

.mim::after {
    content: "MIM";
    /* texto MIM que está no centro da tela */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 3rem;
    color: #fff;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="mim"></div><!-- div que vai cobrir tudo e tem o efeito de fade -->

<h1>meu h1</h1>
<h3>meu h3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis aperiam et numquam ea. Expedita eos qui consequuntur debitis rem sunt alias dolor necessitatibus. Accusantium pariatur veritatis fuga distinctio laborum porro.</p>

<img src="https://unsplash.it/100/100">

<form action="">
    <input type="text"><br>
    <input type="text"><br>
    <button>btn</button>
</form>

  • 1

    hello, it was right. I used the first option because I don’t know about jquery. mt top. I will study more about the after property"

Browser other questions tagged javascript html css function transition

You are not signed in. Login or sign up in order to post.