Making Moving Bubbles


by Jeremy Caudle
code

Building upon what I made yesterday, I have made the bubbles animate and move upwards and hopefully outside of the viewport. I'm going to work on making the bubbles poppable in the future, but it will have to be done on a different day. I want to make the animations more dynamic as well. At the moment they're just animated via CSS and the specific animation assigned to the bubbles is based on whether they are odd or evenly numbered.

Enter some text below

View the code:

HTML and JS 
<section class="code-block">
            <div>
                <p>Enter some text below</p>
                <input id="word-input" type="text"><button id="bubble-button">Bubble</button>
            </div>
        </section>
        <script>
            /* Variables */
            const bodyElement = document.getElementsByTagName('body');
            const wordInput = document.getElementById('word-input');
            const bubbleBtn = document.getElementById('bubble-button');
            let words = [];
            
            /* Functions */

            function randomNum(minnum, maxnum) {
                min = Math.ceil(minnum);
                max = Math.floor(maxnum);
                return Math.floor(Math.random() * (maxnum - minnum) + minnum);
            }


            function bubbleMaker(array) {
                array.forEach( letter => {
                    let bubble = document.createElement('div');
                    bubble.setAttribute('class','bubble');
                    let posY = randomNum(97, 100);
                    let posX = randomNum(12, 88);
                    bubble.setAttribute('style', `top: ${posY}vh; left: ${posX}%;`);
                    bubble.innerText = letter;
                    document.body.appendChild(bubble);
                }
                )};


            /* Events */
            bubbleBtn.addEventListener('click', () => {
                words = wordInput.value.split('');
                console.log(words);
                wordInput.value = '';
                bubbleMaker(words);
            });

        </script>
CSS 
@keyframes float-up {
                0% {transform: translateY(0); opacity: .8;}
                100% {transform: translateY(-120vh); opacity: .1;}
            }

            @keyframes float-up-variation {
                0% {transform: translateY(0); opacity: .8;}
                100% {transform: translateY(-120vh); opacity: .1;}
            }


            section.code-block {
                min-height: 30vh;
                max-width: 20em;
                margin: 2rem auto;
                font-family: Helvetica, Arial, sans-serif;
            }

            .code-block div {
                margin: 0;
                padding: 1rem;
                background-color: rgba(255,255,255,.2);
            }

            .code-block p {
                color: rgb(112, 112, 112);
                margin: 0 0 1rem 0;
                text-align: center;
                text-transform: uppercase;
            }

            .code-block input {
                margin: 0 .5rem 0 0;
                border: solid 1px #dedede;
                padding: .5rem;
                border-radius: .25rem;
            }

            .code-block button {
                margin: 0;
                padding: .5rem;
                border-radius: .25rem;
                border: none;
                text-transform: uppercase;
								background-color: rgb(55, 109, 202);
								color: white;
            }

            .bubble {
                position: absolute;
                width: 2rem;
                height: 2rem;
                background: rgb(101,153,241);
background: radial-gradient(circle, rgba(101,153,241,0.11764705882352944) 0%, rgba(51,130,147,1) 100%); 
                color: rgb(55, 109, 202);
                font-weight: 900;
                border-radius: 50%;
                box-shadow: 10px 10px 8px 4px rgba(0, 0, 0, .01);
                display: grid;
                place-items: center;
                margin: 0;
                text-align: center;
                opacity: .8;
                backdrop-filter: blur(19px);
                -webkit-backdrop-filter: blur(19px);
                user-select: none;
                cursor: pointer;
            }

            .bubble:nth-of-type(odd) {
                animation-name: float-up;
                animation-timing-function: ease-in-out;
                animation-duration: 8s;
                animation-iteration-count: once;
                animation-delay: 0s;
                animation-fill-mode: forwards;
            }

            .bubble:nth-of-type(even) {
                animation-name: float-up-variation;
                animation-timing-function: ease-in-out;
                animation-duration: 11s;
                animation-iteration-count: once;
                animation-delay: 0s;
                animation-fill-mode: forwards;
}

            .bubble:hover {
                background: radial-gradient(circle, rgba(101,153,241,0.11764705882352944) 0%, rgba(51,130,147,1) 100%); 
                color: rgba(101,153,241,1);
            }

            @supports (display: grid) {
                section.code-block {
                    display: grid;
                    place-items: center;
                }
            }

Tags