Skip to content
Permalink
96dcee1a96
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?

dmd5470-mr/midterm.html

Go to file
 
 
Cannot retrieve contributors at this time
129 lines (106 sloc) 4.34 KB
Raw Blame
<!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 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> <!--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 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 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 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>