Bubbles with the WebAnimationsAPI!
How do I make an bubbles with the webanimationsapi!?
Created using the new Web Animations API. The parts I've used work native in latest Chrome. I've included the level 1 polyfill, however, which is why it will also work in other browsers without native support.. What is a bubbles with the webanimationsapi!? How do you make a bubbles with the webanimationsapi!? This script and codes were developed by Adrian Payne on 18 August 2022, Thursday.
Bubbles with the WebAnimationsAPI! - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bubbles with the WebAnimationsAPI!</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.1.4/web-animations.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Bubbles with the WebAnimationsAPI! - Script Codes CSS Codes
body, html { height: 100vh; overflow: hidden;
}
#container { background: #13021d url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/poiple.jpg"); background-size: cover; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); width: 100%; height: 100%;
}
#container > div { border-radius: 50%; background: #fff; position: absolute;
}
#container > div:nth-child(1n) { opacity: 0.5;
}
#container > div:nth-child(2n) { opacity: 0.3;
}
#container > div:nth-child(3n) { opacity: 0.1;
}
Bubbles with the WebAnimationsAPI! - Script Codes JS Codes
'use strict';
(function () { 'use strict'; var container = document.getElementById('container'); var fragment = document.createDocumentFragment(); // https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment var minSize = 20; var maxSize = 120; var distance = 12; // How far elements can travel. Using REM in this pen. var amount = 50; // Num of elements to generate function begin() { for (var i = 0; i < amount; i++) { fragment.appendChild(createElement()); } container.appendChild(fragment); // append all dynamically created elements at once generateAnimation(); // then build their animation } function createElement() { var element = document.createElement('div'); var diameter = Math.floor(Math.random() * maxSize + minSize) - 1; element.style.width = diameter + "px"; element.style.height = diameter + "px"; element.style.top = Math.floor(Math.random() * 100) + "%"; element.style.left = Math.floor(Math.random() * 100) + "%"; return element; } function generateAnimation() { var collection = document.querySelectorAll('#container > div'); collection = Array.prototype.slice.call(collection); collection.forEach(function (element) { element.animate([{ transform: 'translate(0,0)' }, { transform: 'translate(' + getDistance() + 'rem,' + getDistance() + 'rem)' }], { duration: (Math.random() + 1) * 10000, direction: 'alternate', easing: 'ease-in-out', fill: 'both', iterations: Infinity }); }); } // Generates a random +/- number function getDistance() { var num = Math.floor(Math.random() * distance) + 1; return num *= Math.floor(Math.random() * 2) == 1 ? 1 : -1; } begin();
})();
Developer | Adrian Payne |
Username | dazulu |
Uploaded | August 18, 2022 |
Rating | 4 |
Size | 4,100 Kb |
Views | 26,312 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
CSS modal slide up animation with FB-ish zoom on scroll | 5,349 Kb |
CSS Ribbons | 2,322 Kb |
Get Image Dimensions Client Side While Loading Image | 4,078 Kb |
Round and round we go... | 3,929 Kb |
Tile Game | 6,146 Kb |
Pure CSS RSS Icon | 3,063 Kb |
Code Against Humanity | 3,088 Kb |
CSS 3D Rotate | 3,154 Kb |
CSS Flame Animation | 2,927 Kb |
CSS butterfly | 4,053 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Blog Concept 2 | JGallardo | 2,994 Kb |
IbrahimJabbari-Effect14 | Ibrahimjabbari | 1,919 Kb |
Bubble animation | Ftabor | 6,565 Kb |
Update CSS Variables with JS | Wesbos | 2,335 Kb |
Compare resources on mobile sites | Gyusza | 3,226 Kb |
Blank Starter | Mhartington | 2,171 Kb |
Pure CSS Torch Light | Juliendargelos | 2,727 Kb |
Loading animation | Codeams | 2,408 Kb |
Pagepilling.js | Blossk | 6,554 Kb |
Starting out with Ember.JS | Cfleschhut | 4,808 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!