Permalink
Cannot retrieve contributors at this time
dmd5470-mr/midterm.html
Go to file<!doctype html> | |
<html class="no-js" lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>CSS Showcase: Particle Animation</title> | |
<meta name="description" content="Tutorial on creating particle animation using CSS"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<link rel="manifest" href="site.webmanifest"> | |
<link rel="apple-touch-icon" href="icon.png"> | |
<!-- Place favicon.ico in the root directory --> | |
<link rel="stylesheet" href="css/normalize.css"> | |
<link rel="stylesheet" href="css/midterm.css"> | |
<meta name="theme-color" content="#fafafa"> | |
</head> | |
<body> | |
<!--[if IE]> | |
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p> | |
<![endif]--> | |
<!-- Add your site or application content here --> | |
<div id="body-wrapper"> | |
<header> | |
<h2>CSS Showcase:</h2> | |
<h1>Particle Animation</h1> | |
</header> | |
<div class="particle-wrapper" id="subtle"> | |
<div class="particle-container"> | |
<div class="particle-temp"></div> | |
</div> | |
<p>You can use animated particles to create a subtle background effect...</p> | |
</div> | |
<div class="particle-wrapper" id="fireworks"> | |
<div class="particle-container"> | |
<div class="burst" id="burst1"></div> | |
<div class="burst" id="burst2"></div> | |
<div class="burst" id="burst3"></div> | |
<div class="burst" id="burst4"></div> | |
<div class="burst" id="burst5"></div> | |
</div> | |
<p>Or you can make your particles show-stopping!</p> | |
</div> | |
<div id="info1"> | |
<p>Particles are the key to all of the realistic animation effects below. | |
Check them out!</p> | |
<ul> | |
<li class="menu item" id="rain-button">Rain</li> | |
<li class="menu item" id="snow-button">Snow</li> | |
<li class="menu item" id="sparks-button">Sparks</li> | |
<li class="menu item" id="bubbles-button">Bubbles</li> | |
<li class="menu item" id="birds-button">Birds</li> | |
</ul> | |
</div> | |
<div> <!--probably dont need this wrapper--> | |
<div class="particle-container" id="rain"> | |
</div> | |
<div class="particle-container" id="snow"> | |
</div> | |
<div class="particle-container" id="sparks"> | |
</div> | |
<div class="particle-container" id="bubbles"> | |
</div> | |
<div class="particle-container" id="birds"> | |
</div> | |
</div> | |
<div id="info2"> | |
<p>Say you’re already familiar with the animation properties of CSS. | |
What makes particle animation any different?</p> | |
<p>The defining characteristics of a particle animation are: </p> | |
<ol> | |
<li>Numerous animated elements of the same type.</li> | |
<li>Randomness/Variation: of particle speed, direction, size, color, etc. This is what gives the animation a natural appearance.</li> | |
</ol> | |
<p>Professional animation software has the ability to automatically generate an infinite number of particles with randomized properties and realistic physics. With CSS, unfortunately we are limited in a few ways:</p> | |
<ul> | |
<li>We have to individually create each particle we want to see;</li> | |
<li>We have to manually define the motion using keyframes;</li> | |
<li>and there is no built-in way to generate random values.</li> | |
</ul> | |
<p>We'll look at some ways to get past these limitations later on.</p> | |
</div> | |
<div id="info3"> | |
<h2>Tutorial</h2> | |
<p>Read on to find out how you can create awesome CSS particle animations yourself!</p> | |
<h3>Outline</h3> | |
<nav> | |
<ul> | |
<li>Create a particle container</li> | |
<li>Create one particle</li> | |
<li>Animate the first particle</li> | |
<li>Duplicate the particle and add variation</li> | |
</ul> | |
</nav> | |
</div> | |
</div> | |
<script src="js/vendor/modernizr-3.8.0.min.js"></script> | |
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> | |
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script> | |
<script src="js/plugins.js"></script> | |
<script src="js/main.js"></script> | |
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. --> | |
<script> | |
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date; | |
ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview') | |
</script> | |
<script src="https://www.google-analytics.com/analytics.js" async></script> | |
</body> | |
</html> |