Meteor Shower
How do I make an meteor shower?
Canvas Meteor Shower. What is a meteor shower? How do you make a meteor shower? This script and codes were developed by Keegan Brown on 16 October 2022, Sunday.
Meteor Shower - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Meteor Shower</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.8/TweenMax.min.js"></script>
<div id="container"></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/kineticjs/4.7.2/kinetic.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Meteor Shower - Script Codes CSS Codes
html,body{ margin:0; padding:0; min-height: 1000px; height:100%; width:100%; background:#000;
}
#container { background: url("http://upload.wikimedia.org/wikipedia/commons/4/4f/Summit-lake-wv-night-sky-reflection_-_West_Virginia_-_ForestWander.jpg"); background-size: cover;
}
#container, #container canvas { margin:0; padding:0; height:100%; width:100%; display:block;
}
Meteor Shower - Script Codes JS Codes
$(function () { var mainw = $("#container").width(), mainh = $("#container").height(), midX = Math.floor(mainw/2), midY = Math.floor(mainh/2); var stage = new Kinetic.Stage({ container: "container", width: mainw, height: mainh }); var layer = new Kinetic.Layer(); var group = new Kinetic.Group(); var _baseRad = 2; var _num = 100; var tweens = []; var _tmo = null; $("#container").on( { click: function (e) { tweenComet( { x: e.pageX, y: e.pageY } ); } }); function rndComet () { tweenComet( { x: Math.round( (Math.random()*midX) ), y: Math.round( (Math.random()*midY) ) } ); } function tweenComet (startpos) { var dots = group.getChildren(); var dirX = ( Math.round(Math.random()) ) ? 1 : -1; var dirY = ( Math.round(Math.random()) ) ? 1 : -1; var _yrnd = Math.random(); for (var i = 0; i < dots.length; i++) { dots[i].setX( startpos.x-midX ); dots[i].setY( startpos.y-midY ); dots[i].setOpacity(0.3); tweens[i] = TweenMax.to(dots[i], 0.5, { setOpacity: 0, overwrite: "all", setX: (midX*2*dirX), setY: (startpos.y-midY-(300*_yrnd*dirY)), delay: i * .001, ease: Linear.easeOut }); } if ( !!_tmo ) { clearTimeout(_tmo); } _tmo = setTimeout( rndComet, 3000 ); } for (i = 0; i < _num; i++) { var radius = _baseRad+1-_baseRad*(i/(_num)); var circle = new Kinetic.Rect({ x: 0, y: 0, width: radius, height: radius, fill: 'FFFFFF', strokeWidth: 0 }); group.add(circle); } stage.add(layer); layer.add(group); group.setOffset(0, 0); TweenLite.ticker.addEventListener("tick", go); var lastRot = 0; group.setPosition(midX,midY); function go() { stage.clear(); group.draw(); } rndComet();
});
Developer | Keegan Brown |
Username | keeganbrown |
Uploaded | October 16, 2022 |
Rating | 3 |
Size | 2,583 Kb |
Views | 30,360 |
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 |
Particles with GSAP and SketchJS | 3,441 Kb |
Grow3.js Starter Pen | 2,344 Kb |
Easy-peasy 3D Scrolling Parallax with GSAP | 2,468 Kb |
Text With Mouse Reactive Soft Shadow | 2,692 Kb |
Parallaxy Background images | 2,947 Kb |
Reddit Fixed Position Image Scroller | 2,258 Kb |
Particles, Particles, Particles... | 2,416 Kb |
GreenSock SplitText Contest Entry | 3,389 Kb |
Particles, Particles, Particles -- 3 | 2,783 Kb |
A CSS Trip through outer space | 326,256 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 |
GrcJS | Vino6 | 2,047 Kb |
Hc first draft | Stepfray | 5,104 Kb |
CSS3 Selectables with information rollover | Jasonmayes | 9,565 Kb |
Responsive Minimal Blog Layout | Hackthevoid | 5,261 Kb |
Minimelephant | Smashlee | 2,507 Kb |
Kudos Please | TimPietrusky | 6,624 Kb |
Flexbox slider | Rendro | 3,459 Kb |
Magnus 3 | ARocketfish | 7,944 Kb |
Pruebas de d3.js | Juanmanuelcarnerero | 2,485 Kb |
FontAwesome icons with animation | Nicotinell | 2,083 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!