Website בועות סבון

[Rivki.]

וואיי מטורף!!

 

[א-ירושלמית]

מה הכוונה?

שהבועות לא יהיו לבנות עם שקיפות מסתובבת באמצע, אלא בצבעים מעבריים, ורצוי מעבר יותר מעניין מגרדיאנט ישר.

 

[roni ravitz]

שהבועות לא יהיו לבנות עם שקיפות מסתובבת באמצע, אלא בצבעים מעבריים, ורצוי מעבר יותר מעניין מגרדיאנט ישר.

משהו כזה?

Soap bubbles

easypress.co.il

 

[א-ירושלמית]

וואו, זה קסום!
אפשר לעשות בכמה סטים של צבעים?

וואו, אני מאתגרת...

 

[#ה_מ_ע_צ_ב_ת]

וואו. טירוף!
חכה שהילדים יבקשו צימר בצפון.

 

[אלישבע 2]

איפה מכניסים את הקוד הנ"ל?

 

[ויטמין C]

מהממם!!

 

[אשאבן]

כתבת את זה לבד?

 <script>
 
 
      document.addEventListener("mousemove", function(e){
          let body = document.querySelector('body');
          let bubble = document.createElement("span");
          bubble.classList.add('my-bubble');

          let x = e.offsetX;
          let y = e.offsetY;
          bubble.style.left = x+'px';
          bubble.style.top = y+'px';
          let size = Math.random() * 80;
          let transformValue = Math.random() * 360;
          bubble.style.width = 20 + size+'px';
          bubble.style.height = 20 + size+'px';
          bubble.style.transform = 'rotate(' + transformValue + 'deg)';
          body.appendChild(bubble);
         
          setTimeout(function(){
        bubble.remove();
      },1000)

     
      })
 
  </script>

body{
    height: 100vh;
    overflow: hidden;
     cursor: url(https://easypress.co.il/wp-content/uploads/2022/07/bubbles-2.png),auto;
   

}
.my-bubble
{
    position: absolute;
        pointer-events: none;

    transition: 0.5s;
   
    animation: my-animate 1s linear infinite;
}
.my-bubble::before
{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
    border-radius: 50%;
    animation: moveShape 1s linear infinite;
}
@keyframes my-animate
{
    0%,100%
    {
        opacity: 0;
       
    }
    20%,80%
    {
        opacity: 1;
   
    }
}
@keyframes moveShape
{
    0%
    {
        transform: translate(0) rotate(0deg);
    }
    100%
    {
        transform: translate(300px) rotate(360deg);
    }
}

 

[מיכל כ.]

וואו, מיוחד!!!

 

[roni ravitz]

וואו, זה קסום!
אפשר לעשות בכמה סטים של צבעים?

וואו, אני מאתגרת...

מפחד מהדרישה שתבוא אח"כ

 

[א-ירושלמית]

אל דאגה, אני לא משלמת. אני רק בודקת עד איפה אפשר למתוח את קצה גבול היכולת...
זה סתם בשביל הספורט.

ועכשיו אני שמה לב לזה:

 

[חיימנה]

זה פשוט הזוי
רק חבל שאין אפשרות לעשות בועות גדולות יותר.................

 

[וייס]

אםאי אפשר לתפוס חזרה זה לא שווה.....