Как заставить страницу HTML5 меняться в полноэкранном режиме - PullRequest
Новая
       0

Как заставить страницу HTML5 меняться в полноэкранном режиме

0 голосов
/ 23 декабря 2018

У меня есть простой файл index.html в качестве целевой страницы, который отображает полноэкранный gif:

index.html 

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Full-screen animated gif background</title>
    <style>
        /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
        html { 
          background:  url(https://media.giphy.com/media/2s0ouek7HJmWQ/giphy.gif) no-repeat center center fixed; 
          background-size: cover;
        }
        body {
            height: 100%;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
</html>

Давайте назовем это A .У меня есть другая версия ( B ), которая отображает полноэкранную страницу из частиц :

index.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Particles</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="particles-js">
        <div class="btext">
            <h1>logo here</h1>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <script>
        particlesJS.load('particles-js', 'particles.json')
    </script>
</body>
</html>

css / style.css

html,body{
    width:100%;
    height:100%;
    background:#111;
}
#particles-js{
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

Как сделать так, чтобы страница отображалась A , а затем, когда пользователь нажимает в любом месте экрана, она исчезает до B ?

Я начинающий с HTML и CSS, поэтому заранее спасибо!

1 Ответ

0 голосов
/ 23 декабря 2018

Вы можете использовать свойство непрозрачности в CSS. 

document.addEventListener('click', e => {
  document.getElementById('gif').classList.add('fade');
 });
 document.getElementById('particles-js').addEventListener('mousemove', e => {
 console.log('boop');
 });
html { 
        }
        body {
            height: 100%;
        }
div, img {
position:fixed;
height:100%;
width:100%;
}
#gif {
  z-index:2;
    background:  url(https://media.giphy.com/media/2s0ouek7HJmWQ/giphy.gif) no-repeat center center fixed; 
          background-size: cover;
  opacity:1;
}

#gif.fade {
  transition: 1s;
  opacity:0;
  z-index:-1; /* ADD THIS */
}
<div id="gif"></div>
<div id="particles-js">
        <div class="btext">
            <h1>logo here</h1>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <script>

     //particlesJS.load('particles-js', 'particles.json'); 
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...