Saksham Digital Technology - Coding Institute

Bubble Background Effect Using JS

https://youtube.com/shorts/kzd5LBuX5EE?si=9m4dzt0D2V32xthd

HTML CODE:-

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title></title>
</head>
<body>
<div class="container"></div>
</body>
</html>

CSS CODE:-

    *{
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }
        .container{
            position: relative;
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            background: black;
            overflow: hidden;
        }
        .container span{
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 20px;
            min-height: 20px;
        }
        .container span::before{
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background: url('https://media.istockphoto.com/id/1135164844/photo/nepal-girl-spreads-her-hands-wide-manang-valley.webp?b=1&s=170667a&w=0&k=20&c=0T3BVAkLCmyhhHzF-ODedLG8e94KqxSNtGc6X1U_Vdw=');
            background-position: center;
            background-size: cover;
            background-attachment: fixed;
            transition: 5s;
            opacity: 0;
            border-radius: 50%;
            pointer-events: none;
        }
        .container span:hover::before{
            width: 900%;
            height: 900%;
            transition: 0s;
            opacity: 1;
        }

JS CODE:-

for(let i = 1; i <= 800; i++){
        let x = document.createElement('span');
        document.querySelector('.container').appendChild(x);
   }