A quick snippet to generate random soda-like bubble moving effect.
A Pen by Arpad Bajzath on CodePen.
Created
February 1, 2023 14:36
-
-
Save ilifeup/cec3b54932690dbecb6be84088ced1a8 to your computer and use it in GitHub Desktop.
Random moving bubbles
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .canvas | |
| - (1..50).each do | |
| .bubble |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| random(min,max) | |
| return floor(math(0, 'random')*(max - min + 1) + min) | |
| randomT(min,max) | |
| return floor(math(0, 'random')*(max - min + 1) + min)s | |
| .canvas | |
| height 100vh | |
| width 100vw | |
| background: linear-gradient(to bottom, #edfffa 0%,#31c5d6 100%) | |
| position relative | |
| overflow hidden | |
| .bubble | |
| display block | |
| border-radius: 100% | |
| opacity: .8 | |
| position absolute | |
| for $i in (1..50) | |
| $bgpos = $i % 2 == 0 ? top right : center | |
| .bubble | |
| &:nth-child({$i}) | |
| background: radial-gradient(ellipse at $bgpos, #b8c6c6 0%,#30b3d3 46%,#20628c 100%) | |
| width: random(5, 100)px | |
| height: @width | |
| left: random(1, 100)vw | |
| bottom: random(1, 100)vh | |
| animation move+$i infinite randomT(3, 15) | |
| @keyframes move{$i} | |
| 0% | |
| bottom: -100px | |
| 100% | |
| bottom: random(0, 100)vh | |
| transform: translate(random(-100, 200)px, 0) | |
| opacity 0 | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment