Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
  <meta charset="UTF-8"/>
  <title>Port Aero</title>
  <link href="../Styles/AerodynamicStyleSheet.css" rel="stylesheet" type="text/css"/>
</head>

<body>
  ...
  <p>...The Navy jets continue accelerating and climbing with the passenger jet in tow and then bank into the direction from which they’d come as orchestral <img class="playArrow" id="fanfarePlay" alt="play audio" src="../Images/playArrow.png"/> music swells and fireworks bloom in the sky all around the tower. Everyone laughs in relief and begins applauding, and the ATC thanks everyone for their courage and bravery in helping to avert disaster. Automatic doors open in the stairwell to the side of the room and the ATC continues with effusive thanks as people exit.</p>
    <canvas id="canvasFireworks"></canvas>
    <audio id="fanfareAudio" src="../Audio/garvey_finale.mp3" type="audio/mp3"></audio>

<script type="text/javascript">  
  var clip = document.getElementById("fanfareAudio");
  var playPause = document.getElementById("fanfarePlay");
  var script = document.createElement('script');
      script.src = '../Misc/fireScript.js';
      script.type = 'text/javascript';

  playPause.addEventListener("click", function() {
    if (clip.paused == true) {
        clip.play();
        playPause.src="../Images/playPause.png";
        document.getElementById('canvasFireworks').appendChild(script);
    } else {
        clip.pause();
        playPause.src="../Images/playArrow.png";
    }
  });
  clip.onended = function() {
    playPause.src="../Images/playArrow.png";
  };
</script>

    <p>Leith stands at the top of the stairs to the exit as if he’s one of the ride facilitators and watches people pass, smiling to those who communicate their approval to him with a nod or a smiling roll of the eyes. ...</p>

</body>
</html>
              
            
!

CSS

              
                nav#landmarks { display:none;
}
nav#page-list { display:none;
}
ol {		list-style-type:none;
}
@font-face { font-family:hand;
			src: url(../Fonts/daniel-bold.otf);
}
@font-face { font-family:rough;
			src: url(../Fonts/hybrid__.ttf);
}
@font-face { font-family:display;
			src: url(../Fonts/antonio-regular.ttf);
}
@font-face { font-family:medieval;
			src: url(../Fonts/deutsch.ttf);
}
@font-face { font-family:bones;
			src: url(../Fonts/headhunter-regular.ttf);
}
body {		margin:0px;
			padding:0px;
			overflow-x:hidden;
			font-family:serif;
			background-color:#ffffff;
}
#coverImg {	position:absolute; 
			width:100%; 
			height:100%;
			left:0;
			top:0; 
			margin:0pt; 
			overflow:hidden;
}
#coverBkgd { position:absolute; 
			left:0;
			top:0; 
			width:100%;
			height:100%;
			z-index:-1;
}
a { 		text-decoration:none;
			color:inherit;
}
p {			text-indent:1.5em;
			margin:0 10% 0 10%;
			text-align:justify;
}
.pFirst {	text-indent:0;
}
h1 {		font-size:80%;
			text-align:center;
			opacity:0;
}
.pageImg {	position:fixed;
			top:0px;
			left:0px;
			margin:0px;
			width:100%;
			z-index:-1;
}
#alsoBy {	text-align:center;
			margin-top:30%;
}
#alsoByHead { font-size:110%;
}
#copyrightText { margin:90% 20% 0 20%;
			font-size:70%;
}
#dedicationVideo { position:absolute;
			width:90%;
			top:20%;
			right:0%;
			opacity:0.3;
}
#dedicationText { margin:38% auto 0 auto;
			text-align:center;
}
#contentsVideoCrop { position:absolute;
			width:32%;
			height:70%;
			left:0;
			overflow:hidden;			
}
#contentsVideo { position:absolute;
			left:-200%;
			top:-9%;
			height:110%;
			opacity:0.3;
}
#contentsCrop { clear:left;
			margin:-10em 0 0 10%;
			width:32%;
			padding:0;
}
.contents { position:relative; 
			font-family:serif;
			font-size:85%;
			margin:0 0 0.2em; 
			background-color:#f8f8f8;
			text-decoration:none;
}
#prefaceHeading { width:32%;
			margin:17% 0 8% 9%;
			z-index:-1
}
#jetInteriorCrop { position:absolute;
			width:110%;
			left:-10%;
			top:-9%;
			overflow:hidden;
}
#jetInterior { width:100%;
			opacity:0.2;
}
.innerText { font-family:sans-serif;
			font-size:83%;
			opacity:0.7;
			line-height:1.3;
        
}
.subhead {	font-size:110%;
			text-indent:0;
			margin-bottom:1em;
}
#quotesVideoCrop { position:absolute;
			width:100%;
			height:40%;
			top:14%;
			left:0;
			z-index:-1;
			overflow:hidden;
}
#quotesVideo { position:absolute;
			left:0;
			width:120%;
			opacity:0.4;
}
#quotesImgCrop { position:absolute;
			width:100%;
			height:40%;
			top:14%;
			left:0;
			z-index:-1;
			overflow:hidden;
}
#quotesImg { position:absolute;
			left:0%;
			width:120%;
			opacity:0.2;
}
#quotesText { margin:25% 15% 0 15%;
}
.noWrap {	white-space:nowrap;
}
.smallCaps { font-variant:small-caps;
}
.symbol {	width:0.9em;
			margin-bottom:-2px;
			display:inline;
}
/*--Chapter 1: Tower Control---------------------------------*/
.mapBorderLeft { position:fixed;
			left:3%;
			top:2%;
			width:120%;
			height:95%;
			overflow:hidden;
			border:1px solid #486aa0;
			border-radius:2%;
			margin:0px;
			padding:0px;
}
.mapBorderRight { position:fixed;
			left:-3%;
			top:2%;
			width:100%;
			height:95%;
			overflow:hidden;
			border:1px solid #486aa0;
			border-radius:2%;
			margin:0px;
			padding:0px;
}
.chapterHead { float:left;
			width:90%;
			margin:15% 0 30% 10%;
			z-index:-1;
}
#dropCap {	float:left;
			width:17%;
			margin:0 0.5% -0.5em 10%;
}
.newPage {	margin-top:3em;
}
#jetGraphicCrop { position:absolute;
			display:inline;
			width:100%;
			left:0px;
			padding:0px;
			z-index:-1;
			page-break-inside:avoid;
}
#jetGraphic { width:10%;
			margin-left:45%;
			opacity:0.3;
			page-break-inside:avoid;
			animation-duration:30s;
			animation-iteration-count:1;
			animation-fill-mode:both;
			animation-timing-function:ease-in;
}
@keyframes jetAnimation {
			0% {width:10%; margin-left:45%; margin-top:0; opacity:0.3;}
			90% {opacity:0.8;}
			100% {width:300%; margin-left:-100%; margin-top:-70%; opacity:0;}
}
#canvasFireworks { position:absolute;
			width:100%;
			height:50%;
			left:0px;
			margin-top:-10em;
			z-index:-1;
			page-break-inside:avoid;
}
.playArrow { height:0.7em;
			opacity:0.4;
			margin-bottom:-1px;
			cursor:pointer;
}
.ch01note01 { float:left;
			width:16%;
			margin:0 0 0 -12%;
			opacity:0.3;
			page-break-inside:avoid;
}
              
            
!

JS

              
                          // === CONFIGURATION ===

          // Base firework acceleration.
          // 1.0 causes fireworks to travel at a constant speed.
          // Higher number increases rate firework accelerates over time.
const FIREWORK_ACCELERATION = 1.05;
          // Minimum firework brightness.
const FIREWORK_BRIGHTNESS_MIN = 100;
          // Maximum firework brightness.
const FIREWORK_BRIGHTNESS_MAX = 100;
          // Base speed of fireworks.
const FIREWORK_SPEED = 25;
          // Base length of firework trails.
const FIREWORK_TRAIL_LENGTH = 1;
          // Determine if target position indicator is enabled.
const FIREWORK_TARGET_INDICATOR_ENABLED = false;

          // Minimum particle brightness.
const PARTICLE_BRIGHTNESS_MIN = 50;
          // Maximum particle brightness.
const PARTICLE_BRIGHTNESS_MAX = 70;
          // Base particle count per firework.
const PARTICLE_COUNT = 100;
          // Minimum particle decay rate.
const PARTICLE_DECAY_MIN = 0.015;
          // Maximum particle decay rate.
const PARTICLE_DECAY_MAX = 0.03;
          // Base particle friction.
          // Slows the speed of particles over time.
const PARTICLE_FRICTION = 0.95;
          // Base particle gravity.
          // How quickly particles move toward a downward trajectory.
const PARTICLE_GRAVITY = 0.7;
          // Variance in particle coloration.
const PARTICLE_HUE_VARIANCE = 0;
          // Base particle transparency.
const PARTICLE_TRANSPARENCY = 1;
          // Minimum particle speed.
const PARTICLE_SPEED_MIN = 1;
          // Maximum particle speed.
const PARTICLE_SPEED_MAX = 10;
          // Base length of explosion particle trails.
const PARTICLE_TRAIL_LENGTH = 5;

          // Alpha level that canvas cleanup iteration removes existing trails.
          // Lower value increases trail duration.
const CANVAS_CLEANUP_ALPHA = 0.15;
          // Hue change per loop, used to rotate through different firework colors.
const HUE_STEP_INCREASE = 5;

          // Minimum number of ticks per manual firework launch.
const TICKS_PER_FIREWORK_MIN = 5;
          // Minimum number of ticks between each automatic firework launch.
const TICKS_PER_FIREWORK_AUTOMATED_MIN = 10;
          // Maximum number of ticks between each automatic firework launch.
const TICKS_PER_FIREWORK_AUTOMATED_MAX = 20;

          // === END CONFIGURATION ===

          // === LOCAL VARS ===

let canvas = document.getElementById('canvas');
          // Set canvas dimensions.
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
          // Set the context, 2d in this case.
let context = canvas.getContext('2d');
          // Firework and particles collections.
let fireworks = [], particles = [];
          // Mouse coordinates.
let mouseX, mouseY;
          // Variable to check if mouse is down.
let isMouseDown = false;
          // Initial hue.
let hue = 120;
          // Track number of ticks since automated firework.
let ticksSinceFireworkAutomated = 0;
          // Track number of ticks since manual firework.
let ticksSinceFirework = 0;

          // === END LOCAL VARS ===

          // === HELPERS ===

          // Use requestAnimationFrame to maintain smooth animation loops.
          // Fall back on setTimeout() if browser support isn't available.
window.requestAnimFrame = (() => {
	return 	window.requestAnimationFrame ||
		   	window.webkitRequestAnimationFrame ||
		   	window.mozRequestAnimationFrame ||
		   	function(callback) {
		   		window.setTimeout(callback, 1000 / 60);
			};
})();

          // Get a random number within the specified range.
function random(min, max) {
	return Math.random() * (max - min) + min;
}

          // Calculate the distance between two points.
function calculateDistance(aX, aY, bX, bY) {
	let xDistance = aX - bX;
	let yDistance = aY - bY;
	return Math.sqrt(Math.pow(xDistance, 2) + Math.pow(yDistance, 2));
}

          // === END HELPERS ===

          // === EVENT LISTENERS ===

          // Track current mouse position within canvas.
/*canvas.addEventListener('mousemove', (e) => {
	mouseX = e.pageX - canvas.offsetLeft
	mouseY = e.pageY - canvas.offsetTop
});

          // Track when mouse is pressed.
canvas.addEventListener('mousedown', (e) => {
	e.preventDefault()
	isMouseDown = true
});

          // Track when mouse is released.
canvas.addEventListener('mouseup', (e) => {
	e.preventDefault()
	isMouseDown = false
});*/

          // === END EVENT LISTENERS ===

          // === PROTOTYPING ===

          // Creates a new firework.
          // Path begins at 'start' point and ends and 'end' point.
function Firework(startX, startY, endX, endY) {
	          // Set current coordinates.
	this.x = startX;
	this.y = startY;
	          // Set starting coordinates.
	this.startX = startX;
	this.startY = startY;
	          // Set end coordinates.
	this.endX = endX;
	this.endY = endY + 200;
	          // Get the distance to the end point.
	this.distanceToEnd = calculateDistance(startX, startY, endX, endY);
	this.distanceTraveled = 0;
	          // Create an array to track current trail particles.
	this.trail = [];
	          // Trail length determines how many trailing particles are active at once.
	this.trailLength = FIREWORK_TRAIL_LENGTH;
	          // While the trail length remains, add current point to trail list.
	while(this.trailLength--) {
		this.trail.push([this.x, this.y]);
	}
	          // Calculate the angle to travel from start to end point.
	this.angle = Math.atan2(endY - startY, endX - startX);
	          // Set the speed.
	this.speed = FIREWORK_SPEED;
	          // Set the acceleration.
	this.acceleration = FIREWORK_ACCELERATION;
	          // Set the brightness.
	this.brightness = random(FIREWORK_BRIGHTNESS_MIN, FIREWORK_BRIGHTNESS_MAX);
	          // Set the radius of click-target location.
	this.targetRadius = 2.5;
}

          // Update a firework prototype.
          // 'index' parameter is index in 'fireworks' array to remove, if journey is complete.
Firework.prototype.update = function(index) {
	          // Remove the oldest trail particle.
	this.trail.pop();
	          // Add the current position to the start of trail.
	this.trail.unshift([this.x, this.y]);
	
	          // Animate the target radius indicator.
	/*if (FIREWORK_TARGET_INDICATOR_ENABLED) {
		if(this.targetRadius < 8) {
			this.targetRadius += 0.3;
		} else {
			this.targetRadius = 1;
		}
	}*/
	
	          // Increase speed based on acceleration rate.
	this.speed *= this.acceleration;
	
	          // Calculate current velocity for both x and y axes.
	let xVelocity = Math.cos(this.angle) * this.speed;
	let yVelocity = Math.sin(this.angle) * this.speed;
	          // Calculate the current distance travelled based on starting position, current position, and velocity.
	          // This can be used to determine if firework has reached final position.
	this.distanceTraveled = calculateDistance(this.startX, this.startY, this.x + xVelocity, this.y + yVelocity);
	
	          // Check if final position has been reached (or exceeded).
	if(this.distanceTraveled >= this.distanceToEnd) {
		          // Destroy firework by removing it from collection.
		fireworks.splice(index, 1);
		          // Create particle explosion at end point.  Important not to use this.x and this.y, 
		          // since that position is always one animation loop behind.
		createParticles(this.endX, this.endY);		
	} else {
		          // End position hasn't been reached, so continue along current trajectory by updating current coordinates.
		this.x += xVelocity;
		this.y += yVelocity;
	}
}

          // Draw a firework.
          // Use CanvasRenderingContext2D methods to create strokes as firework paths. 
Firework.prototype.draw = function() {
	          // Begin a new path for firework trail.
	context.beginPath();
	          // Get the coordinates for the oldest trail position.	
	let trailEndX = this.trail[this.trail.length - 1][0];
	let trailEndY = this.trail[this.trail.length - 1][1];
	          // Create a trail stroke from trail end position to current firework position.
	context.moveTo(trailEndX, trailEndY);
	context.lineTo(this.x, this.y);
	          // Set stroke coloration and style.
	          // Use hue, saturation, and light values instead of RGB.
	context.strokeStyle = `hsl(${hue}, 100%, ${this.brightness}%)`;
	          // Draw stroke.
	//context.stroke();
	
	if (FIREWORK_TARGET_INDICATOR_ENABLED) {
		          // Begin a new path for end position animation.
		context.beginPath();
		          // Create a pulsing circle at the end point with targetRadius.
		context.arc(this.endX, this.endY, this.targetRadius, 0, Math.PI * 2);
		          // Draw stroke.
		context.stroke();
	}
}

          // Creates a new particle at provided 'x' and 'y' coordinates.
function Particle(x, y) {
	          // Set current position.
	this.x = x;
	this.y = y;
	          // To better simulate a firework, set the angle of travel to random value in any direction.
	this.angle = random(0, Math.PI * 2);
	          // Set friction.
	this.friction = PARTICLE_FRICTION;
	          // Set gravity.
	this.gravity = PARTICLE_GRAVITY;
	          // Set the hue to somewhat randomized number.
	          // This gives the particles within a firework explosion an appealing variance.
	this.hue = random(hue - PARTICLE_HUE_VARIANCE, hue + PARTICLE_HUE_VARIANCE);
	          // Set brightness.
	this.brightness = random(PARTICLE_BRIGHTNESS_MIN, PARTICLE_BRIGHTNESS_MAX);
	          // Set decay.
	this.decay = random(PARTICLE_DECAY_MIN, PARTICLE_DECAY_MAX);	
	          // Set speed.
	this.speed = random(PARTICLE_SPEED_MIN, PARTICLE_SPEED_MAX);
	          // Create an array to track current trail particles.
	this.trail = [];
	          // Trail length determines how many trailing particles are active at once.
	this.trailLength = PARTICLE_TRAIL_LENGTH;
	          // While the trail length remains, add current point to trail list.
	while(this.trailLength--) {
		this.trail.push([this.x, this.y]);
	}
	          // Set transparency.
	this.transparency = PARTICLE_TRANSPARENCY;
}

          // Update a particle prototype.
          // 'index' parameter is index in 'particles' array to remove, if journey is complete.
Particle.prototype.update = function(index) {
	          // Remove the oldest trail particle.
	this.trail.pop();
	          // Add the current position to the start of trail.
	this.trail.unshift([this.x, this.y]);

	          // Decrease speed based on friction rate.
	this.speed *= this.friction;
	          // Calculate current position based on angle, speed, and gravity (for y-axis only).
	this.x += Math.cos(this.angle) * this.speed;
	this.y += Math.sin(this.angle) * this.speed + this.gravity;

	          // Apply transparency based on decay.
	this.transparency -= this.decay;
	          // Use decay rate to determine if particle should be destroyed.
	if(this.transparency <= this.decay) {
		          // Destroy particle once transparency level is below decay.
		particles.splice(index, 1);
	}
}

          // Draw a particle.
          // Use CanvasRenderingContext2D methods to create strokes as particle paths. 
Particle.prototype.draw = function() {
	          // Begin a new path for particle trail.
	context.beginPath();
	          // Get the coordinates for the oldest trail position.	
	let trailEndX = this.trail[this.trail.length - 1][0];
	let trailEndY = this.trail[this.trail.length - 1][1];
	          // Create a trail stroke from trail end position to current particle position.
	context.moveTo(trailEndX, trailEndY);
	context.lineTo(this.x, this.y);
	          // Set stroke coloration and style.
	          // Use hue, brightness, and transparency instead of RGBA.
	context.strokeStyle = `hsla(${this.hue}, 100%, ${this.brightness}%, ${this.transparency})`;
	context.stroke();
}

          // === END PROTOTYPING ===

          // === APP HELPERS ===

          // Cleans up the canvas by removing older trails.
          //
          // In order to smoothly transition trails off the canvas, and to make them 
          // appear more realistic, we're using a composite fill.
          // Set the initial composite mode to 'destination-out' to keep content that
          // overlap with the fill we're adding.
          //
          // see: https:          //developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
function cleanCanvas() {
	          // Set 'destination-out' composite mode, so additional fill doesn't remove non-overlapping content.
	context.globalCompositeOperation = 'destination-out';
	          // Set alpha level of content to remove.
	          // Lower value means trails remain on screen longer.
	context.fillStyle = `rgba(0, 0, 0, ${CANVAS_CLEANUP_ALPHA})`;
	          // Fill entire canvas.
	context.fillRect(0, 0, canvas.width, canvas.height);
	          // Reset composite mode to 'lighter', so overlapping particles brighten each other.
	context.globalCompositeOperation = 'lighter';
}

          // Create particle explosion at 'x' and 'y' coordinates.
function createParticles(x, y) {
	          // Set particle count.
	          // Higher numbers may reduce performance.
	let particleCount = PARTICLE_COUNT;
	while(particleCount--) {
		          // Create a new particle and add it to particles collection.
		particles.push(new Particle(x, y));
	}
}

          // Launch fireworks automatically.
function launchAutomatedFirework() {
	          // Determine if ticks since last automated launch is greater than random min/max values.
	if(ticksSinceFireworkAutomated >= random(TICKS_PER_FIREWORK_AUTOMATED_MIN, TICKS_PER_FIREWORK_AUTOMATED_MAX)) {
		          // Check if mouse is not currently clicked.
		if(!isMouseDown) {
			          // Set start position to bottom center.
			let startX = canvas.width / 2;
			let startY = canvas.height;
			          // Set end position to random position, somewhere in the top half of screen.
			let endX = random(0, canvas.width);
			let endY = random(0, canvas.height / 2);
			          // Create new firework and add to collection.
			fireworks.push(new Firework(startX, startY, endX, endY));
			          // Reset tick counter.
			ticksSinceFireworkAutomated = 0;
		}
	} else {
		          // Increment counter.
		ticksSinceFireworkAutomated++;
	}
}

          // Launch fireworks manually, if mouse is pressed.
/*function launchManualFirework() {
	          // Check if ticks since last firework launch is less than minimum value.
	if(ticksSinceFirework >= TICKS_PER_FIREWORK_MIN) {
		          // Check if mouse is down.
		if(isMouseDown) {
			          // Set start position to bottom center.
			let startX = canvas.width / 2;
			let startY = canvas.height;
			          // Set end position to current mouse position.
			let endX = mouseX;
			let endY = mouseY;
			          // Create new firework and add to collection.
			fireworks.push(new Firework(startX, startY, endX, endY));
			          // Reset tick counter.
			ticksSinceFirework = 0;
		}
	} else {
		          // Increment counter.
		ticksSinceFirework++;
	}
}*/

          // Update all active fireworks.
function updateFireworks() {
	          // Loop backwards through all fireworks, drawing and updating each.
	for (let i = fireworks.length - 1; i >= 0; --i) {
		fireworks[i].draw();
		fireworks[i].update(i);
	}
}

          // Update all active particles.
function updateParticles() {
	          // Loop backwards through all particles, drawing and updating each.
	for (let i = particles.length - 1; i >= 0; --i) {
		particles[i].draw();
		particles[i].update(i);
	}
}

          // === END APP HELPERS ===

          // Primary loop.
function loop() {
	          // Smoothly request animation frame for each loop iteration.
	requestAnimFrame(loop);

	          // Adjusts coloration of fireworks over time.
	hue += HUE_STEP_INCREASE;

	          // Clean the canvas.
	cleanCanvas();

	          // Update fireworks.
	updateFireworks();

	          // Update particles.
	updateParticles();
	
	          // Launch automated fireworks.
	launchAutomatedFirework();
	
	          // Launch manual fireworks.
	launchManualFirework();
}

          // Initiate loop after window loads.
window.onload = loop;
              
            
!
999px

Console