| leekyrave |
14.01.2021 23:06 |
Привет. Есть такой сайт - https://mint-plantation.ru/
На нем видно,что там где текст,то там не рисуются партиклы.
Как сделать там партиклы и чтобы менюшка не теряла свою кликабельность
код:
HTML:
Код:
Мятная плантация
☰
Mint Tools
зачем...
Mint Plantation © 2021
Все права защищены.Любое копирование материала запрещено!
Любое копирование материала запрещено!
let isenable = false;
function clicknav() {
if (isenable == false) {
openNav();
isenable = true;
} else {
closeNav();
isenable = false;
}
}
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
[CODE=css]body {
background-image: linear-gradient(135deg,#EEBD89, #D13ABD);
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .vkset {
left: 10;
padding: 0px 0px 0px 25px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #ffffff;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.active {
background-color: #4CAF50 !important;
}
canvas{
display:block;
vertical-align:bottom;
}
#particles-js {
width: 100%;
height: 100vh;
display: flex;
transition: margin-left .5s;
padding: 16px;
}
.particles-js-canvas-el {
position: absolute;
}
.footer {
height: 80px;
margin-top: -80px;
}
.footer .text {
position: absolute;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
font-family: "Lato", sans-serif;
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
[/CODE]
|