здравствуйте я начал создавать сайт и решил добавить анимированный фон и по большому счету у меня получилось но никак не выходит сделать так чтобы он был на всю страницу и элементы сайта должны по идей быть поверх фона кто разбирается пожалуйста помогите.
исходник для фона я взял с этого сайта---
https://www.vantajs.com/
остальные два файла я не вставил они болшие очен вы можете сами их посмотреть на сайте.
HTML CODE
|
Код:
|
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
<title>English Series</title>
</head>
<body>
<div class="intro" id="intro">
</div>
<script src="three.r119.min.js"></script>
<script src="vanta.waves.min.js"></script>
<script src="app.js"></script>
<!-- Это Первое Изображение-->
<a id="H2O" target="_blank" href=""><img src="assets/images/h2o.jpg" alt="H2O Just Add Water"></a>
<!-- Это Второе Изображение-->
<a id="Mako" target="_blank" href="https://www.netflix.com/title/70281343"><img src="assets/images/mako.jpg" alt="Mako Island Of Secrets"></a>
<!-- Это Третья Изображение-->
<a id="Vamp" target="_blank" href="https://ling.online/en/video/serials/the-vampire-diaries/"><img src="assets/images/Vampires.jpg" alt="The Vampire Diaries"></a>
<!-- Это Четвертое Изображение-->
<a id="Origin" target="_blank" href="https://www.netflix.com/search?q=originals%20&jbv=70283261&jbp=0&jbr=0"><img src="assets/images/Originals.jpg" alt="The Originals"></a>
<!-- Это Пятое Изображение-->
<a id="legends" target="_blank" href="https://watchfreenet.org/series/legacies/"><img src="assets/images/legacies.jpg" alt="Legacies"></a>
<!-- Это Шестое Изображение-->
<a id="wolf" target="_blank" href="https://www.netflix.com/search?q=vampire%20d&suggestionId=70143860_video&jbv=70219484&jbp=1&jbr=0"><img src="assets/images/Wolf.jpg" alt="Teen Wolf"></a>
</body>
</html> |
CSS CODE
|
Код:
|
body{
margin: 0;
padding: 0;
}
#Mako{
float: right;
}
#Origin{
float: right;
}
#wolf{
float: right;
} |
JAVASCRIPT CODE
VANTA.WAVES({
el: "#intro",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00
})
