PDA

Просмотр полной версии : как поместить текст внутрь партиклов.js


leekyrave
14.01.2021, 23:06
Привет. Есть такой сайт - https://mint-plantation.ru/ (https://www.blast.hk/redirect/aHR0cHM6Ly9taW50LXBsYW50YXRpb24ucnUv)

На нем видно,что там где текст,то там не рисуются партиклы.

Как сделать там партиклы и чтобы менюшка не теряла свою кликабельность

код:

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";
}

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";

}

MrTNTminer
15.01.2021, 03:51
1. На StackOverflow нашел решение проблемы, возможно подойдет, почитай (не разбирался с particle.js) -> https://stackoverflow.com/questions/40944477/particles-js-not-allowing-spawn-around-text (https://www.blast.hk/redirect/aHR0cHM6Ly9zdGFja292ZXJmbG93LmNvbS9xdWVzdGlvbnMvND A5NDQ0NzcvcGFydGljbGVzLWpzLW5vdC1hbGxvd2luZy1zcGF3 bi1hcm91bmQtdGV4dA)

2. Чтобы оповещение о Cookie было поверх текста, добавь стилю cookie_notification элемент

z-index: 10;

. Если какие-то другие элементы будут поверх оповещения, сделай число z-index у оповещения больше, чем у элемента перекрывающего его.

Возможно что-то сказал не правильно, те кто лучше разбираются могут поправить меня.

leekyrave
15.01.2021, 11:38
1. На StackOverflow нашел решение проблемы, возможно подойдет, почитай (не разбирался с particle.js) -> https://stackoverflow.com/questions/40944477/particles-js-not-allowing-spawn-around-text (https://www.blast.hk/redirect/aHR0cHM6Ly9zdGFja292ZXJmbG93LmNvbS9xdWVzdGlvbnMvND A5NDQ0NzcvcGFydGljbGVzLWpzLW5vdC1hbGxvd2luZy1zcGF3 bi1hcm91bmQtdGV4dA)
2. Чтобы оповещение о Cookie было поверх текста, добавь стилю cookie_notification элемент

z-index: 10;

. Если какие-то другие элементы будут поверх оповещения, сделай число z-index у оповещения больше, чем у элемента перекрывающего его.

Возможно что-то сказал не правильно, те кто лучше разбираются могут поправить меня.


спасибо,попробую