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