midterm.html

<!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>