Bubbles with the WebAnimationsAPI!

Developer
Adrian Payne
Size
4,100 Kb
Views
26,312
  1. Bubbles with the WebAnimationsAPI! Previews
  2. Bubbles with the WebAnimationsAPI! HTML Codes
  3. Bubbles with the WebAnimationsAPI! CSS Codes
  4. Bubbles with the WebAnimationsAPI! JS Codes

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! Previews
IQ Test

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();
})();
Bubbles with the WebAnimationsAPI! - Script Codes
Bubbles with the WebAnimationsAPI! - Script Codes
Home Page Home
Developer Adrian Payne
Username dazulu
Uploaded August 18, 2022
Rating 4
Size 4,100 Kb
Views 26,312
Do you need developer help for Bubbles with the WebAnimationsAPI!?

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!

Adrian Payne (dazulu) Script Codes
Name
Radio button label click select
CSS Shop Icon
Animated fire extinguisher
Pure CSS RSS Icon
A Pen by Adrian Payne
Animation Label Transition
Simple Advent calendar with message
CSS modal slide up animation with FB-ish zoom on scroll
CSS 3D Rotate
CSS Flame Animation
Create amazing web content with AI!

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!