Website בועות סבון

[roni ravitz]

הילדים ביקשו לעשות בועות סבון

Soap bubbles

easypress.co.il

 

[הכלבויניק]

מטורף!

 

[ברכי H]

הילדים ביקשו לעשות בועות סבון

Soap bubbles

easypress.co.il

ואוו!

 

[שוקו ציפס]

איך עושים את זה?

 

[Tamar__]

לא נורמלי
ואוווווווו

 

[sssvvv]

מטורף!!!!!!

 

[צדפית]

לא הפסקתי לעשות בועות סבון...
מגניב בטירוף!!!

 

[roni ravitz]

איך עושים את זה?

זה עם קוד (פחות מסובך ממה שנראה)

 

[פופקורן- עיצוב מקפיץ]

ממש תרפיה!
תודה

 

[SING]

ממש יפה!
סתם מעניין למה במעבר עכבר בצד ימין למטה מופיע בועות בצד שמאל העליון???

 

[הדבש והעוקץ]

יואו זה ממכררררררר

 

[אין שם פנוי- אילת]

חזקק!!!
אהבתיי!

 

[וכל מאמינים]

מגניב וממכר!

 

[roni ravitz]

ממש יפה!
סתם מעניין למה במעבר עכבר בצד ימין למטה מופיע בועות בצד שמאל העליון???

באמת שאלה טובה,
באופן מוזר זה בגלל התמונה של מוישי

 

[ראובן ליבוביץ]

רוני, כהרגלך, שיחקת אותה בענק!!
מצאת את הקוד הזה? או שיצרת אותו לבד?

 

[Abie]

וואו
מגניב לגמרי

 

[נועה סבאן]

נו אני במתח, מה הקוד????

 

[roni ravitz]

 <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]

אפשר לעשות את זה גם עם מעבר צבעוני?

מה הכוונה?