Почему не работает анимированый фон на сайте?

Question

<!DOCTYPE html>
<html>
<head>
    <link rel="shortcu icon" href="photos/logotype.png" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
    <title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
         <script>
            $(document).ready(function (){
                $("#linkstatistic").click(function (){
                    $('html, body').animate({
                        scrollTop: $("#statistic").offset().top
                    }, 2000);
                });
            });
         </script>
</head>
<body>
<script src="three.r95.min.js"></script>
<script src="vanta.net.min.js"></script>
<script>
VANTA.NET({
  el: "#main",
  mouseControls: true,
  touchControls: true,
  minHeight: 200.00,
  minWidth: 200.00,
  scale: 1.00,
  scaleMobile: 1.00,
  color: 0x31415f,
  points: 18.00
})
</script>
    <div class="site" id="site">
        <div id="main">
    <div class="header">
        <img src="photos/logo1.png" class="logo">
            <a href="" class="link">test</a>
            <a href="" class="link">test</a>
            <a href="" class="link">test</a>
            <a class="link" id="linkstatistic">test</a>
    </div>
    <div class="content">
        <div class="container">
            <div class="row">
                <div class="col">
                    <center><img src="photos/logo.png" class="img"></center>
                </div>
                <div class="col">
                <center><a class="text">test</a></center>
                </div>
            </div>
            <div class="articles">
            <div class="row">
                <div class="col">
                    <center><img src="photos/test.jpg" class="articleimg"></center>
                </div>
                <div class="col">
                    <center><img src="photos/test.jpg" class="articleimg"></center>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <center><a href="" class="articleslink">test</a></center>
                </div>
                <div class="col">
                    <center><a href="" class="articleslink">test</a></center>
                </div>
            </div>
        </div>
    </div>
        <div class="aboutus" id="statistic">
            <center><a class="maintext">test</a></center>
            <div class="row">
                <div class="col">
                    <a class="whytext">test</a>
                </div>
                <div class="col">
                    <a class="whytext">test</a>
                </div>
                <div class="col">
                    <a class="whytext">test</a>
                </div>
                <div class="col">
                    <a class="whytext">test</a>
                </div>
            </div>
        </div>
        </div>
    </div>
</div>
</body>
</html>

@font-face{
            src:url(fonts/8289.otf);
            font-family: Intro;
        }
        @font-face{
            src:url(fonts/ARLRDBD.TTF);
            font-family: Arial;
        }
        @font-face{
            src:url(fonts/BloggerSans.ttf);
            font-family: BloggerSans;
        }
        body,html{
            padding: 0;
            margin: 0;
        }
        #particles-js{
            background-color: #232741;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            position: fixed;
            z-index: 1;
        }
        .site{
        }
        .link{
            margin-left: 20px;
            font-size: 25px;
            font-family: Arial;
            color: white;
            text-decoration: none;
        }
        .link:hover{
            text-decoration: underline;
        }
        .col{
            width: 50%;
            margin: 0;
            float: left;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .row{
            display: flex;
        }
        .container{
            width: 100%;
        }
        .content{
            margin-top: 20px;
        }
        .text{
            font-family: BloggerSans;
            font-size: 40px;
        }
        .articleimg{
            width: 400px;
            height: 200px;
            position: relative;
        }
        .articleslink{
            font-family: Arial;
            font-size: 25px;
            color: white;
            text-decoration: none;
            position: relative;
        }
        .articleslink:hover{
            text-decoration: underline;
        }
        .articles{
            margin-top: 50px;
        }
        .img{
            background-image: url(photos/logo.png);
        }
        .aboutus{
            width: 100%;
            height: 100vh;
            background-color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;

        }
        .maintext{
            font-family: Intro;
            font-size: 50px;
            animation: maintextanim 3s linear infinite;
        }
        @keyframes maintextanim{
            from{
                color: black;
            }
            50%{
                color: white;
            }
            to{
                color: black;
            }
        }
        .whytext{
            font-family: Arial;
            font-size: 25px;
            margin-top: 50px;
        }
        .whytext:hover{

        }

Почему не работает фон vanta.js?
Делал по данному уроку. https://www.youtube.com/watch?v=Kk9eegd_fJU
Если ставлю в скрипте вместо #main body, то все работает но не правильно, по размерам не подходит.

Answer 1

У тебя после </html> идет css, это ты показываешь содержимое style.css? Надеюсь в самом html у тебя не так.

По проблеме: Вероятно тебе нужно просто занулить margin, padding для html, body и тогда можно применять el: "body"

Если это не подходит, попробуй в css для #main указать position: relative;

Answer 2

Вообще я просто скопировал всё из директории и работает...смотрите

#your-element-selector {
  width: 100%;
  height: 100vh;
  background: #ccc;
}

<div id="your-element-selector"></div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<script src="https://f.usemind.org/files/scripts/0/vanta-webgl/vendor/three.r92.min.js"></script>
<script src="https://f.usemind.org/files/scripts/0/vanta-webgl/dist/vanta.birds.min.js"></script>

<script>
  VANTA.BIRDS({
    el: "#your-element-selector"
  })
</script>

БЛОГ НА HUSL

Почему не работает анимированый фон на сайте?

Ответы (2 шт):