Skip to content
Permalink
e924061d8a
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time
214 lines (191 sloc) 9.47 KB
<!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-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></div>
<div class="particle-subtle"></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="starburst" id="starburst1">
<div class="star-wrapper rotate1"><div class="particle-star"></div></div>
<div class="star-wrapper rotate2"><div class="particle-star"></div></div>
<div class="star-wrapper rotate3"><div class="particle-star"></div></div>
<div class="star-wrapper rotate4"><div class="particle-star"></div></div>
<div class="star-wrapper rotate5"><div class="particle-star"></div></div>
<div class="star-wrapper rotate6"><div class="particle-star"></div></div>
<div class="star-wrapper rotate7"><div class="particle-star"></div></div>
<div class="star-wrapper rotate8"><div class="particle-star"></div></div>
<div class="star-wrapper rotate9"><div class="particle-star"></div></div>
<div class="star-wrapper rotate10"><div class="particle-star"></div></div>
</div>
<div class="starburst" id="starburst2">
<div class="star-wrapper rotate1"><div class="particle-star"></div></div>
<div class="star-wrapper rotate2"><div class="particle-star"></div></div>
<div class="star-wrapper rotate3"><div class="particle-star"></div></div>
<div class="star-wrapper rotate4"><div class="particle-star"></div></div>
<div class="star-wrapper rotate5"><div class="particle-star"></div></div>
<div class="star-wrapper rotate6"><div class="particle-star"></div></div>
<div class="star-wrapper rotate7"><div class="particle-star"></div></div>
<div class="star-wrapper rotate8"><div class="particle-star"></div></div>
<div class="star-wrapper rotate9"><div class="particle-star"></div></div>
<div class="star-wrapper rotate10"><div class="particle-star"></div></div>
</div>
<div class="starburst" id="starburst3">
<div class="star-wrapper rotate1"><div class="particle-star"></div></div>
<div class="star-wrapper rotate2"><div class="particle-star"></div></div>
<div class="star-wrapper rotate3"><div class="particle-star"></div></div>
<div class="star-wrapper rotate4"><div class="particle-star"></div></div>
<div class="star-wrapper rotate5"><div class="particle-star"></div></div>
<div class="star-wrapper rotate6"><div class="particle-star"></div></div>
<div class="star-wrapper rotate7"><div class="particle-star"></div></div>
<div class="star-wrapper rotate8"><div class="particle-star"></div></div>
<div class="star-wrapper rotate9"><div class="particle-star"></div></div>
<div class="star-wrapper rotate10"><div class="particle-star"></div></div>
</div>
<div class="starburst" id="starburst4">
<div class="star-wrapper rotate1"><div class="particle-star"></div></div>
<div class="star-wrapper rotate2"><div class="particle-star"></div></div>
<div class="star-wrapper rotate3"><div class="particle-star"></div></div>
<div class="star-wrapper rotate4"><div class="particle-star"></div></div>
<div class="star-wrapper rotate5"><div class="particle-star"></div></div>
<div class="star-wrapper rotate6"><div class="particle-star"></div></div>
<div class="star-wrapper rotate7"><div class="particle-star"></div></div>
<div class="star-wrapper rotate8"><div class="particle-star"></div></div>
<div class="star-wrapper rotate9"><div class="particle-star"></div></div>
<div class="star-wrapper rotate10"><div class="particle-star"></div></div>
</div>
<div class="starburst" id="starburst5">
<div class="star-wrapper rotate1"><div class="particle-star"></div></div>
<div class="star-wrapper rotate2"><div class="particle-star"></div></div>
<div class="star-wrapper rotate3"><div class="particle-star"></div></div>
<div class="star-wrapper rotate4"><div class="particle-star"></div></div>
<div class="star-wrapper rotate5"><div class="particle-star"></div></div>
<div class="star-wrapper rotate6"><div class="particle-star"></div></div>
<div class="star-wrapper rotate7"><div class="particle-star"></div></div>
<div class="star-wrapper rotate8"><div class="particle-star"></div></div>
<div class="star-wrapper rotate9"><div class="particle-star"></div></div>
<div class="star-wrapper rotate10"><div class="particle-star"></div></div>
</div>
</div>
<p>...or you can make your particles POP!</p>
</div>
<div class="copy" 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 class="particle-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>
<p>(particle gallery here)</p>
</div>
<div class="copy" 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 gives the animation a more interesting and 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 class="copy" 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>