A Pen by John Heiner

Developer
John Heiner
Size
3,599 Kb
Views
16,192
  1. A Pen by John Heiner Previews
  2. A Pen by John Heiner HTML Codes
  3. A Pen by John Heiner CSS Codes
  4. A Pen by John Heiner JS Codes

How do I make an a pen by john heiner?

What is a a pen by john heiner? How do you make a a pen by john heiner? This script and codes were developed by John Heiner on 14 November 2022, Monday.

A Pen by John Heiner Previews
IQ Test

A Pen by John Heiner - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by John Heiner</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="emitter"></div>
<div id="instructions">Click the dot.</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.2/TweenMax.min.js'></script>
<script src='https://greensock.com/js/src/plugins/Physics2DPlugin.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by John Heiner - Script Codes CSS Codes

body, html { background-color: black; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
#emitter { background-color: #222; position: absolute; width: 100px; height: 100px; border-radius: 50%; top: 50%; left: 50%;
}
.dot { background-color: #fff; border-radius: 50%; position: absolute;
}
#instructions { position: fixed; top: 10px; text-align: center; color: #999; width: 100%; font-family: Arial, sans-serif;
}

A Pen by John Heiner - Script Codes JS Codes

var emitter = document.getElementById("emitter"), //we'll put all the dots into this container so that we can move the "explosion" wherever we please. container = document.createElement("div"), //the following variables make things configurable. Play around. emitterSize = 100, dotQuantity = 50, dotSizeMax = 100, dotSizeMin = 10, speed = 1, gravity = 1;
//setup the container with the appropriate styles
container.style.cssText = "position:absolute; left:0; top:0; overflow:visible; z-index:5000; pointer-events:none;";
document.body.appendChild(container);
//just for this demo, we're making the emitter's size dynamic and we set xPercent/yPercent to -50 to accurately center it.
TweenLite.set(emitter, {width:emitterSize, height:emitterSize, xPercent:-50, yPercent:-50});
//The "explosion" is just a TimelineLite instance that we can play()/restart() anytime. This helps ensure performance is solid (rather than recreating all the dots and animations every time the user clicks)
var explosion = createExplosion(container);
function createExplosion(container) { var tl = new TimelineLite(), angle, length, dot, i, size; //create all the dots for (i = 0; i < dotQuantity; i++) { dot = document.createElement("div"); dot.className = "dot"; size = getRandom(dotSizeMin, dotSizeMax); container.appendChild(dot); angle = Math.random() * Math.PI * 2; //random angle //figure out the maximum distance from the center, factoring in the size of the dot (it must never go outside the circle), and then pick a random spot along that length where we'll plot the point. length = Math.random() * (emitterSize / 2 - size / 2); //place the dot at a random spot within the emitter, and set its size. TweenLite.set(dot, { x:Math.cos(angle) * length, y:Math.sin(angle) * length, width:size, height:size, xPercent:-50, yPercent:-50, force3D:true }); //this is where we do the animation... tl.to(dot, 1 + Math.random(), { opacity:0, /*physics2D:{ angle:angle * 180 / Math.PI, //translate radians to degrees velocity:(50 + Math.random() * 250) * speed, //initial velocity gravity:100 * gravity //you could increase/decrease this to give gravity more or less pull }*/ //if you'd rather not do physics, you could just animate out directly by using the following 2 lines instead of the physics2D: x:Math.cos(angle) * length * 24, y:Math.sin(angle) * length * 24 }, 0); } return tl;
}
//just pass this function an element and it'll move the explosion container to its center and play the explosion animation.
function explode(element) { var bounds = element.getBoundingClientRect(); TweenLite.set(container, {x:bounds.left + bounds.width / 2, y:bounds.top + bounds.height / 2}); explosion.restart();
}
function getRandom(min, max) { return min + Math.random() * (max - min);
}
//explode initially, and then whenever the user presses on the dot.
explode(emitter);
emitter.onmousedown = emitter.ontouchstart = function() { explode(emitter);
}
A Pen by John Heiner - Script Codes
A Pen by John Heiner - Script Codes
Home Page Home
Developer John Heiner
Username johnheiner
Uploaded November 14, 2022
Rating 4
Size 3,599 Kb
Views 16,192
Do you need developer help for A Pen by John Heiner?

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!

John Heiner (johnheiner) Script Codes
Name
Unboxed Technology Footer Animation
Tooltip
Multi-line CSS text-shadow
Animated River Depth measurement
Rounded Triangle
Material Shadows
Bouncy Box
Loading Icon
Canvas Mask Page Intro Animation
Some Button Styles
Create amazing sales emails 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!