Исчезать текст при загрузке - PullRequest
Новая
       23

Исчезать текст при загрузке

0 голосов
/ 17 февраля 2019

Я видел, что существуют разные способы затухания объекта при загрузке, но каждый раз, когда я пытаюсь применить его к своему собственному коду, я, должно быть, что-то напутал.Я пробовал css и javascript, поэтому я могу использовать все, что смогу.

Я бы хотел, чтобы Hello исчезал при загрузке, но через 5 секунд следующая страница также исчезла.

Вот мой код. 

<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link href="sky.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="sky.js"></script>

</head>


<body>
    <div id="Welcome">
        <h1> Hello </h1>
        </div>

     <div id="Next"> 
        <a href="next.html"><h2> Next Page </h2></a>
    </div> 

    <video autoplay muted loop id="VidBackground">
        <source src="video/home.mp4">
    </video>


</body>
</html>

, а вот мой css 

h1, h3, a {
    color: #ffffff;
    line-height: 2;
}

#welcome {
    position: absolute;
    bottom: 15%;
    right: 20%;
    z-index: 2;
}

#next {
    position: absolute;
    bottom: 10%;
    right: 20%;
    z-index: 2;
}

#VidBackground {
    position: fixed;
    right: 0;
    bottom: 0;
    object-fit: cover;
    z-index: -1;
}

1 Ответ

0 голосов
/ 17 февраля 2019

Это хорошо подойдет для переходов CSS.

Вы можете использовать их следующим образом:

transition: <css property> <transition-duration> <transition-function>

Пример: 

#next {
    transition: opacity 0.5s ease-in-out;
    opacity: 0;

    /*pointer-events makes this node not respond to mouse/touch events
    Which is probably what we want while the button is invisible.*/
    pointer-events: none;
}

Теперь, когда стиль opacity изменяется на #next, он будет меняться, а не появляться мгновенно.Обычно вы вызываете его с помощью некоторого javascript. 

window.onload = function() {
    setTimeout(function() {
        //Re-enable mouse/touch events on the #next button
        document.getElementById("next").style.pointerEvents = 'auto';

        //Show the #next button
        //Since opacity style is transitioned, the opacity change will automatically trigger the transition.
        document.getElementById("next").style.opacity = 1;
    }, 5000);
});

Дополнительную информацию о переходах можно найти в документах MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/transition

...