Skip to content
Permalink
94c16c2417
Go to file
 
 
Cannot retrieve contributors at this time
215 lines (192 sloc) 9.63 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 -->
<main id="body-wrapper">
<header>
<h2>CSS Showcase:</h2>
<h1>Particle Animation</h1>
</header>
<section 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>
<h3>You can use animated particles to create a subtle background effect...</h3>
</section>
<section 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>
<h3>...or you can make your particles POP!</h3>
<p class="attribution">"Sandiego skyline at night" by Whoismanu is licensed under CC BY-SA 3.0.</p>
</section>
<section 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>
</section>
<section 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>
</section>
<section 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>
</section>
<section 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>
</section>
</main>
<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>
You can’t perform that action at this time.