Search code examples
javascripthtmlcssscreensplash-screen

Make splashscreen overlap elements

i am trying to make my splash screen overlap the website.

The splash screen gets pushed away by the elements that i want on the background.

here is my HTML

<!DOCTYPE html>
window.OneSignal = window.OneSignal || []; OneSignal.push(function() { OneSignal.init({ appId: "355bfb40-16e9-48aa-93c3-d9eb93775989", }); }); Rabbadz 
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600&amp;subset=latin-ext" rel="stylesheet">

    <!-- CSS -->
    <link href="assets/css/main.css" rel="stylesheet">

    <!-- JS -->
    <script src="assets/js/vendor/modernizr-2.8.3.min.js"></script>
    <script src="assets/js/vendor/jquery-1.12.0.min.js"></script>

    <script src="assets/js/plugins/animate-headline.js"></script>
    <script src="assets/js/main.js"></script>


</head>
<body>
    
    <audio id="myAudio">
        <source src="assets/sound.mp3" type="audio/mpeg">
    </audio>
    
       <!--logo-->
    <img src="assets/images/logo.png" class="logo">

                        <!-- Options headline effects: .rotate | .slide | .zoom | .push | .clip -->
                           <div class="hero-section hero-section--color clearfix zoom">

            <!--we are rabbadz-->
                                <div class="anitext">
                                            <div class="title-01 title-01--11 text-center">
                                                <h2 class="title__heading">
                                                    <div class="hero-section__words text-center">
                                                        <div class="title__effect is-visible">WE ARE RABBITS</div>
                                                        <div class="title__effect">WE ARE BADASS</div>
                                                        <div class="title__effect">WE ARE RABBADZ</div>
                                                    </div>
                                                </h2>
                                                <div class="title__description">Coming soon to the metaverse.</div>
            
                                                <!-- Options btn color: .btn-success | .btn-info | .btn-warning | .btn-danger | .btn-primary -->
                                                <div class="title__action"><a href="https://mint.rabbadz.com" class="btn btn-primary">MINT</a></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
            
    
      <!--Particles-->

    <div 
        id="particles-js"></div>
    
    <script src="assets/js/particles.js"></script>
    <script src="assets/js/app.js"></script> 

    <!-- splashscreen-->
    <div class="scene content-hidden scene">
        <div class="scene">
            <div class="moon"></div>
        </div>

        <script type="text/javascript">
            function stars(){
                let count = 500;
                let scene = document.querySelector('.scene');
                let i = 0;
                while(i < count){
                    let star = document.createElement("i");
                    let x = Math.floor(Math.random() * window.innerWidth);
                    let y = Math.floor(Math.random() * window.innerHeight);

                    let duration = Math.random() * 10;
                    let size = Math.random() * 2;

                    star.style.left = x+'px';
                    star.style.top = y+'px';
                    star.style.width = 1+size+'px';
                    star.style.height = 1+size+'px';

                    star.style.animationDuration = 5+duration+'s';
                    star.style.animationDelay = duration+'s';
                    scene.appendChild(star);
                   
                    i++

                }
            }
            stars();


        </script>

    <!--Rabbadverse button-->
$(function() { var scene = $('.scene'), enterButton = scene.find('.knop'); setTimeout(function() { scene.removeClass('content-hidden'); }, 500); enterButton.on('click', function(e) { e.preventDefault(); scene.addClass('content-hidden').fadeOut(); }); 
                var anitext = $('.forest'),
                    enterButton = scene.find('.knop');

                    setTimeout(function() {
                    forest.removeClass('content-hidden');
                }, 500);

                enterButton.on('click', function(e) {
                    e.preventDefault();
                    forest.addClass('content-hidden').fadeOut();
                });
                
                
            });
            
            
            
        </script>
var x = document.getElementById("myAudio"); function playAudio() { x.play(); } function pauseAudio() { x.pause(); } 
</body>
Solution

  • If I understand it right, you want your "scene" div above the black background div.

    You could achieve this by this simple css:

    .scene {
  position: fixed; /* make it relative to the viewport */
  inset: 0; /* make the div close to the edge of the relative element, here the viewport, so it takes the full screen */
}