Блог

Главная - Вопросы по программированию - здравствуйте, у меня небольшая проблема с моей функцией, я бы хотел, чтобы шары не превышали ширину html

здравствуйте, у меня небольшая проблема с моей функцией, я бы хотел, чтобы шары не превышали ширину html

#javascript #html #css

Вопрос:

функция выполнена очень хорошо, проблема в том, что, когда шары появляются случайным образом, иногда они находятся слишком близко к краю, чтобы видеть снаружи, внезапно они сдвигают HTML и его созданные белые границы, в отзывчивости это ужас. если вы можете помочь мне придумать способ разграничить html так, чтобы шарики следовали за границей html и никогда не выходили за ее пределы. Заранее спасибо

 let time = 000;
const creation_de_cercle = () =>{
    const r = () => Math.floor(Math.random() * 255);
    const g = ()=> Math.floor(Math.random() * 255);
    const b = ()=> Math.floor(Math.random() * 255);

    const colorString = ()=> `rgb(${r()}, ${g()}, ${b()})`;
    // permet de créé une couleur random en compilent les trois variable au dessus 
    // const colorString = `rgb(${r}, ${g}, ${b})`;
  
    const circle = document.createElement("span");// creation d'element html rapide avec "document.body.appendChild(circle);"
    circle.classList.add('cercle');// ahoute un class 'cercle' a la span
    //permet de créé un taille aleatoir de min"30" 
    let taille_du_cercle = Math.random() * 150   30   "px"; 
    // injection du top et du lef en random 
    circle.style.top = Math.random() * 100   "%"; 
    circle.style.left = Math.random() * 100   "%";
    console.log(circle.style.left);
    // inject une hauteur a la balise "span"
    circle.style.height = taille_du_cercle;
    circle.style.width = taille_du_cercle;
    // random la rotation des boules à chaque apparition 
    circle.style.transform ="rotate("  Math.random()*360  "deg" ")";
     // random la linea-gradient des boules à chaque apparition 
    circle.style.background = "linear-gradient("  Math.random()*360  "deg,"  colorString()   "0%,"  colorString() "100%)";
    circle.style.zIndex = Math.random()* 1000 ;
    // circle.style.boxShadow = Math.random()
    document.body.appendChild(circle); 
    // efface les boulles 
    setTimeout(() => {
        circle.remove();
    },12000);
    time= 4000;
    

}; 
 body{
    height:200vh;

}
/* edition de la class créé en JS  */
.cercle{ 
    position: absolute; 
    border-radius:500px; 
    animation:animation 100s;
    transition: .5s;
    box-shadow: 2px 35px 85px -8px rgba(42, 42, 42, 0.582);
    
}

/* creation de l'animation pour HUE_ROTATE */
@keyframes animation {
    0%{
       
        transform:rotate(0deg);
        opacity:0;
        
    }
    10%{
        opacity:1;
    }
    50%{
        opacity:1;
    }
    100% {
        top: -100%;
        transform:rotate(1200deg);
        opacity:0;
    }
}
Метки: , , ,